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>