分页与面包屑

分页支持省略号、首页/末页、分离式、圆角、多种尺寸、总数文本和每页条数选择——所有标签均已翻译。另有带图标的面包屑。

分页

分页

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