Pagination
A pagination component is like a digital bookmark, helping users navigate through a sea of content without getting lost. It's a handy tool that breaks down information into bite-sized chunks, making it easier to digest and explore. With a pagination component, users can easily find what they're looking for, without feeling overwhelmed by a barrage of text.
Default pagination
<nav class="pagination" aria-label="Pagination"
style="--xii-pagination-grid-template-columns: 1fr 1fr">
<div class="left">
<p>Showing 1 to 10 of 97 results</p>
</div>
<div class="right">
<div class="btn-group separated" role="group" aria-label="Basic example">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</div>
</div>
</nav>
@use '~/styles/app.scss' as app;
$button: app.get-theme(app.$theme, 'components.button');
@include app.generate-component(
$button,
'btn',
app.$config,
app.$theme
);
$button_group: app.get-theme(app.$theme, 'components.button-group');
@include app.generate-component(
$button_group,
'btn-group',
app.$config,
app.$theme
);
$pagination: app.get-theme(app.$theme, 'components.pagination');
@include app.generate-component(
$pagination,
'pagination',
app.$config,
app.$theme
);
Pagination centered
<nav class="pagination" aria-label="Pagination"
style="--xii-pagination-grid-template-columns: 100px 1fr 100px">
<div class="left">
<button class="btn">Previous</button>
</div>
<div class="center">
<div class="btn-group separated" role="group" aria-label="Basic example">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</div>
</div>
<div class="right">
<button class="btn">Next</button>
</div>
</nav>
@use '~/styles/app.scss' as app;
$button: app.get-theme(app.$theme, 'components.button');
@include app.generate-component(
$button,
'btn',
app.$config,
app.$theme
);
$button_group: app.get-theme(app.$theme, 'components.button-group');
@include app.generate-component(
$button_group,
'btn-group',
app.$config,
app.$theme
);
$pagination: app.get-theme(app.$theme, 'components.pagination');
@include app.generate-component(
$pagination,
'pagination',
app.$config,
app.$theme
);
SVG icons
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="item">
<a href="#" class="link">
<svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
<g>
<path
d="m9.979802,16a0.997,0.997 0 0 1 -0.707,-0.293l-5,-5a0.999,0.999 0 0 1 0,-1.414l5,-5a0.999,0.999 0 1 1 1.414,1.414l-4.293,4.293l4.293,4.293a0.999,0.999 0 0 1 -0.707,1.707z"></path>
<path
d="m14.681362,16a0.997,0.997 0 0 1 -0.707,-0.293l-5,-5a0.999,0.999 0 0 1 0,-1.414l5,-5a0.999,0.999 0 1 1 1.414,1.414l-4.293,4.293l4.293,4.293a0.999,0.999 0 0 1 -0.707,1.707z"></path>
</g>
</svg>
</a>
</li>
<li class="item">
<a href="#" class="link">
<svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
<path
d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"></path>
</svg>
</a>
</li>
<li class="item">
<a href="#" class="link">
<svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
<path
d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"></path>
</svg>
</a>
</li>
<li class="item">
<a href="#" class="link">
<svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
<g>
<path
d="M9.7,4c0.3,0,0.5,0.1,0.7,0.3l5,5c0.4,0.4,0.4,1,0,1.4c0,0,0,0,0,0l-5,5c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l4.3-4.3L9,5.7c-0.4-0.4-0.4-1,0-1.4C9.2,4.1,9.4,4,9.7,4z"></path>
<path
d="M5,4c0.3,0,0.5,0.1,0.7,0.3l5,5c0.4,0.4,0.4,1,0,1.4c0,0,0,0,0,0l-5,5c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4L8.6,10L4.3,5.7c-0.4-0.4-0.4-1,0-1.4C4.5,4.1,4.7,4,5,4z"></path>
</g>
</svg>
</a>
</li>
</ul>
</nav>
@use '~/styles/app.scss' as app;
$button: app.get-theme(app.$theme, 'components.button');
@include app.generate-component(
$button,
'btn',
app.$config,
app.$theme
);
$button_group: app.get-theme(app.$theme, 'components.button-group');
@include app.generate-component(
$button_group,
'btn-group',
app.$config,
app.$theme
);
$pagination: app.get-theme(app.$theme, 'components.pagination');
@include app.generate-component(
$pagination,
'pagination',
app.$config,
app.$theme
);
Custom structure
<div class="flex align-items-center justify-content-between">
<div>
Showing 1 to 10 of 42 results
</div>
<div>
<ul class="pagination">
<li class="item">
<a href="#" class="link">2</a>
</li>
</ul>
</div>
</div>
@use '~/styles/app.scss' as app;
$pagination: app.get-theme(app.$theme, 'components.pagination');
@include app.generate-component(
$pagination,
'pagination',
app.$config,
app.$theme
);