@govbr-ds/core
Version:
Padrão Digital de Governo
77 lines (76 loc) • 5.96 kB
HTML
<nav class="br-pagination" 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 d-none d-sm-flex" aria-label="paginação" data-total="20" data-current="1">
<ul>
<li>
<button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label=" 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)" role="menuitem">2</a><a class="br-item" href="javascript:void(0)" role="menuitem">3</a><a class="br-item" href="javascript:void(0)" role="menuitem">4</a><a class="br-item" href="javascript:void(0)" role="menuitem">5</a><a class="br-item" href="javascript:void(0)" role="menuitem">6</a><a class="br-item" href="javascript:void(0)" role="menuitem">7</a><a class="br-item" href="javascript:void(0)" role="menuitem">8</a><a class="br-item" href="javascript:void(0)" role="menuitem">9</a>
</div>
</li>
<li><a class="page" href="javascript:void(0)" aria-label="Página 10">10</a></li>
<li><a class="page" href="javascript:void(0)" aria-label="Página 11">11</a></li>
<li><a class="page" href="javascript:void(0)" aria-label="Página 12">12</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)" role="menuitem">13</a><a class="br-item" href="javascript:void(0)" role="menuitem">14</a><a class="br-item" href="javascript:void(0)" role="menuitem">15</a><a class="br-item" href="javascript:void(0)" role="menuitem">16</a><a class="br-item" href="javascript:void(0)" role="menuitem">17</a><a class="br-item" href="javascript:void(0)" role="menuitem">18</a><a class="br-item" href="javascript:void(0)" role="menuitem">19</a>
</div>
</li>
<li><a class="page" href="javascript:void(0)">20</a></li>
<li>
<button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</li>
</ul>
</nav>
<hr/>
<nav class="br-pagination" 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><a class="page" href="javascript:void(0)" aria-label=" página 2">2</a></li>
<li><a class="page" href="javascript:void(0)" aria-label=" página 3">3</a></li>
<li><a class="page" href="javascript:void(0)" aria-label=" página 4">4</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 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><a class="br-item" href="javascript:void(0)" aria-label=" página 8" role="menuitem">8</a><a class="br-item" href="javascript:void(0)" aria-label=" página 9" role="menuitem">9</a>
</div>
</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="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</li>
</ul>
</nav>