| 1 | import type { JSX } from "solid-js"; |
| 2 | |
| 3 | /** |
| 4 | * Grows `children` in from nothing along `axis` (default "y") while `when` holds, and folds them away after. |
| 5 | * Hidden children stay mounted but inert. The wrapper still takes a flex or grid gap, so space it from inside. |
| 6 | */ |
| 7 | export function Reveal(props: { when: boolean; axis?: "x" | "y"; children: JSX.Element }) { |
| 8 | return ( |
| 9 | <div class={`reveal ${props.axis ?? "y"}`} classList={{ shown: props.when }} inert={!props.when} |
| 10 | aria-hidden={!props.when}> |
| 11 | <div>{props.children}</div> |
| 12 | </div> |
| 13 | ); |
| 14 | } |