Alert アラート

ページ内で重要な通知メッセージを表示します。

基本的な使い方

情報

これは情報メッセージです。

成功

これは成功メッセージです。

警告

これは警告メッセージです（プレーンスタイル）。

これは危険メッセージです（タイトルなし）。

外部ステートとの連動

閉じる動作は内部で非制御です：閉じるボタンを押すとアンマウントされます。再び開けるようにするには、外部の条件付きレンダリングでラップしてください。

import { LhAlert } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhAlert type="success" title="成功通知" showIcon closable>
      これは成功通知です。
    </LhAlert>
  )
}

Alert Props

プロパティ	説明	型	使用可能な値	デフォルト値
type	タイプ	`'info' \| 'success' \| 'warning' \| 'danger'`	—	`'info'`
title	タイトル（未指定時はタイトル行を描画しない）	`ReactNode`	—	—
closable	閉じられるかどうか	`boolean`	—	`false`
showIcon	タイプアイコンを表示するかどうか	`boolean`	—	`false`
plain	アウトラインスタイル（淡いボーダー）にするかどうか	`boolean`	—	`false`
closeLabel	閉じるボタンのアクセシビリティ名（未指定時は言語パック `alert.close` を使用）	`string`	—	`'关闭警告'`
sx	クイックレイアウトプロパティ	`SxProps`	—	—

Alert イベント

イベント	説明	コールバックシグネチャ	Vue 対応
onClose	閉じるボタンクリック時に発火	`(event: MouseEvent) => void`	`@close`

閉じる動作は内部の非制御

閉じるボタンをクリックすると Alert は直接アンマウントされ（トランジションなし）、onClose を発火します。「閉じた後また開きたい」場合は、外部状態で条件レンダリングをラップしてください。コンポーネントの内部状態に依存しないでください。

アクセシビリティ live region

type が warning / danger の場合は role="alert"（即時読み上げ）、info / success の場合は role="status"（順番待ち読み上げ）を出力し、ユーザーの現在の操作を遮らないようにします。

スタイル

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

基本的な使い方​

Alert Props​

Alert イベント​

スタイル​

基本的な使い方

Alert Props

Alert イベント

スタイル