@govbr-ds/core
Version:
Padrão Digital de Governo
107 lines (106 loc) • 6.1 kB
HTML
<div class="bg-gray-60 p-3">
<nav class="br-pagination dark-mode" aria-label="paginação" data-total="10" data-current="1">
<ul>
<li>
<button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</li>
<li><a class="page active" href="javascript:void(0)" aria-label="Página 1">1</a></li>
<li class="pagination-ellipsis">
<button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação"><i class="fas fa-ellipsis-h" aria-hidden="true"></i>
</button>
<div class="br-list" role="menu"><a class="br-item" href="javascript:void(0)" aria-label="Página 2" role="menuitem">2</a><a class="br-item" href="javascript:void(0)" aria-label="Página 3" role="menuitem">3</a><a class="br-item" href="javascript:void(0)" aria-label="Página 4" role="menuitem">4</a><a class="br-item" href="javascript:void(0)" aria-label="Página 5" role="menuitem">5</a><a class="br-item" href="javascript:void(0)" aria-label="Página 6" role="menuitem">6</a><a class="br-item" href="javascript:void(0)" aria-label="Página 7" role="menuitem">7</a>
</div>
</li>
<li><a class="page" href="javascript:void(0)" aria-label="Página 8">8</a></li>
<li><a class="page" href="javascript:void(0)" aria-label="Página 9">9</a></li>
<li><a class="page" href="javascript:void(0)" aria-label="Página 10">10</a></li>
<li>
<button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Proxima página"><i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</li>
</ul>
</nav>
<hr/>
<nav class="br-pagination dark-mode" 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-89703">Exibir</label>
<input id="per-page-selection-random-89703" 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-89703" type="radio" name="per-page-random-89703" value="per-page-10-random-89703" checked="checked"/>
<label for="per-page-10-random-89703">10</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="per-page-20-random-89703" type="radio" name="per-page-random-89703" value="per-page-20-random-89703"/>
<label for="per-page-20-random-89703">20</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="per-page-30-random-89703" type="radio" name="per-page-random-89703" value="per-page-30-random-89703"/>
<label for="per-page-30-random-89703">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>–<span class="per-page">10</span> de <span class="total">50</span> 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-84710">Página</label>
<input id="go-to-selection-random-84710" 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-84710" type="radio" name="go-to-random-84710" value="go-to-1-random-84710" checked="checked"/>
<label for="go-to-1-random-84710">1</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="go-to-2-random-84710" type="radio" name="go-to-random-84710" value="go-to-2-random-84710"/>
<label for="go-to-2-random-84710">2</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="go-to-3-random-84710" type="radio" name="go-to-random-84710" value="go-to-3-random-84710"/>
<label for="go-to-3-random-84710">3</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="go-to-4-random-84710" type="radio" name="go-to-random-84710" value="go-to-4-random-84710"/>
<label for="go-to-4-random-84710">4</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="go-to-5-random-84710" type="radio" name="go-to-random-84710" value="go-to-5-random-84710"/>
<label for="go-to-5-random-84710">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>
</div>