ページネーションとパンくず

省略記号、最初 / 最後、分割、角丸、サイズ、合計件数のテキスト、ページサイズ選択に対応したページネーション。ラベルはすべて翻訳済みです。アイコン付きのパンくずリストもあります。

ページネーション

ページネーション

Vue

<div class="thl-stack">
  <ThlPagination v-model:page="page" :total="200" show-first-last show-total />
  <ThlPagination v-model:page="page" v-model:page-size="size" :total="200" :page-sizes="[10, 25, 50]" rounded size="sm" />
  <ThlPagination v-model:page="page" :total="200" split size="lg" :max-pages="5" />
</div>

React

const [page, setPage] = useState(3);
<Pagination page={page} total={200} onChange={setPage} showFirstLast showTotal />
<Pagination page={page} total={200} onChange={setPage} pageSizes={[10, 25, 50]} onPageSizeChange={setSize} rounded size="sm" />

Angular

<thl-pagination [(page)]="page" [total]="200" showFirstLast [showTotal]="true" />
<thl-pagination [(page)]="page" [(pageSize)]="size" [total]="200" [pageSizes]="[10, 25, 50]" rounded size="sm" />

パンくずリスト

パンくずリスト

Vue

<ThlBreadcrumb :items="[{ label: 'Dashboard', href: '#', icon: 'house' }, { label: 'UI Elements', href: '#' }, { label: 'Buttons' }]" />

React

<Breadcrumb items={[{ label: 'Dashboard', href: '/', icon: 'house' }, { label: 'UI Elements', href: '#' }, { label: 'Buttons' }]} />

Angular

<thl-breadcrumb [items]="[{ label: 'Dashboard', href: '/', icon: 'house' }, { label: 'Buttons' }]" />

API

Pagination

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

Prop	型	デフォルト
page*	number	—
total*	number	—
pageSize	number	10
maxPages	number	—
size	string	—
showTotal	boolean	—
showFirstLast	boolean	—
split	boolean	—
rounded	boolean	—
pageSizes	array	—
ariaLabel	string	—

イベント: update:pageupdate:pageSizechange

Breadcrumb

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

Prop	型	デフォルト
items*	array	—

スロット: link