List & Gallery

Lists with avatar/icon, description and meta (feeds, comments, contacts) and an image gallery with lightbox.

List

List

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

Gallery

Gallery

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	Type	Default
items*	array	—
hover	boolean	—

Events: item-click

Slots: meta

Gallery

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

Prop	Type	Default
images*	array	—