カードとパネル

Card は基本的なコンテンツボックスです。Panel は色付きヘッダーに加え、折りたたみ、閉じる、全画面表示、ローディング中の block UI オーバーレイを備えています。Well はくぼんだ見た目のボックスです。

Card

Card

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlCard title="Card title" subtitle="Subtitle">Card content.<template #actions><ThlButton size="sm" variant="primary">Action</ThlButton></template></ThlCard></div>
  <div class="thl-col-12 thl-col-md-6"><ThlCard bordered shadow title="Bordered + shadow">More content.</ThlCard></div>
</div>

React

<Card title="Card title" subtitle="Subtitle" actions={<Button size="sm" variant="primary">Action</Button>}>
  Card content.
</Card>
<Card bordered shadow title="Bordered + shadow">More content.</Card>

Angular

<thl-card title="Card title" subtitle="Subtitle">
  <button thlCardActions thl-button size="sm" variant="primary">Action</button>
  Card content.
</thl-card>
<thl-card bordered shadow title="Bordered + shadow">More content.</thl-card>

Panel

Panel

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlPanel title="Info panel" color="info" collapsible dismissible expandable>Collapse, fullscreen or dismiss me.<template #footer>Panel footer</template></ThlPanel></div>
  <div class="thl-col-12 thl-col-md-6"><ThlPanel title="Block UI" color="danger" :loading="busy" loading-text="Loading..."><p>Blocks for 1.5s.</p><ThlButton variant="info" @click="block">Block</ThlButton></ThlPanel></div>
</div>

React

<Panel title="Info panel" color="info" collapsible dismissible expandable footer="Panel footer">
  Collapse, fullscreen or dismiss me.
</Panel>
<Panel title="Block UI" color="danger" loading={busy} loadingText={t('common.loading')}>…</Panel>

Angular

<thl-panel title="Info panel" color="info" collapsible dismissible expandable (dismissed)="onDismiss()">
  Collapse, fullscreen or dismiss me.
</thl-panel>
<thl-panel title="Block UI" color="danger" [loading]="busy()">…</thl-panel>

Well

Well

Vue

<div class="thl-row"><div class="thl-col-6"><ThlWell>Default well</ThlWell></div><div class="thl-col-6"><ThlWell size="lg">Large well</ThlWell></div></div>

React

<Well>Default well</Well>
<Well size="lg">Large well</Well>

Angular

<thl-well>Default well</thl-well>
<thl-well size="lg">Large well</thl-well>

API

Card

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

Prop	型	デフォルト
title	string	—
subtitle	string	—
bordered	boolean	—
shadow	boolean	—
flush	boolean	—

スロット: titleactionsmediadefaultfooter

Panel

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

Prop	型	デフォルト
title	string	—
color	string	—
collapsible	boolean	—
collapsed	boolean	—
dismissible	boolean	—
loading	boolean	—
expandable	boolean	—
loadingText	string	—

イベント: update:collapseddismiss

スロット: titleactionsdefaultfooter

Well

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

Prop	型	デフォルト
size	string	—

スロット: default