@govbr-ds/core/dist/components/pagination/examples/pagination-contextual.html

Padrão Digital de Governo

<nav class="br-pagination" aria-label="paginação" data-total="50" data-current="1" data-per-page="20">
  <div class="pagination-per-page">
    <div class="br-select">
      <div class="br-input">
        <label for="per-page-selection-random-19597">Exibir</label>
        <input id="per-page-selection-random-19597" type="text" placeholder=" "/>
        <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
        </button>
      </div>
      <div class="br-list" tabindex="0">
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-10-random-19597" type="radio" name="per-page-random-19597" value="per-page-10-random-19597" checked="checked"/>
            <label for="per-page-10-random-19597">10</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-20-random-19597" type="radio" name="per-page-random-19597" value="per-page-20-random-19597"/>
            <label for="per-page-20-random-19597">20</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-30-random-19597" type="radio" name="per-page-random-19597" value="per-page-30-random-19597"/>
            <label for="per-page-30-random-19597">30</label>
          </div>
        </div>
      </div>
    </div>
  </div><span class="br-divider d-none d-sm-block mx-3"></span>
  <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>&ndash;<span class="per-page">20</span>&nbsp;de&nbsp;<span class="total">50</span>&nbsp;itens</div>
  <div class="pagination-go-to-page d-none d-sm-flex ml-auto">
    <div class="br-select">
      <div class="br-input">
        <label for="go-to-selection-random-82808">Página</label>
        <input id="go-to-selection-random-82808" type="text" placeholder=" "/>
        <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
        </button>
      </div>
      <div class="br-list" tabindex="0">
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-1-random-82808" type="radio" name="go-to-random-82808" value="go-to-1-random-82808" checked="checked"/>
            <label for="go-to-1-random-82808">1</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-2-random-82808" type="radio" name="go-to-random-82808" value="go-to-2-random-82808"/>
            <label for="go-to-2-random-82808">2</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-3-random-82808" type="radio" name="go-to-random-82808" value="go-to-3-random-82808"/>
            <label for="go-to-3-random-82808">3</label>
          </div>
        </div>
      </div>
    </div>
  </div><span class="br-divider d-none d-sm-block mx-3"></span>
  <div class="pagination-arrows ml-auto ml-sm-0">
    <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i>
    </button>
    <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i>
    </button>
  </div>
</nav>
<hr/>
<nav class="br-pagination" aria-label="paginação" data-total="50" data-current="1" data-per-page="10">
  <div class="pagination-arrows">
    <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i>
    </button>
    <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i>
    </button>
  </div><span class="br-divider d-none d-sm-block mx-3"></span>
  <div class="pagination-go-to-page d-none d-sm-flex">
    <div class="br-select">
      <div class="br-input">
        <label for="go-to-selection-random-99754">Página</label>
        <input id="go-to-selection-random-99754" type="text" placeholder=" "/>
        <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
        </button>
      </div>
      <div class="br-list" tabindex="0">
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-1-random-99754" type="radio" name="go-to-random-99754" value="go-to-1-random-99754" checked="checked"/>
            <label for="go-to-1-random-99754">1</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-2-random-99754" type="radio" name="go-to-random-99754" value="go-to-2-random-99754"/>
            <label for="go-to-2-random-99754">2</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-3-random-99754" type="radio" name="go-to-random-99754" value="go-to-3-random-99754"/>
            <label for="go-to-3-random-99754">3</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-4-random-99754" type="radio" name="go-to-random-99754" value="go-to-4-random-99754"/>
            <label for="go-to-4-random-99754">4</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-5-random-99754" type="radio" name="go-to-random-99754" value="go-to-5-random-99754"/>
            <label for="go-to-5-random-99754">5</label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pagination-per-page ml-auto">
    <div class="br-select">
      <div class="br-input">
        <label for="per-page-selection-random-9178">Exibir</label>
        <input id="per-page-selection-random-9178" type="text" placeholder=" "/>
        <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
        </button>
      </div>
      <div class="br-list" tabindex="0">
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-10-random-9178" type="radio" name="per-page-random-9178" value="per-page-10-random-9178" checked="checked"/>
            <label for="per-page-10-random-9178">10</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-20-random-9178" type="radio" name="per-page-random-9178" value="per-page-20-random-9178"/>
            <label for="per-page-20-random-9178">20</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-30-random-9178" type="radio" name="per-page-random-9178" value="per-page-30-random-9178"/>
            <label for="per-page-30-random-9178">30</label>
          </div>
        </div>
      </div>
    </div>
  </div><span class="br-divider d-none d-sm-block mx-3"></span>
  <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>&ndash;<span class="per-page">10</span>&nbsp;de&nbsp;<span class="total">50</span>&nbsp;itens</div>
</nav>
<hr/>
<nav class="br-pagination" aria-label="paginação" data-total="50" data-current="1" data-per-page="10">
  <div class="pagination-per-page">
    <div class="br-select">
      <div class="br-input">
        <label for="per-page-selection-random-97015">Exibir</label>
        <input id="per-page-selection-random-97015" type="text" placeholder=" "/>
        <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
        </button>
      </div>
      <div class="br-list" tabindex="0">
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-10-random-97015" type="radio" name="per-page-random-97015" value="per-page-10-random-97015" checked="checked"/>
            <label for="per-page-10-random-97015">10</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-20-random-97015" type="radio" name="per-page-random-97015" value="per-page-20-random-97015"/>
            <label for="per-page-20-random-97015">20</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-30-random-97015" type="radio" name="per-page-random-97015" value="per-page-30-random-97015"/>
            <label for="per-page-30-random-97015">30</label>
          </div>
        </div>
      </div>
    </div>
  </div><span class="br-divider d-none d-sm-block mx-3"></span>
  <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>&ndash;<span class="per-page">10</span>&nbsp;de&nbsp;<span class="total">50</span>&nbsp;itens</div><span class="br-divider d-none d-sm-block mx-3"></span>
  <div class="pagination-go-to-page d-none d-sm-flex">
    <div class="br-select">
      <div class="br-input">
        <label for="go-to-selection-random-94477">Página</label>
        <input id="go-to-selection-random-94477" type="text" placeholder=" "/>
        <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
        </button>
      </div>
      <div class="br-list" tabindex="0">
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-1-random-94477" type="radio" name="go-to-random-94477" value="go-to-1-random-94477" checked="checked"/>
            <label for="go-to-1-random-94477">1</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-2-random-94477" type="radio" name="go-to-random-94477" value="go-to-2-random-94477"/>
            <label for="go-to-2-random-94477">2</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-3-random-94477" type="radio" name="go-to-random-94477" value="go-to-3-random-94477"/>
            <label for="go-to-3-random-94477">3</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-4-random-94477" type="radio" name="go-to-random-94477" value="go-to-4-random-94477"/>
            <label for="go-to-4-random-94477">4</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-5-random-94477" type="radio" name="go-to-random-94477" value="go-to-5-random-94477"/>
            <label for="go-to-5-random-94477">5</label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pagination-arrows ml-auto">
    <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i>
    </button>
    <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i>
    </button>
  </div>
</nav>