リストとギャラリー

アバター / アイコン、説明、メタ情報を備えたリスト（フィード、コメント、連絡先）と、ライトボックス付きの画像ギャラリー。

リスト

リスト

Vue

<div class="thl-row"><div class="thl-col-12 thl-col-md-6"><ThlCard title="Contacts" flush><ThlList :items="items" hover /></ThlCard></div><div class="thl-col-12 thl-col-md-6"><ThlCard title="Icons" flush><ThlList :items="[{ icon: 'phone', title: '+84 912 345 678', description: 'Phone' }, { icon: 'mail', iconColor: 'success', title: '[email protected]', description: 'Email' }, { icon: 'map-pin', iconColor: 'danger', title: 'Hà Nội', description: 'Address' }]" /></ThlCard></div></div>

React

<List hover items={employees.map((e) => ({ key: e.id, avatar: e.avatar, title: e.name, description: e.role, meta: e.office }))}
      onItemClick={open} />

Angular

<thl-list [items]="items" hover (itemClick)="open($event)" />

ギャラリー

ギャラリー

Vue

<ThlGallery :images="galleryImages.slice(0, 8)" />

React

<Gallery images={galleryImages} />   {/* { src, thumb, alt, caption }[] */}

Angular

<thl-gallery [images]="galleryImages" />

API

List

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

Prop	型	デフォルト
items*	array	—
hover	boolean	—

イベント: item-click

スロット: meta

Gallery

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

Prop	型	デフォルト
images*	array	—