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>