アラート

アイコン、タイトル、ソフトスタイル、画像、閉じるボタンに対応したインラインのアラート。

アラート

アラート

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