Divider

Séparateur visuel pour les sections de contenu avec étiquettes de texte optionnelles.

Importation

import { Divider } from 'asterui'

Exemples

Divider de base

Séparateur horizontal simple.

</>

Content above the divider

Content below the divider

import { Divider } from 'asterui'

function App() {
  return (
      <div>
        <p>Content above the divider</p>
        <Divider />
        <p>Content below the divider</p>
      </div>
    )
}

export default App

Avec texte

Séparateur avec étiquette de texte.

</>

Section 1 content

OR

Section 2 content

import { Divider } from 'asterui'

function App() {
  return (
      <div>
        <p>Section 1 content</p>
        <Divider>OR</Divider>
        <p>Section 2 content</p>
      </div>
    )
}

export default App

Position du texte

Positionner le texte au début, au centre ou à la fin.

</>

Start

Center

End

import { Divider, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Divider position="start">Start</Divider>
        <Divider position="center">Center</Divider>
        <Divider position="end">End</Divider>
      </Space>
    )
}

export default App

Divider vertical

Séparateur vertical pour le contenu en ligne.

</>

Home

Products

About

import { Divider } from 'asterui'

function App() {
  return (
      <div className="flex items-center h-8">
        <span>Home</span>
        <Divider orientation="vertical" />
        <span>Products</span>
        <Divider orientation="vertical" />
        <span>About</span>
      </div>
    )
}

export default App

Couleurs

Séparateurs avec différents types de couleurs.

</>

Primary

Secondary

Accent

import { Divider, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Divider type="primary">Primary</Divider>
        <Divider type="secondary">Secondary</Divider>
        <Divider type="accent">Accent</Divider>
      </Space>
    )
}

export default App

API

Divider

Propriété	Description	Type	Défaut
children	Texte ou contenu dans le séparateur	React.ReactNode	-
orientation	Orientation du séparateur	'horizontal' | 'vertical'	'horizontal'
position	Position du texte	'start' | 'center' | 'end'	'center'
type	Type de couleur	'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'	-
className	Classes CSS supplémentaires	string	-