Danh sách & Thư viện ảnh

Danh sách có avatar/icon, mô tả và thông tin phụ (feed, bình luận, danh bạ) và thư viện ảnh có lightbox.

Danh sách

Danh sách

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)" />

Thư viện ảnh

Thư viện ảnh

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	Kiểu	Mặc định
items*	array	—
hover	boolean	—

Sự kiện: item-click

Slot: meta

Gallery

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

Prop	Kiểu	Mặc định
images*	array	—