列表与图库

带头像/图标、描述和元信息的列表（动态、评论、联系人），以及带灯箱（lightbox）的图片画廊。

列表

列表

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	—