Clickable

NOTE: Introduced feature in v0.4.3.

Clickable stretches a nested <Clickable.Anchor> / <Clickable.Label> child across its parent element, while surfacing other interactive elements above the overlay.

Imports

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

    const {Container, Anchor, Label} = Clickable;
</script>

Anchor

Use a <Clickable.Anchor> to stretch a clickable <a> across the parent container.

<script>
    import {
        Badge,
        Button,
        Card,
        Clickable,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Clickable.Container>
    <Card.Container style="max-width:25rem;">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            <Clickable.Anchor href="#">
                Ocean Rockies
            </Clickable.Anchor>

            <Spacer />
            <Badge palette="affirmative">
                AVAILABLE
            </Badge>
        </Card.Header>

        <Card.Section>
            <Text>
                Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Proin et consectetur
                orci. Curabitur a egestas turpis, vitae
                convallis sapien. Sed pellentesque
                rutrum tellus, in iaculis dolor
                tincidunt non. Orci varius natoque
                penatibus et magnis dis parturient
                montes, nascetur ridiculus mus.
            </Text>
        </Card.Section>

        <Card.Footer>
            <Button palette="accent">
                Book Flight
            </Button>
        </Card.Footer>
    </Card.Container>
</Clickable.Container>

Label

Use a <Clickable.Label> to stretch a clickable <label> across the parent container.

<script>
    import {
        Clickable,
        Switch,
        Text,
        Tile,
    } from "@kahi-ui/framework";
</script>

<Clickable.Container>
    <Tile.Container width="content-max">
        <Tile.Section>
            <Tile.Header>Remember Login?</Tile.Header>

            <Text>
                <Text is="small">
                    Your session will be saved to your
                    Browser.
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Clickable.Label for="clickable-label">
                <Switch
                    palette="affirmative"
                    sizing="medium"
                />
            </Clickable.Label>
        </Tile.Footer>
    </Tile.Container>
</Clickable.Container>