diff --git a/packages/btn/README.md b/packages/btn/README.md index 0515669d..6a33c40a 100644 --- a/packages/btn/README.md +++ b/packages/btn/README.md @@ -8,16 +8,6 @@ } ``` -### 属性 - -| 名称 | 类型 | 是否必须 | 默认 | 描述 | -|---------|---------|----------|------|-------| -| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger | -| size | String | 否 | 空 | 按钮大小，值有large、small、mini | -| plain | Boolean | 否 | false | 按钮是否镂空，默认为false | -| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false | -| loading | Boolean | 否 | false | 按钮加载状态，默认为false | - ### 代码演示 #### 基础用法 @@ -57,4 +47,32 @@ 确认付款 ``` +### 配合 button-group 使用 +通过配合 zan-button-group 使用，可以让按钮之间自动有合适的间距出现，使用方式如下 + +1.在 json 文件中配置 button-group 组件 +```json +"usingComponents": { + "zan-button": "/dist/btn/index", + "zan-button-group": "/dist/btn-group/index" +} +``` +2.在 wxml 中直接引入 +```html + + 确认付款 + 再考虑下 + +``` + ![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png) + +### 属性 + +| 名称 | 类型 | 是否必须 | 默认 | 描述 | +|---------|---------|----------|------|-------| +| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger | +| size | String | 否 | 空 | 按钮大小，值有large、small、mini | +| plain | Boolean | 否 | false | 按钮是否镂空，默认为false | +| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false | +| loading | Boolean | 否 | false | 按钮加载状态，默认为false | diff --git a/packages/cell/README.md b/packages/cell/README.md index 0c1965ed..db629ba5 100644 --- a/packages/cell/README.md +++ b/packages/cell/README.md @@ -1,31 +1,6 @@ ## Cell 单元格 -自定义 cell 组件 - -### 属性与事件 - -| 名称 | 类型 | 是否必须 | 默认 | 描述 | -| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- | -| title | String | 否 | 无 | 左侧标题 | -| label | Boolean | 否 | false | 标题下方的描述信息 | -| value | String | 否 | 取消 | 右侧内容 | -| isLink | Boolean | 否 | false | 是否展示右侧箭头并开启尝试以 url 跳转 | -| url | String | 否 | - | 当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径 | -| linkType | String | 否 | navigateTo | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` | -| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 | -| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 | - -### 可用的 slot - -| 名称 | 是否必须 | 默认 | 描述 | -| ------------- | ----------- | ---- | --------------------------------------------------------------------- | -| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 | -| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 | -| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 | - -### cell 组 - -多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。 +### 使用指南 #### 单个 cell 使用示例 ~~~json @@ -43,6 +18,8 @@ ~~~ #### cell 组使用示例 +多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。 + ```json { ... @@ -66,4 +43,25 @@ -``` \ No newline at end of file +``` + +### 属性与事件 + +| 名称 | 类型 | 是否必须 | 默认 | 描述 | +| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- | +| title | String | 否 | 无 | 左侧标题 | +| label | Boolean | 否 | false | 标题下方的描述信息 | +| value | String | 否 | 取消 | 右侧内容 | +| isLink | Boolean | 否 | false | 是否展示右侧箭头并开启尝试以 url 跳转 | +| url | String | 否 | - | 当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径 | +| linkType | String | 否 | navigateTo | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` | +| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 | +| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 | + +### 可用的 slot + +| 名称 | 是否必须 | 默认 | 描述 | +| ------------- | ----------- | ---- | --------------------------------------------------------------------- | +| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 | +| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 | +| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 | \ No newline at end of file diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 69225374..8142ce16 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -70,6 +70,7 @@ Dialog({ }); ``` +### 具体参数 | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| | message | 弹窗内容 | String | - | 必须 | @@ -84,7 +85,7 @@ Dialog({ | cancelButtonColor | 取消按钮文字颜色 | String | #333 | | | buttons | 自定义按钮列表，设置以后，以上关于 确认 和 取消 按钮的设置全部不生效。| Array | - | | -buttons 参考格式： +buttons 数据格式 ```js [{ // 按钮文案 diff --git a/packages/loading/README.md b/packages/loading/README.md index a5c01916..0238b272 100644 --- a/packages/loading/README.md +++ b/packages/loading/README.md @@ -1,15 +1,7 @@ ## Loading 加载 -### 属性 - -| 名称 | 类型 | 是否必须 | 默认 | 描述 | -| ------- | --------------- | -------- | ----- | ----------------- | -| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot | -| color | String | 否 | 无 | 可选值 black | -| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 | - -### 代码演示 - +### 使用指南 +在 index.json 中引入组件 ```json { ... @@ -20,8 +12,16 @@ } ``` +在页面上直接使用 zan-loading 标签即可 ```html ``` + +### 具体参数 +| 名称 | 类型 | 是否必须 | 默认 | 描述 | +| ------- | --------------- | -------- | ----- | ----------------- | +| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot | +| color | String | 否 | 无 | 可选值 black | +| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 | diff --git a/packages/toptips/README.md b/packages/toptips/README.md index a0f04d69..1cea4418 100644 --- a/packages/toptips/README.md +++ b/packages/toptips/README.md @@ -40,7 +40,6 @@ Page({ ``` - ### 代码演示 ### 声明式调用 diff --git a/website/demo.js b/website/demo.js index d8eea397..9ffabf35 100644 --- a/website/demo.js +++ b/website/demo.js @@ -18,11 +18,12 @@ function getDemoDir (docFile) { } module.exports = function (template) { - let demoDir = getDemoDir(this.context) - let demoConf = getDemoFiles(demoDir) - template = Object.keys(demoConf).reduce((res, key) => { - res += `\n~~~ ${key}\n${demoConf[key]}~~~` - return res - }, template + `\n`) - return template + '\n' + // let demoDir = getDemoDir(this.context) + // let demoConf = getDemoFiles(demoDir) + // template = Object.keys(demoConf).reduce((res, key) => { + // res += `\n~~~ ${key}\n${demoConf[key]}~~~` + // return res + // }, template + `\n`) + // return template + '\n' + return template + ``; }