Composant · Structure

Inline

Stable

Flux horizontal à gap homogène qui passe à la ligne par défaut. Parfait pour des listes de chips, de tags ou d'actions.

Exemples

Retour à la ligne (wrap)

tag-1 tag-2 tag-3 tag-4 tag-5 tag-6 tag-7 tag-8 tag-9 tag-10 tag-11 tag-12

Voir le code (Svelte)

<Inline gap={2}>
  <Tag>tag-1</Tag>
  <Tag>tag-2</Tag>
  <Tag>tag-3</Tag>
  <Tag>tag-4</Tag>
  <Tag>tag-5</Tag>
  <Tag>tag-6</Tag>
  <Tag>tag-7</Tag>
  <Tag>tag-8</Tag>
  <Tag>tag-9</Tag>
  <Tag>tag-10</Tag>
  <Tag>tag-11</Tag>
  <Tag>tag-12</Tag>
</Inline>

wrap={false}

tag-1 tag-2 tag-3 tag-4

Voir le code (Svelte)

<Inline gap={2} wrap={false}>
  <Tag>tag-1</Tag>
  <Tag>tag-2</Tag>
  <Tag>tag-3</Tag>
  <Tag>tag-4</Tag>
</Inline>

API

Prop	Type	Default
`gap`	`number` (pas 0–12)	–
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	–
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	–
`wrap`	`boolean`	`true`
`as`	`string`	`"div"`

Inline force direction="row" et wrap=true par défaut.

Tokens utilisés

--st-spacing-1 … --st-spacing-12