介紹

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

引入

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

Vue.use(Cell);
Vue.use(CellGroup);

代碼演示

基礎用法

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

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

卡片風格

通過 CellGroup 的 inset 屬性，可以將單元格轉換為圓角卡片風格（從 2.12.25 版本開始支持）。

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

單元格大小

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

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

展示圖標

通過 icon 屬性在標題左側展示圖標。

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

只設置 value

只設置 value 時，內容會靠左對齊。

<van-cell value="內容" />

展示箭頭

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

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

頁面導航

可以通過 url 屬性進行 URL 跳轉，或通過 to 屬性進行路由跳轉。

<van-cell title="URL 跳轉" is-link url="/vant/mobile.html" />
<van-cell title="路由跳轉" is-link to="index" />

分組標題

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

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

使用插槽

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

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

<van-cell title="單元格" icon="shop-o">
  <!-- 使用 right-icon 插槽來自定義右側圖標 -->
  <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 的左右內容都垂直居中。

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

API

CellGroup Props

Cell Props

Cell Events

CellGroup Slots

Cell Slots

樣式變量

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