Empty

Afficher un contenu de remplacement lorsqu’il n’y a pas de données à montrer.

Importation

import { Empty } from 'asterui'

Exemples

Empty de base

État vide simple avec image par défaut.

</>

No data

import { Empty } from 'asterui'

function App() {
  return (
      <Empty />
    )
}

export default App

Description personnalisée

État vide avec texte de description personnalisé.

</>

No data available

import { Empty } from 'asterui'

function App() {
  return (
      <Empty description="No data available" />
    )
}

export default App

Image personnalisée

État vide avec image ou icône personnalisée.

</>

No files found

import { Empty } from 'asterui'

function App() {
  return (
      <Empty
        image={
          <svg className="w-16 h-16 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
        }
        description="No files found"
      />
    )
}

export default App

Avec bouton d'action

État vide avec bouton d'action.

</>

No items in your cart

Start Shopping

import { Empty, Button } from 'asterui'

function App() {
  return (
      <Empty description="No items in your cart">
        <Button color="primary">Start Shopping</Button>
      </Empty>
    )
}

export default App

Image simple

État vide minimal avec image plus petite.

</>

No results

import { Empty } from 'asterui'

function App() {
  return (
      <Empty
        image={Empty.PRESENTED_IMAGE_SIMPLE}
        description="No results"
      />
    )
}

export default App

API

Empty

Propriété	Description	Type	Défaut
description	Texte ou nœud à afficher comme description	React.ReactNode	'No Data'
image	Image ou icône personnalisée ; définir à null pour masquer	React.ReactNode	Empty.PRESENTED_IMAGE_DEFAULT
imageStyle	Style appliqué au conteneur d’image	React.CSSProperties	-
children	Contenu supplémentaire comme boutons ou actions	React.ReactNode	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour le composant	string	'empty'