mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[new feature] Docs: 增加组件使用文档 (#50)
* 增加 徽章 文档 * add readme && change capsule css * reset capsule css
This commit is contained in:
Yao
GitHub
parent
8cb6c1a1f5
commit
97a6365c0f
3
example/pages/capsule/index.wxss
Normal file
3
example/pages/capsule/index.wxss
Normal file
@ -0,0 +1,3 @@
|
||||
.zan-capsule + .zan-capsule {
|
||||
margin-left: 10px;
|
||||
}
|
||||
21
packages/badge/README.md
Normal file
21
packages/badge/README.md
Normal file
@ -0,0 +1,21 @@
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
```html
|
||||
<view class="badge-container zan-badge">
|
||||
<view class="zan-badge__count">10</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
```css
|
||||
.badge-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
```
|
||||
40
packages/btn/README.md
Normal file
40
packages/btn/README.md
Normal file
@ -0,0 +1,40 @@
|
||||
## Button 按钮
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
```html
|
||||
<button class="zan-btn">取消订单</button>
|
||||
```
|
||||
|
||||
#### 按钮类型
|
||||
按钮支持额外的三种类型 primary, danger, warn
|
||||
```html
|
||||
<button class="zan-btn zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--danger">确认付款</button>
|
||||
<button class="zan-btn zan-btn--warn">确认付款</button>
|
||||
```
|
||||
|
||||
#### 按钮大小
|
||||
按钮支持额外三种大小 large, small, mini
|
||||
```html
|
||||
<button class="zan-btn zan-btn--large">确认付款</button>
|
||||
<button class="zan-btn zan-btn--small">取消订单</button>
|
||||
<button class="zan-btn zan-btn--mini">确认付款</button>
|
||||
```
|
||||
|
||||
#### 其他
|
||||
按钮支持镂空状态，可以直接使用 zan-btn--plain
|
||||
```html
|
||||
<button class="zan-btn zan-btn--primary zan-btn--plain">确认付款</button>
|
||||
```
|
||||
同时支持加载状态，可以使用 zan-btn--loading 获得
|
||||
```html
|
||||
<button class="zan-btn zan-btn--loading">确认付款</button>
|
||||
```
|
||||
32
packages/capsule/README.md
Normal file
32
packages/capsule/README.md
Normal file
@ -0,0 +1,32 @@
|
||||
## Capsule 胶囊
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
在需要使用的模板里引入组件库模板
|
||||
```html
|
||||
<import src="path/to/zanui-weapp/dist/capsule/index.wxml" />
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
可以用 leftText 和 rightText 控制左右文案
|
||||
```html
|
||||
<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份'}}" />
|
||||
```
|
||||
|
||||
#### 使用不同类型胶囊
|
||||
按钮支持额外的三种类型 primary, danger, warn
|
||||
```html
|
||||
<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}" />
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
通过 color 熟悉，可以自定义显示的颜色
|
||||
```html
|
||||
<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}" />
|
||||
```
|
||||
@ -9,4 +9,4 @@
|
||||
<view class="zan-capsule__right">{{ rightText }}</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
49
packages/card/README.md
Normal file
49
packages/card/README.md
Normal file
@ -0,0 +1,49 @@
|
||||
## Card 卡片
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
卡片可以用于左侧图片，右侧描述信息的展示。
|
||||
`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示
|
||||
如下，是一个商品信息的展示：
|
||||
```html
|
||||
<view class="zan-card">
|
||||
<!-- 卡片左侧商品图片 -->
|
||||
<view class="zan-card__thumb">
|
||||
<image class="zan-card__img"
|
||||
src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
<!-- 卡片右侧详情描述 -->
|
||||
<view class="zan-card__detail">
|
||||
<!-- 商品标题行 -->
|
||||
<!-- 每行可以使用 zan-card__detail-row 来控制展示区域 -->
|
||||
<!-- 每行里面可以用 zan-card__left-col zan-card__right-col 来控制左右展示 -->
|
||||
<view class="zan-card__detail-row">
|
||||
<view class="zan-card__right-col">¥ 999.99</view>
|
||||
<view class="zan-card__left-col zan-ellipsis--l2">
|
||||
红烧牛肉【虚拟商品】【有库存】【有sku】
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品附属信息展示行 -->
|
||||
<view class="zan-card__detail-row zan-c-gray-darker">
|
||||
<view class="zan-card__right-col">x2</view>
|
||||
<view class="zan-card__left-col">
|
||||
3000克 50%
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品操作按钮相关 -->
|
||||
<view class="zan-card__detail-row zan-c-gray-darker">
|
||||
<view class="zan-card__left-col zan-c-red">已发货</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
54
packages/cell/README.md
Normal file
54
packages/cell/README.md
Normal file
@ -0,0 +1,54 @@
|
||||
## Cell 单元格
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
`zan-cell` 有三部分组成：
|
||||
顶部 Icon：`zan-cell__icon`
|
||||
主内容区：`zan-cell__bd`
|
||||
附属内容：`zan-cell__ft`
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
当然，也可以在内容区增加附加描述
|
||||
```html
|
||||
<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`，可以在右侧显示出箭头。
|
||||
```html
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
```
|
||||
|
||||
#### 带开关的单元格
|
||||
增加 `zan-cell--switch`，更好的适配带有开关的情况
|
||||
```html
|
||||
<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 +1,4 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs-extra');
|
||||
const nodeWatch = require('node-watch');
|
||||
require('shelljs/global');
|
||||
@ -18,7 +19,8 @@ function extracter(config = {}) {
|
||||
// 复制 src
|
||||
fs.copySync(config.src, config.dist, {
|
||||
filter(src = '') {
|
||||
return src.indexOf('.pcss') < 0;
|
||||
const extname = path.extname(src);
|
||||
return ['.pcss', '.md'].indexOf(extname) < 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user