Vant4 Cell 單元格

介紹

單元格為列表中的單個展示項。

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { Cell, CellGroup } from 'vant';

const app = createApp();
app.use(Cell);
app.use(CellGroup);

代碼演示

基礎(chǔ)用法

?Cell? 可以單獨使用，也可以與 ?CellGroup? 搭配使用，?CellGroup? 可以為 ?Cell? 提供上下外邊框。

<van-cell-group>
  <van-cell title="單元格" value="內(nèi)容" />
  <van-cell title="單元格" value="內(nèi)容" label="描述信息" />
</van-cell-group>

卡片風(fēng)格

通過 ?CellGroup? 的 ?inset? 屬性，可以將單元格轉(zhuǎn)換為圓角卡片風(fēng)格（從 3.1.0 版本開始支持）。

<van-cell-group inset>
  <van-cell title="單元格" value="內(nèi)容" />
  <van-cell title="單元格" value="內(nèi)容" label="描述信息" />
</van-cell-group>

單元格大小

通過 ?size? 屬性可以控制單元格的大小。

<van-cell title="單元格" value="內(nèi)容" size="large" />
<van-cell title="單元格" value="內(nèi)容" size="large" label="描述信息" />

展示圖標

通過 ?icon? 屬性在標題左側(cè)展示圖標。

<van-cell title="單元格" icon="location-o" />

只設(shè)置 value

只設(shè)置 ?value? 時，內(nèi)容會靠左對齊。

<van-cell value="內(nèi)容" />

展示箭頭

設(shè)置 ?is-link? 屬性后會在單元格右側(cè)顯示箭頭，并且可以通過 ?arrow-direction? 屬性控制箭頭方向。

<van-cell title="單元格" is-link />
<van-cell title="單元格" is-link value="內(nèi)容" />
<van-cell title="單元格" is-link arrow-direction="down" value="內(nèi)容" />

頁面導(dǎo)航

可以通過 ?url? 屬性進行 URL 跳轉(zhuǎn)，或通過 ?to? 屬性進行路由跳轉(zhuǎn)。

<van-cell title="URL 跳轉(zhuǎn)" is-link url="https://github.com" />
<van-cell title="路由跳轉(zhuǎn)" is-link to="index" />

分組標題

通過 ?CellGroup? 的 ?title? 屬性可以指定分組標題。

<van-cell-group title="分組1">
  <van-cell title="單元格" value="內(nèi)容" />
</van-cell-group>
<van-cell-group title="分組2">
  <van-cell title="單元格" value="內(nèi)容" />
</van-cell-group>

使用插槽

如以上用法不能滿足你的需求，可以使用插槽來自定義內(nèi)容。

<van-cell value="內(nèi)容" is-link>
  <!-- 使用 title 插槽來自定義標題 -->
  <template #title>
    <span class="custom-title">單元格</span>
    <van-tag type="primary">標簽</van-tag>
  </template>
</van-cell>

<van-cell title="單元格" icon="shop-o">
  <!-- 使用 right-icon 插槽來自定義右側(cè)圖標 -->
  <template #right-icon>
    <van-icon name="search" class="search-icon" />
  </template>
</van-cell>

<style>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>

垂直居中

通過 ?center? 屬性可以讓 ?Cell? 的左右內(nèi)容都垂直居中。

<van-cell center title="單元格" value="內(nèi)容" label="描述信息" />

API

CellGroup Props

Cell Props

Cell Events

CellGroup Slots

Cell Slots

類型定義

組件導(dǎo)出以下類型定義：

import type {
  CellSize,
  CellProps,
  CellGroupProps,
  CellArrowDirection,
} from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。