YearStepper

NOTE: Introduced feature in v0.4.10.

WARNING: This feature received a breaking change in v0.6.0.

YearStepper is a Widget that lets users increment / decrement the currently provided year by a set number.

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

    const value = "2024-01-01";
</script>

<YearStepper palette="accent" {value} />

Imports

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

Disabled

You can disable all interactivity via the disabled property.

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

    const value = "2024-01-01";
</script>

<YearStepper palette="accent" {value} disabled />

Readonly

You can disable interactivity without changing the visuals via the readonly property.

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

    const value = "2024-01-01";
</script>

<YearStepper palette="accent" {value} readonly />

Maximum + Minimum

You can set maximum and minimum range of steppable years via the max / min properties.

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

    const value = "2024-01-01";

    const max = "2025-01-01";
    const min = "2023-01-01";
</script>

<YearStepper palette="accent" {max} {min} {value} />

Steps

WARNING: This feature was renamed from step to steps in v0.6.0.

You can control how many years the buttons increment / decrement via the steps property.

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

    const value = "2024-01-01";
</script>

<YearStepper palette="accent" steps={3} {value} />

Custom Format

You can customize how the year component of the current timestamp is displayed via the year property.

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

    const value = "2024-01-01";
</script>

<YearStepper palette="accent" year="2-digit" {value} />

Sizing

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

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

    const value = "2024-01-01";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    alignment_y="top"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>

        <YearStepper palette="accent" {value} />
    </div>

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

        <YearStepper
            palette="accent"
            sizing="nano"
            {value}
        />
    </div>

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

        <YearStepper
            palette="accent"
            sizing="tiny"
            {value}
        />
    </div>

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

        <YearStepper
            palette="accent"
            sizing="small"
            {value}
        />
    </div>

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

        <YearStepper
            palette="accent"
            sizing="medium"
            {value}
        />
    </div>

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

        <YearStepper
            palette="accent"
            sizing="large"
            {value}
        />
    </div>

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

        <YearStepper
            palette="accent"
            sizing="huge"
            {value}
        />
    </div>

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

        <YearStepper
            palette="accent"
            sizing="massive"
            {value}
        />
    </div>
</Stack.Container>