Alert 警告提示

警告提示，展现需要关注的信息。

基础用法

ImAlert 组件提供四种主题，由color属性指定，默认值为primary。

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

vue

<template>
  <ImAlert title="Alert" v-for="item in colors" :color="item"
    >This is a Alert Component</ImAlert
  >
</template>

<script setup>
const colors = ['success', 'warning', 'primary', 'error'];
</script>

可关闭

ImAlert 组件提供了closable属性来控制是否可关闭

Alert

This is a Alert Component

vue

<template>
  <ImAlert title="Alert" closable>This is a Alert Component</ImAlert>
</template>

变种 Alert

ImAlert 组件提供了variant="outlined"属性。

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

ImAlert 组件提供了variant="tonal"属性。

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

不需要标题

This is a Alert Component

vue

<template>
  <ImAlert v-for="item in colors" :color="item" variant="outlined"
    >This is a Alert Component</ImAlert
  >
</template>

自定义 icon

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

Alert

This is a Alert Component

vue

<template>
  <ImAlert
    title="Alert"
    v-for="item in colors"
    :color="item"
    variant="outlined">
    <template #icon><ImIcon name="bell" size="24" /></template> This is a Alert
    Component
  </ImAlert>
  <ImAlert v-for="item in colors" :color="item" variant="outlined">
    <template #icon><ImIcon name="bell" size="16" /></template> This is a Alert
    Component
  </ImAlert>
</template>

Alert 警告提示 ​

基础用法 ​

可关闭 ​

变种 Alert ​

不需要标题 ​

自定义 icon ​

Alert 警告提示

基础用法

可关闭

变种 Alert

不需要标题

自定义 icon