Hidden

View Source

NOTE: Introduced feature in v0.2.2.

All Components have access to the data-hidden global HTML attribute via the hidden property. Unlike the standard hidden HTML attribute, data-hidden supports Responsitivity.

USAGE: REPL does not support viewport values, resize your Browser to observe this feature.

NOTE: By passing an array, you can set responsive values. e.g. hidden={["mobile", "tablet"]}

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

<Box palette="accent" hidden={["mobile", "tablet"]}>
    I am visible on Desktop / Widescreen Viewports.
</Box>

<Box
    palette="affirmative"
    hidden={["desktop", "widescreen"]}
>
    I am visible on Mobile / Tablet Viewports.
</Box>

Properties

*

Name Description Types
hidden Alters the Component to not render anything or take up physical space in a page's layout.
boolean {VIEWPORT}