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

使用场景

• 当某个页面需要向用户显示警告的信息时
• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭

基本使用

通过以下属性配置组件：

• title 和 description：设置组件的标题和描述内容
• type：设置主题类型，可选值：primary、success、error、warning、info
• effect：设置主题浅或深色调，可选值：light（浅色，默认）、dark（深色）

<template>
  <view>
    <un-alert :title="title" type="warning" :description="description"></un-alert>
    <un-alert
      :title="title"
      type="warning"
      effect="dark"
      :description="description"
    ></un-alert>
  </view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    
    const title = ref("uView的目标是成为uni-app生态最优秀的UI框架");
    const description = ref("uView是uni-app生态专用的UI框架");
  </script>

图标

通过 showIcon 设置是否显示图标，作用是让信息类型更加醒目。

注意：当前版本图标为 uView 内置图标，根据 type 参数显示不同的图标，无法自定义。

<un-alert type="warning" :show-icon="true"></un-alert>

可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

• 通过 closable 参数配置是否可关闭

<template>
  <view>
    <un-alert
      :title="title"
      type="warning"
      :closable="closable"
      :description="description"
    ></un-alert>
  </view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    
    const title = ref("uView的目标是成为uni-app生态最优秀的UI框架");
    const description = ref("uView是uni-app生态专用的UI框架");
    const closable = ref(true);
  </script>

API

Props

参数	说明	类型	默认值
title	显示的文字	string	-
type	使用预设的颜色	string	warning
description	辅助性文字，颜色比 title 浅一点，字号也小一点	string	-
closable	关闭按钮（默认为叉号 icon 图标）	boolean	false
showIcon	是否显示左边的辅助图标	boolean	false
effect	警告提示的深浅色调，可选值：light（浅色）、dark（深色）	string	light
center	文字是否居中	boolean	false
fontSize	字体大小	string | number	14

Events

事件名	说明	类型
click	点击组件时触发	Function
close	点击关闭按钮时触发	Function

Slots

名称	说明
icon	自定义图标

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-alert-padding	8px 10px	组件内边距
$un-alert-radius	$radius-base	组件圆角
$un-alert-title-font-size	$text-base	标题字体大小
$un-alert-title-color	$text-color-inverted	标题文字颜色
$un-alert-title-font-weight	bold	标题字体粗细
$un-alert-title-margin-bottom	2px	标题底部间距
$un-alert-desc-font-size	$text-base	描述文字字体大小
$un-alert-desc-color	$text-color-inverted	描述文字颜色
$un-alert-close-top	11px	关闭按钮顶部距离
$un-alert-close-right	10px	关闭按钮右侧距离