Flex

Composant de disposition flexible pour créer des mises en page réactives.

Importation

import { Flex } from 'asterui'

Exemples

De base

Disposition flex horizontale par défaut.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex gap="sm">
        <Button color="primary">Button 1</Button>
        <Button color="secondary">Button 2</Button>
        <Button color="accent">Button 3</Button>
      </Flex>
    )
}

export default App

Direction

Contrôler la direction flex avec la prop direction.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="sm">
        <Button color="primary">First</Button>
        <Button color="secondary">Second</Button>
        <Button color="accent">Third</Button>
      </Flex>
    )
}

export default App

Justification du contenu

Distribuer les éléments le long de l'axe principal.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Flex justify="start" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">Start</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="center" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">Center</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="end" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">End</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="between" className="bg-base-200 p-2 rounded">
          <Button size="sm">Between</Button>
          <Button size="sm">Items</Button>
        </Flex>
      </Flex>
    )
}

export default App

Alignement des éléments

Aligner les éléments le long de l'axe transversal.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex gap="md">
        <Flex align="start" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Top</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
        <Flex align="center" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Center</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
        <Flex align="end" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Bottom</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
      </Flex>
    )
}

export default App

Tailles d'espacement

Contrôler l'espacement entre les éléments.

Gap

import { Flex, Badge } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="lg">
        <Flex gap="xs">
          <Badge>XS</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="sm">
          <Badge>SM</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="md">
          <Badge>MD</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="lg">
          <Badge>LG</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="xl">
          <Badge>XL</Badge>
          <Badge>Gap</Badge>
        </Flex>
      </Flex>
    )
}

export default App

Retour à la ligne

Permettre aux éléments de passer à la ligne suivante.

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

import { Flex, Badge } from 'asterui'

function App() {
  return (
      <Flex wrap gap="sm">
        <Badge>Tag 1</Badge>
        <Badge>Tag 2</Badge>
        <Badge>Tag 3</Badge>
        <Badge>Tag 4</Badge>
        <Badge>Tag 5</Badge>
        <Badge>Tag 6</Badge>
        <Badge>Tag 7</Badge>
        <Badge>Tag 8</Badge>
      </Flex>
    )
}

export default App

Centrage du contenu

Centrer le contenu horizontalement et verticalement.

Centered Card

This card is centered in its container.

import { Flex, Card, Typography } from 'asterui'

function App() {
  const { Title, Paragraph } = Typography
  
  return (
      <Flex
        justify="center"
        align="center"
        className="bg-base-200 rounded-lg"
        style={{ height: '200px' }}
      >
        <Card className="w-64">
          <Title level={4}>Centered Card</Title>
          <Paragraph>This card is centered in its container.</Paragraph>
        </Card>
      </Flex>
    )
}

export default App

Flex imbriqué

Combiner des conteneurs flex pour des mises en page complexes.

Main Content

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Flex justify="between" className="bg-base-200 p-4 rounded">
          <Button variant="ghost">Logo</Button>
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button variant="ghost">About</Button>
            <Button color="primary">Contact</Button>
          </Flex>
        </Flex>
        <Flex gap="md" className="p-4">
          <Flex direction="column" gap="sm" flex="1" className="bg-base-200 p-4 rounded">
            <Button variant="ghost" shape="block">Sidebar Item 1</Button>
            <Button variant="ghost" shape="block">Sidebar Item 2</Button>
          </Flex>
          <Flex flex="1" className="bg-base-200 p-4 rounded min-h-32" justify="center" align="center">
            Main Content
          </Flex>
        </Flex>
      </Flex>
    )
}

export default App

API

`Flex`

Propriété	Description	Type	Défaut
`direction`	Direction flex	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	`'row'`
`justify`	Justifier le contenu le long de l’axe principal	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	Aligner les éléments le long de l’axe transversal	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	-
`wrap`	S’il faut envelopper les éléments	`boolean \| 'wrap' \| 'nowrap' \| 'wrap-reverse'`	`false`
`gap`	Espacement entre les éléments	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	-
`flex`	Raccourci flex pour le conteneur	`'1' \| 'auto' \| 'initial' \| 'none'`	-
`inline`	Utiliser inline-flex au lieu de flex	`boolean`	`false`
`minHeight`	Hauteur minimale	`'screen' \| 'full' \| 'fit' \| 'min' \| 'max'`	-
`minWidth`	Largeur minimale	`'full' \| 'fit' \| 'min' \| 'max'`	-
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests	`string`	-

Notes d’utilisation

Flex est un utilitaire de mise en page sans exigence d’accessibilité spécifique
Maintient la structure sémantique des éléments enfants
L’espacement correspond à l’espacement Tailwind : xs=1, sm=2, md=4, lg=6, xl=8