料金表・ユーザー・プロフィール

料金表、ホバーでオーバーレイが表示されるユーザーカード、プロフィールカード。

PricingTable

PricingTable

Vue

<ThlPricingTable :plans="plans" @select="(p) => toast.success(p.name)" />

React

<PricingTable plans={plans} onSelect={(p) => buy(p)} />

Angular

<thl-pricing-table [plans]="plans" (selected)="buy($event)" />

UserCard と ProfileCard

UserCard と ProfileCard

Vue

<div class="thl-row">
  <div v-for="e in employees.slice(0, 2)" :key="e.id" class="thl-col-12 thl-col-md-4"><ThlUserCard :image="e.avatar.replace('150', '400')" :name="e.name" :subtitle="e.role"><template #actions><ThlButton circle icon="eye" aria-label="view" /><ThlButton circle icon="link" aria-label="link" /></template></ThlUserCard></div>
  <div class="thl-col-12 thl-col-md-4"><ThlProfileCard :cover="photo('cover', 800, 400)" :avatar="employees[3].avatar" :name="employees[3].name" :email="employees[3].email" :stats="[{ label: 'Followers', value: 258 }, { label: 'Following', value: 125 }, { label: 'Likes', value: 556 }]" /></div>
</div>

React

<UserCard image={url} name="Genelia" subtitle="Designer" actions={<Button circle icon="eye" aria-label="view" />} />
<ProfileCard cover={cover} avatar={url} name="Steave" email="[email protected]"
  stats={[{ label: 'Followers', value: 258 }]} />

Angular

<thl-user-card [image]="url" name="Genelia" subtitle="Designer" />
<thl-profile-card [cover]="cover" [avatar]="url" name="Steave" [stats]="stats" />

API

PricingTable

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

Prop	型	デフォルト
plans*	array	—

イベント: select

UserCard

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

Prop	型	デフォルト
image*	string	—
name	string	—
subtitle	string	—

スロット: actions

ProfileCard

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

Prop	型	デフォルト
cover	string	—
avatar	string	—
name	string	—
email	string	—
stats	array	—

スロット: default