Composant · Structure

Hidden

Stable

Masque son contenu au-dessus ou en-dessous d'un breakpoint (sm 640 / md 768 / lg 1024 / xl 1280) via CSS uniquement. Redimensionnez la fenêtre pour observer.

Exemples

below="lg"

Visible ≥ lg (1024 px)

Voir le code (Svelte)

<Hidden below="lg">
  <Badge tone="info">Visible ≥ lg (1024 px)</Badge>
</Hidden>

above="sm"

Visible < sm (640 px)

Voir le code (Svelte)

<Hidden above="sm">
  <Badge tone="warning">Visible < sm (640 px)</Badge>
</Hidden>

API

Prop	Type	Default
`below`	`"sm" \| "md" \| "lg" \| "xl"`	–
`above`	`"sm" \| "md" \| "lg" \| "xl"`	–
`as`	`string`	`"div"`

Le wrapper rend display: contents : aucun nœud de mise en page superflu quand il est visible.

Accessibilité

Le masquage est purement visuel (display: none) : le contenu masqué est aussi retiré de l'arbre d'accessibilité.
Ne pas l'utiliser pour cacher du contenu critique à un seul jeu d'utilisateurs sans alternative.