NOTE: Introduced feature in
v0.5.1.
USAGE: REPL does not support viewport values, resize your Browser to observe this feature.
ViewportRender disables rendering of child content while the provided Viewport(s) are not active.
<script>
import {
Box,
ViewportRender,
} from "@kahi-ui/framework";
</script>
<ViewportRender mobile tablet>
<Box palette="affirmative" padding="small">
I am only visible on MOBILE+TABLET Viewports!
</Box>
</ViewportRender>
<ViewportRender desktop widescreen>
<Box palette="negative" padding="small">
I am only visible on DESKTOP+WIDESCREEN
Viewports!
</Box>
</ViewportRender>Imports
<script>
import {ViewportRender} from "@kahi-ui/framework";
</script>Compatibility
The Component only runs on clientside Browsers with Javascript enabled. So you need to plan a SSR-compatible fallback if using in a SSR scenario. If the child content getting mounted is not of concern, then it's recommended to use SSR-compatible hidden global property.
Fallthrough
USAGE: REPL renders in your Browser, so this feature will always render conditionally anyway.
USAGE: REPL does not support viewport values, resize your Browser to observe this feature.
By default, ViewportRender will never render when running in SSR environments. You can change it to always render in those environments via the fallthrough property.
<script>
import {
Box,
ViewportRender,
} from "@kahi-ui/framework";
</script>
<ViewportRender mobile fallthrough>
<Box palette="affirmative" padding="small">
I am only visible on MOBILE Viewports!
</Box>
</ViewportRender>