## Alert 重要なalertメッセージを表示します。 ### 基本的な使い方 alertコンポーネントは、自動的には消えないページ内の非オーバーレイ要素です。 :::demo alertは `type` で定義された4種類のテーマを提供しており、デフォルト値は `info` です。 ```html <template> <el-alert title="success alert" type="success"> </el-alert> <el-alert title="info alert" type="info"> </el-alert> <el-alert title="warning alert" type="warning"> </el-alert> <el-alert title="error alert" type="error"> </el-alert> </template> ``` ::: ### テーマ alertは、`ライト`と`ダーク`の2つの異なるテーマを提供しています。 :::demo テーマを変更するために `effect` を設定します。 ```html <template> <el-alert title="success alert" type="success" effect="dark"> </el-alert> <el-alert title="info alert" type="info" effect="dark"> </el-alert> <el-alert title="warning alert" type="warning" effect="dark"> </el-alert> <el-alert title="error alert" type="error" effect="dark"> </el-alert> </template> ``` ::: ### カスタマイズ可能なクローズボタン 閉じるボタンをテキストや他の記号にカスタマイズします。 :::demo alertでは、クローズ可能かどうかを設定することができます。閉じるボタンのテキストや閉じるコールバックもカスタマイズ可能です。`closable`属性はコンポーネントを閉じられるかどうかを決める。戻り値は `boolean` で、デフォルトは `true` です。`close-text` 属性を設定することで、デフォルトの十字マークを閉じるボタンに置き換えることができます。`close-text` は文字列でなければならないので注意が必要である。コンポーネントが閉じられたときに `close` イベントが発生する。 ```html <template> <el-alert title="unclosable alert" type="success" :closable="false"> </el-alert> <el-alert title="customized close-text" type="info" close-text="Gotcha"> </el-alert> <el-alert title="alert with callback" type="warning" @close="hello"> </el-alert> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ setup() { const hello = () => { alert('Hello World!'); } return { hello } } }) </script> ``` ::: ### アイコン付き アイコンを表示することで可読性が向上します。 :::demo `show-icon` 属性を設定すると、現在のalertタイプに対応するアイコンを表示します。 ```html <template> <el-alert title="success alert" type="success" show-icon> </el-alert> <el-alert title="info alert" type="info" show-icon> </el-alert> <el-alert title="warning alert" type="warning" show-icon> </el-alert> <el-alert title="error alert" type="error" show-icon> </el-alert> </template> ``` ::: ## 中央揃えのテキスト テキストを中央に配置するには `center` 属性を使用します。 :::demo ```html <template> <el-alert title="success alert" type="success" center show-icon> </el-alert> <el-alert title="info alert" type="info" center show-icon> </el-alert> <el-alert title="warning alert" type="warning" center show-icon> </el-alert> <el-alert title="error alert" type="error" center show-icon> </el-alert> </template> ``` ::: ### 説明文付き 説明には、より詳細な情報が記載されたメッセージが含まれています。 :::demo 必須の `title` 属性の他に、`description` 属性を追加することで、alertをより詳細に説明することができます。説明はテキスト文字列のみを格納することができ、自動的にワードラップされます。 ```html <template> <el-alert title="with description" type="success" description="This is a description."> </el-alert> </template> ``` ::: ### アイコンと説明文付き :::demo 最後に、アイコンと説明文の例です。 ```html <template> <el-alert title="success alert" type="success" description="more text description" show-icon> </el-alert> <el-alert title="info alert" type="info" description="more text description" show-icon> </el-alert> <el-alert title="warning alert" type="warning" description="more text description" show-icon> </el-alert> <el-alert title="error alert" type="error" description="more text description" show-icon> </el-alert> </template> ``` ::: ### 属性 | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | title | タイトル | string | — | — | | type | コンポーネントタイプ | string | success/warning/info/error | info | | description | 説明的なテキスト。デフォルトのスロット | string | — | — | | closable | クローズ可能な場合かどうか | boolean | — | true | | center | テキストを中央に配置するかどうか | boolean | — | false | | close-text | カスタマイズしたクローズボタンのテキスト | string | — | — | | show-icon | タイプアイコンが表示されているま | boolean | — | false | | effect | テーマを選ぶ | string | light/dark | light | ### スロット | Name | Description | |------|--------| | — | description | | title | alertタイトルの内容 | ### イベント | Event Name | Description | Parameters | |---------- |-------- |---------- | | close | alertが閉じたときにトリガーされます | — |