您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Vant Cell 单元格

使用Vant Cell 按钮组件,需要先进行引用。

在app.json或index.json中引入组件,详细介绍见

"usingComponents": {
  "van-cell": "@vant/weapp/cell/index",
  "van-cell-group": "@vant/weapp/cell-group/index"
}

Cell可以单独使用,也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>
  <van-cell title="单元格" value="" />
  <van-cell title="单元格" value="" label="描述信息" border="{{ false }}" />
</van-cell-group>

通过size可以控制单元格的大小

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

通过icon在左侧展示图标

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

设置is-link后会在单元格右侧箭头,并且可以通过arrow-direction控制箭头方向

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

可以通过url进行,通过link-type控制类型

<van-cell
  is-link
  title="单元格"
  link-type="navigateTo"
  url="/pages/dashboard/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="" icon="shop-o" is-link>
  <view slot="title">
    <view class="van-cell-text">单元格</view>
    <van-tag type="danger"></van-tag>
  </view>
</van-cell>
<van-cell title="单元格">
  <van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>

通过center可以让Cell的左右都垂直居中

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

API

API使用参数介绍表


联系我
置顶