Pagination

NOTE: Introduced feature in v0.5.1.

Pagination is typically used for allowing the user to navigate data or content that is separated into groupings of information, or "pages".

<script>
    import {Pagination} from "@kahi-ui/framework";

    let value = 5;
</script>

<Pagination
    pages={10}
    palette="accent"
    {value}
    on:select={(event) => {
        const page = event.detail.page;

        value = page;
    }}
/>

Imports

<script>
    import {Pagination} from "@kahi-ui/framework";
</script>

Paging

You can set how many pages there are for the associated content and which page is current via the pages / value properties respectively.

<script>
    import {Pagination} from "@kahi-ui/framework";
</script>

<Pagination pages={42} value={24} palette="accent" />

Anchors

WARNING: This feature was updated to require explicit is property in v0.6.0.

IMPORTANT: The ${page} token is non-standard string substitution provided by this feature, and must be set via string expressions, e.g. href={"/path/to/list/${page}"}.

You can have the paging buttons be anchors via href property. And adding ${page} in your link where you want the page number to be inserted.

<script>
    import {Pagination} from "@kahi-ui/framework";
</script>

<Pagination
    is="a"
    href={"/path/to/list?page=${page}"}
    pages={42}
    value={24}
    palette="accent"
/>

Steps

You can change how many incremental / decremental steps of paging buttons are displayed via the steps property.

<script>
    import {Pagination} from "@kahi-ui/framework";
</script>

<Pagination
    pages={10}
    steps={3}
    value={5}
    palette="accent"
/>

Slot

You can alter the icons / text used for the previous / next buttons via the previous / next slots respectively.

<script>
    import {Pagination} from "@kahi-ui/framework";
</script>

<Pagination pages={10} value={5} palette="accent">
    <svelte:fragment slot="previous">
        -
    </svelte:fragment>

    <svelte:fragment slot="next">
        +
    </svelte:fragment>
</Pagination>

Palette

You can change the color palette of the Pagination via the palette property.

<script>
    import {
        Pagination,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container spacing="medium">
    <div>
        <Text is="strong">DEFAULT</Text>
        <Pagination pages={10} value={5} />
    </div>

    <div>
        <Text is="strong">ACCENT</Text>

        <Pagination
            pages={10}
            value={5}
            palette="accent"
        />
    </div>

    <div>
        <Text is="strong">NEUTRAL</Text>

        <Pagination
            pages={10}
            value={5}
            palette="neutral"
        />
    </div>

    <div>
        <Text is="strong">DARK</Text>

        <Pagination
            pages={10}
            value={5}
            palette="dark"
        />
    </div>

    <div>
        <Text is="strong">LIGHT</Text>

        <Pagination
            pages={10}
            value={5}
            palette="light"
        />
    </div>

    <div>
        <Text is="strong">ALERT</Text>

        <Pagination
            pages={10}
            value={5}
            palette="alert"
        />
    </div>

    <div>
        <Text is="strong">AFFIRMATIVE</Text>

        <Pagination
            pages={10}
            value={5}
            palette="affirmative"
        />
    </div>

    <div>
        <Text is="strong">INFORMATIVE</Text>

        <Pagination
            pages={10}
            value={5}
            palette="informative"
        />
    </div>

    <div>
        <Text is="strong">NEGATIVE</Text>

        <Pagination
            pages={10}
            value={5}
            palette="negative"
        />
    </div>
</Stack.Container>

Sizing

You can alter the overall sizing look and feel via the sizing property.

<script>
    import {
        Pagination,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container spacing="medium">
    <div>
        <Text is="strong">DEFAULT</Text>
        <Pagination pages={10} value={5} />
    </div>

    <div>
        <Text is="strong">NANO</Text>

        <Pagination
            pages={10}
            value={5}
            sizing="nano"
        />
    </div>

    <div>
        <Text is="strong">TINY</Text>

        <Pagination
            pages={10}
            value={5}
            sizing="tiny"
        />
    </div>

    <div>
        <Text is="strong">SMALL</Text>

        <Pagination
            pages={10}
            value={5}
            sizing="small"
        />
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>

        <Pagination
            pages={10}
            value={5}
            sizing="medium"
        />
    </div>

    <div>
        <Text is="strong">LARGE</Text>

        <Pagination
            pages={10}
            value={5}
            sizing="large"
        />
    </div>

    <div>
        <Text is="strong">HUGE</Text>

        <Pagination
            pages={10}
            value={5}
            sizing="huge"
        />
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>

        <Pagination
            pages={10}
            value={5}
            sizing="massive"
        />
    </div>
</Stack.Container>