## 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 が閉じたときにトリガーされます | —          |