trial translation for the element

.demo-box.demo-alert .el-alert { margin: 20px 0 0; } .demo-box.demo-alert .el-alert:first-child { margin: 0; } 

 Alert messages

 show some important messages in page

Usage

 not floating elements in page do not disappear automatically

::: demo Alert support four themes identified by type, and 'info' is default

<template>
  <el-alert
    title="messages for success"
    type="success">
  </el-alert>
  <el-alert
    title="messages for info"
    type="info">
  </el-alert>
  <el-alert
    title="messages for warnning"
    type="warning">
  </el-alert>
  <el-alert
    title="messages for error "
    type="error">
  </el-alert>
</template>

:::

Customize close button

customize the close button as text or symbol

In this Alert demo, you can set when to close, the close button text  and the callback when closing.closeable attribute document it is closable or not, and is a boolean value, true is default.  you can replace the close icon on the right side byclose-text attribute . Be Caution : close - text must be plan text. setting the callback when closing byclose event .

<template>
  <el-alert
    title="disclosable alert"
    type="success"
    :closable="false">
  </el-alert>
  <el-alert
    title="customize close-text"
    type="info"
    close-text="got it">
  </el-alert>
  <el-alert
    title="alert with callback"
    type="warning"
    @close="hello">
  </el-alert>
</template>

<script>
  export default {
    methods: {
      hello() {
        alert('Hello World!');
      }
    }
  }
</script>

:::

Alert with Icon

give a better legibility to document some status

::: this demo show the Alert's icon by setting show - icon , which could make it clear for your purpose sent to user.

<template>
  <el-alert
    title="messages for success"
    type="success"
    show-icon>
  </el-alert>
  <el-alert
    title="messages for info"
    type="info"
    show-icon>
  </el-alert>
  <el-alert
    title="messages for warnning"
    type="warning"
    show-icon>
  </el-alert>
  <el-alert
    title="messages for error"
    type="error"
    show-icon>
  </el-alert>
</template>

:::

Alert with accessible text

Including title and content,  gives more detail about alerts

::: You can give the alert more detail by setting description   attribute except title in this demo, which we called accessible text.  Single row only , and will wrap automatically.

<template>
  <el-alert
    title="accessible text"
    type="success"
    description="your description balabalabalalbala……">
  </el-alert>
</template>

:::

Alert with accessible text and icon

::: this demo document the usage for alert with accessible text and icon

<template>
  <el-alert
    title="messages for success"
    type="success"
    description="description text"
    show-icon>
  </el-alert>
  <el-alert
    title="messages for info"
    type="info"
    description="description text"
    show-icon>
  </el-alert>
  <el-alert
    title="messages for warnning"
    type="warning"
    description="description text"
    show-icon>
  </el-alert>
  <el-alert
    title="messages for error"
    type="error"
    description="description text"
    show-icon>
  </el-alert>
</template>

:::

Name	description	type	options	default
title	title, required	string	—	—
type	theme	string	success/warning/info/error	info
description	accessible text	string	—	—
closable	closable or not	boolean	—	true
close-text	customized text for close button	string	—	—
show-icon	display icon or not	boolean	—	false

Events

Name	description	parameter
close	trigger when closing the alert