@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-72658">Exibir</label>
        <input id="per-page-selection-random-72658" 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-72658" type="radio" name="per-page-random-72658" value="per-page-10-random-72658" checked="checked"/>
            <label for="per-page-10-random-72658">10</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-20-random-72658" type="radio" name="per-page-random-72658" value="per-page-20-random-72658"/>
            <label for="per-page-20-random-72658">20</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-30-random-72658" type="radio" name="per-page-random-72658" value="per-page-30-random-72658"/>
            <label for="per-page-30-random-72658">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-83721">Página</label>
        <input id="go-to-selection-random-83721" 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-83721" type="radio" name="go-to-random-83721" value="go-to-1-random-83721" checked="checked"/>
            <label for="go-to-1-random-83721">1</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-2-random-83721" type="radio" name="go-to-random-83721" value="go-to-2-random-83721"/>
            <label for="go-to-2-random-83721">2</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-3-random-83721" type="radio" name="go-to-random-83721" value="go-to-3-random-83721"/>
            <label for="go-to-3-random-83721">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-25448">Página</label>
        <input id="go-to-selection-random-25448" 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-25448" type="radio" name="go-to-random-25448" value="go-to-1-random-25448" checked="checked"/>
            <label for="go-to-1-random-25448">1</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-2-random-25448" type="radio" name="go-to-random-25448" value="go-to-2-random-25448"/>
            <label for="go-to-2-random-25448">2</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-3-random-25448" type="radio" name="go-to-random-25448" value="go-to-3-random-25448"/>
            <label for="go-to-3-random-25448">3</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-4-random-25448" type="radio" name="go-to-random-25448" value="go-to-4-random-25448"/>
            <label for="go-to-4-random-25448">4</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-5-random-25448" type="radio" name="go-to-random-25448" value="go-to-5-random-25448"/>
            <label for="go-to-5-random-25448">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-68686">Exibir</label>
        <input id="per-page-selection-random-68686" 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-68686" type="radio" name="per-page-random-68686" value="per-page-10-random-68686" checked="checked"/>
            <label for="per-page-10-random-68686">10</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-20-random-68686" type="radio" name="per-page-random-68686" value="per-page-20-random-68686"/>
            <label for="per-page-20-random-68686">20</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-30-random-68686" type="radio" name="per-page-random-68686" value="per-page-30-random-68686"/>
            <label for="per-page-30-random-68686">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-5240">Exibir</label>
        <input id="per-page-selection-random-5240" 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-5240" type="radio" name="per-page-random-5240" value="per-page-10-random-5240" checked="checked"/>
            <label for="per-page-10-random-5240">10</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-20-random-5240" type="radio" name="per-page-random-5240" value="per-page-20-random-5240"/>
            <label for="per-page-20-random-5240">20</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="per-page-30-random-5240" type="radio" name="per-page-random-5240" value="per-page-30-random-5240"/>
            <label for="per-page-30-random-5240">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-87454">Página</label>
        <input id="go-to-selection-random-87454" 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-87454" type="radio" name="go-to-random-87454" value="go-to-1-random-87454" checked="checked"/>
            <label for="go-to-1-random-87454">1</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-2-random-87454" type="radio" name="go-to-random-87454" value="go-to-2-random-87454"/>
            <label for="go-to-2-random-87454">2</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-3-random-87454" type="radio" name="go-to-random-87454" value="go-to-3-random-87454"/>
            <label for="go-to-3-random-87454">3</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-4-random-87454" type="radio" name="go-to-random-87454" value="go-to-4-random-87454"/>
            <label for="go-to-4-random-87454">4</label>
          </div>
        </div>
        <div class="br-item" tabindex="-1">
          <div class="br-radio">
            <input id="go-to-5-random-87454" type="radio" name="go-to-random-87454" value="go-to-5-random-87454"/>
            <label for="go-to-5-random-87454">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>