Composant · Layout

Tile

Documenté

Tile est la tuile unitaire (là où TileGroup gère un groupe radio). Trois variantes : static (présentation), clickable (rend un <a> si href, sinon un <button>) et selectable (case à cocher unitaire, état selected bindable).

Variantes

Statique Conteneur de présentation, non interactif.

Cliquable (lien) Rend un <a> car href est fourni. Sélectionnable Cliquer pour sélectionner Sélectionnée par défaut État initial coché. Désactivée Non sélectionnable.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Tile
    variant="static"
    title="Statique"
    description="Conteneur de présentation, non interactif."
  />
  <Tile
    variant="clickable"
    href="#tile"
    title="Cliquable (lien)"
    description="Rend un <a> car href est fourni."
  />
  <Tile
    variant="clickable"
    title="Cliquable (bouton)"
    description="Rend un <button> sans href."
  />
  <Tile
    variant="selectable"
    selected={false}
    title="Sélectionnable"
    description="Cliquer pour sélectionner"
  />
  <Tile
    variant="selectable"
    selected
    title="Sélectionnée par défaut"
    description="État initial coché."
  />
  <Tile
    variant="selectable"
    disabled
    title="Désactivée"
    description="Non sélectionnable."
  />
</div>

L’état selected est bindable : ici figé pour la démonstration (la deuxième tuile sélectionnable est cochée par défaut).

API du composant

Prop	Type	Par défaut
`variant`	`"static" \| "clickable" \| "selectable"`	`"static"`
`href`	`string`	optionnel (clickable)
`selected`	`boolean` (bindable)	`false`
`disabled`	`boolean`	`false`
`title`	`string`	optionnel
`description`	`string`	optionnel
`onclick`	`(e: MouseEvent) => void`	optionnel
`onselect`	`(selected: boolean) => void`	optionnel
`children`	`Snippet`	optionnel (remplace title/description)

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground