Empty 空状態

空状態の時のプレースホルダー表示です。

基本的な使い方

基本的な使い方

データがありません

カスタム説明文

import { LhEmpty, LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhEmpty
      description="カスタム説明テキスト"
      actions={<LhButton type="primary">再読み込み</LhButton>}
    />
  )
}

Empty Props

プロパティ	説明	型	使用可能な値	デフォルト値
description	説明テキスト（未指定時は言語パック empty.description を使用）	ReactNode	—	'暂无数据'
image	カスタム画像 URL	string	—	—
actions	アクション領域	ReactNode	—	—
sx	クイックレイアウトプロパティ	SxProps	—	—

カスタム画像

image prop または children ノードを渡すとカスタム画像コンテナになります（--custom 修飾子が max-width: 160px / max-height: 120px を拘束）。どちらも未指定の場合は内蔵の水墨インラインイラストを描画します（テーマ変数で着色し、明暗モードに自動適応）。

アクセシビリティ

ルート要素は role="status"（穏やかな読み上げ）です。デフォルトのイラストは aria-hidden とし、スクリーンリーダーを妨げません。

スタイル

import '@lh-ui/react/style/empty'