Vant3 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="描述信息" />

展示圖標(biāo)

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

<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="/vant/mobile.html" />
<van-cell title="路由跳轉(zhuǎn)" is-link to="index" />

分組標(biāo)題

通過 CellGroup 的 title 屬性可以指定分組標(biāo)題。

<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 插槽來自定義標(biāo)題 -->
  <template #title>
    <span class="custom-title">單元格</span>
    <van-tag type="danger">標(biāo)簽</van-tag>
  </template>
</van-cell>

<van-cell title="單元格" icon="shop-o">
  <!-- 使用 right-icon 插槽來自定義右側(cè)圖標(biāo) -->
  <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

主題定制

樣式變量

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