Card & Panel

Card là hộp nội dung cơ bản. Panel có header màu kèm thu gọn, đóng, toàn màn hình và lớp phủ block UI khi đang tải. Well là hộp lõm nền nhạt.

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	Kiểu	Mặc định
title	string	—
subtitle	string	—
bordered	boolean	—
shadow	boolean	—
flush	boolean	—

Slot: titleactionsmediadefaultfooter

Panel

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

Prop	Kiểu	Mặc định
title	string	—
color	string	—
collapsible	boolean	—
collapsed	boolean	—
dismissible	boolean	—
loading	boolean	—
expandable	boolean	—
loadingText	string	—

Sự kiện: update:collapseddismiss

Slot: titleactionsdefaultfooter

Well

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

Prop	Kiểu	Mặc định
size	string	—

Slot: default