提示

行内提示，支持图标、标题、柔和（soft）样式、图片和关闭按钮。

Alert

Alert

Vue

<div class="thl-stack">
  <ThlAlert v-for="c in ['success','info','warning','danger']" :key="c" :type="c" dismissible :icon="true">{{ c }} — Lorem ipsum dolor sit amet.</ThlAlert>
  <ThlAlert type="success" soft :icon="true" title="Soft">Soft alert with title.</ThlAlert>
  <ThlAlert type="info" :image="avatar(9)" title="Image alert" dismissible>Alert with an image.</ThlAlert>
</div>

React

<Alert type="success" dismissible icon>Saved!</Alert>
<Alert type="danger" soft icon title="Error">Something went wrong.</Alert>
<Alert type="info" image={url} title="Image alert" onClose={hide}>…</Alert>

Angular

<thl-alert type="success" dismissible [icon]="true">Saved!</thl-alert>
<thl-alert type="danger" soft [icon]="true" title="Error">Something went wrong.</thl-alert>

API

Alert

<ThlAlert> · import { ThlAlert } from '@thl-ui/vue'

Prop	类型	默认值
type	string	"info"
title	string	—
icon	any	—
dismissible	boolean	—
soft	boolean	—
image	string	—

事件: close

插槽: default