MonthStepper

NOTE: Introduced feature in v0.4.10.

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

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

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

    const value = "2021-06-01";
</script>

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

Imports

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

Disabled

You can disable all interactivity via the disabled property.

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

    const value = "2021-06-01";
</script>

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

Readonly

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

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

    const value = "2021-06-01";
</script>

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

Maximum + Minimum

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

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

    const value = "2021-06-01";

    const max = "2021-07-01";
    const min = "2021-05-01";
</script>

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

Steps

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

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

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

    const value = "2021-06-01";
</script>

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

Custom Format

You can customize how the month and year components of the current timestamp is displayed via the month and year properties respectively.

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

    const value = "2021-06-01";
</script>

<MonthStepper
    palette="accent"
    month="numeric"
    year="2-digit"
    {value}
/>

Sizing

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

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

    const value = "2021-06-01";
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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