jk's notes
  • Cell 单元格

Cell 单元格

文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/cell

基本语法:

<van-cell 
  title="标题"
  value="右侧内容"
  label="标题下方的描述文字"       
></van-cell>

一般以横向分组列表的形式展示数据项. 逻辑样式与手机中设置的样式类似.

常用属性有:

  • title 主题标题
  • label 标题下方的子标题
  • value 右侧是文字
  • is-link 显示右侧箭头
  • url 或 to 用来设置导航. 配合 replace 来设置是否替换页面历史.
  • required 当用作表单的时候, 显示必填星号.
  • center 在同时使用 title 和 label 后, 行高会变高, 用于控制右侧是否垂直居中.

附加组件 CellGroup

作为容器使用:

<van-cell-group></van-cell-group>

常用属性:

  • title 设置分组标题.
  • 默认 Cell 横向填满一整行, 使用 inset 属性可以显示为与圆角卡片的样式.
Last Updated:
Contributors: jk