vant-weapp/README.md at deddb8df6fd6e72e5429b0d9d311aef211896699

mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00

* 增加 徽章 文档

* add readme && change capsule css

* reset capsule css

2017-11-08 22:33:37 +08:00

1.3 KiB

Raw Blame History

Cell 单元格

使用指南

在 app.wxss 中引入组件库所有样式

@import "path/to/zanui-weapp/dist/index.wxss";

代码演示

基础用法

zan-cell 有三部分组成：顶部 Icon：zan-cell__icon 主内容区：zan-cell__bd 附属内容：zan-cell__ft

<view class="zan-cell">
  <view class="zan-cell__icon zan-icon zan-icon-check"></view>
  <view class="zan-cell__bd">单行列表</view>
  <view class="zan-cell__ft">详细信息</view>
</view>

当然，也可以在内容区增加附加描述

<view class="zan-cell">
  <view class="zan-cell__bd">
    <view class="zan-cell__text">单行列表</view>
    <view class="zan-cell__desc">附加描述</view>
  </view>
  <view class="zan-cell__ft">详细信息</view>
</view>

带箭头的单元格

在根元素上增加 zan-cell--access，可以在右侧显示出箭头。

<view class="zan-cell zan-cell--access">
  <view class="zan-cell__bd">单行列表</view>
  <view class="zan-cell__ft"></view>
</view>

带开关的单元格

增加 zan-cell--switch，更好的适配带有开关的情况

<view class="zan-cell zan-cell--switch">
  <view class="zan-cell__bd">开关</view>
  <view class="zan-cell__ft">
    <template is="zan-switch" data="{{ checked }}"/>
  </view>
</view>

1.3 KiB Raw Blame History Unescape Escape