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"]}

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

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

    hidden={["desktop", "widescreen"]}
    I am visible on Mobile / Tablet Viewports.



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