バッジとラベル

Badge は件数やステータスを表す小さなピル、Label はインラインのタグです。

Badge

Badge

Vue

<div class="thl-demo-row">
  <ThlBadge v-for="c in ['default','primary','success','info','warning','danger','inverse','purple']" :key="c" :color="c">{{ c }}</ThlBadge>
  <ThlBadge color="danger" size="xs">9</ThlBadge><ThlBadge color="success" dot />
</div>

React

<Badge color="primary">primary</Badge>
<Badge color="danger" size="xs">9</Badge>
<Badge color="success" dot />

Angular

<thl-badge color="primary">primary</thl-badge>
<thl-badge color="danger" size="xs">9</thl-badge>
<thl-badge color="success" dot />

Label

Label

Vue

<div>
  <div class="thl-demo-row"><ThlLabel v-for="c in ['primary','success','info','warning','danger','inverse']" :key="c" :color="c">{{ c }}</ThlLabel></div>
  <div class="thl-demo-row"><ThlLabel color="success" rounded>rounded</ThlLabel><ThlLabel color="danger" outline>outline</ThlLabel><ThlLabel color="info" rounded closable>closable</ThlLabel></div>
</div>

React

<Label color="success" rounded>rounded</Label>
<Label color="danger" outline>outline</Label>
<Label color="info" rounded closable onClose={() => remove()}>closable</Label>

Angular

<thl-label color="success" rounded>rounded</thl-label>
<thl-label color="danger" outline>outline</thl-label>
<thl-label color="info" rounded closable (closed)="remove()">closable</thl-label>

API

Badge

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

Prop	型	デフォルト
color	string	—
size	string	—
dot	boolean	—
pill	boolean	true

スロット: default

Label

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

Prop	型	デフォルト
color	string	—
rounded	boolean	—
outline	boolean	—
closable	boolean	—

イベント: close

スロット: default