Alert アラート

静的でセマンティクスを持つ警告バーです。四つのタイプ、アイコン、プレーンなスタイル、クローズ可能をサポートします。

アラート

<template>
  <div class="demo-col" style="max-width: 520px; gap: 12px">
    <LhAlert type="info" title="館蔵お知らせ" show-icon>『溪山行旅図』のデジタル高画質版が公開されました。ぜひご鑑賞ください。</LhAlert>
    <LhAlert type="success" title="取り込み完了" show-icon closable>120 点の宋画高画質取り込みがアーカイブされました。</LhAlert>
    <LhAlert type="warning" title="色校正の偏差" show-icon plain closable>3 箇所の色値が基準から逸脱しています。再確認をお勧めします。</LhAlert>
    <LhAlert type="danger" :title="titleText" closable :close-label="closeLabel">
      アイコンなし + クローズボタンのカスタムアクセシビリティ名。
    </LhAlert>
    <LhAlert type="info" plain>プレーンなテキストのみのスタイル（plain）。タイトルなし。</LhAlert>
  </div>
</template>

<script>
export default {
  data: () => ({
    titleText: '審校却下',
    closeLabel: 'この警告を閉じる',
  }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
type	セマンテックタイプ	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	タイトル（title スロットも使用可能）	string	—
closable	クローズ可能かどうか	boolean	false
showIcon	セマンティックアイコンを表示するかどうか	boolean	false
plain	薄いプレーンスタイルにするかどうか	boolean	false
closeLabel	クローズボタンのアクセシビリティ名（渡さないときは言語パッケージの alert.close を使用）	string	—
sx	sx によるレイアウト省略記法	—	—

Slots

スロット	説明
title	タイトルエリア（デフォルトは title prop）
default	本文の説明