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 "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$button: functions.get-theme(app.$theme, 'components.button');

@include mixins.generate-component(
    $button,
    "btn",
    app.$config,
    app.$theme
);

$button_group: functions.get-theme(app.$theme, 'components.button-group');

@include mixins.generate-component(
    $button_group,
    "btn-group",
    app.$config,
    app.$theme
);

$pagination: functions.get-theme(app.$theme, 'components.pagination');

@include mixins.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 "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$button: functions.get-theme(app.$theme, 'components.button');

@include mixins.generate-component(
    $button,
    "btn",
    app.$config,
    app.$theme
);

$button_group: functions.get-theme(app.$theme, 'components.button-group');

@include mixins.generate-component(
    $button_group,
    "btn-group",
    app.$config,
    app.$theme
);

$pagination: functions.get-theme(app.$theme, 'components.pagination');

@include mixins.generate-component(
    $pagination,
    "pagination",
    app.$config,
    app.$theme
);

SVG icons

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$button: functions.get-theme(app.$theme, 'components.button');

@include mixins.generate-component(
    $button,
    "btn",
    app.$config,
    app.$theme
);

$button_group: functions.get-theme(app.$theme, 'components.button-group');

@include mixins.generate-component(
    $button_group,
    "btn-group",
    app.$config,
    app.$theme
);

$pagination: functions.get-theme(app.$theme, 'components.pagination');

@include mixins.generate-component(
    $pagination,
    "pagination",
    app.$config,
    app.$theme
);

Custom structure

Showing 1 to 10 of 42 results

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$pagination: functions.get-theme(app.$theme, 'components.pagination');

@include mixins.generate-component(
    $pagination,
    "pagination",
    app.$config,
    app.$theme
);