diff --git a/example/pages/card/index.json b/example/pages/card/index.json index 79a0a3c6..1fca605a 100644 --- a/example/pages/card/index.json +++ b/example/pages/card/index.json @@ -1,3 +1,6 @@ { - "navigationBarTitleText": "Card 卡片" + "navigationBarTitleText": "Card 卡片", + "usingComponents": { + "zan-card": "../../dist/card/index" + } } diff --git a/example/pages/card/index.wxml b/example/pages/card/index.wxml index 938cb936..94ddd073 100644 --- a/example/pages/card/index.wxml +++ b/example/pages/card/index.wxml @@ -3,33 +3,45 @@ CARD - - + + + + + + 使用slot + + + + - + + - ¥ 999.99 + x 2 - 红烧牛肉【虚拟商品】【有库存】【有sku】 + 我是标题 - - x2 - - 3000克 50% - - - - - 已发货 + ¥ 111 - + - diff --git a/example/pages/card/index.wxss b/example/pages/card/index.wxss new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/example/pages/card/index.wxss @@ -0,0 +1 @@ + diff --git a/example/pages/layout/index.json b/example/pages/layout/index.json new file mode 100644 index 00000000..9a651ebb --- /dev/null +++ b/example/pages/layout/index.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "zan-row": "../../dist/row/index", + "zan-col": "../../dist/col/index" + } +} diff --git a/example/pages/layout/index.wxml b/example/pages/layout/index.wxml index dfcb5303..baef8874 100644 --- a/example/pages/layout/index.wxml +++ b/example/pages/layout/index.wxml @@ -5,29 +5,23 @@ 基础用法 Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度 - - - span: 8 - - - span: 8 - - - span: 8 - - + + span: 8 + span: 8 + span: 8 + offset 添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同 - - span: 4 - offset: 4, span: 10 - - - offset: 12, span: 12 - + + span: 4 + offset: 4, span: 10 + + + offset: 12, span: 12 + diff --git a/example/pages/layout/index.wxss b/example/pages/layout/index.wxss index 5eab3147..ff64efce 100644 --- a/example/pages/layout/index.wxss +++ b/example/pages/layout/index.wxss @@ -1,4 +1,4 @@ -.zan-col { +.custom-zan-col { line-height: 30px; text-align: center; background-color: #39a9ed; @@ -6,6 +6,6 @@ color: #fff; } -.zan-col:nth-child(even) { +.custom-zan-col:nth-child(even) { background-color: #66c6f2; } diff --git a/packages/card/README.md b/packages/card/README.md index e9c548ed..e286a000 100644 --- a/packages/card/README.md +++ b/packages/card/README.md @@ -1,49 +1,71 @@ ## Card 卡片 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-card": "path/to/zanui-weapp/dist/card/index" + } +} ``` - ### 代码演示 #### 基础用法 -卡片可以用于左侧图片，右侧描述信息的展示。 -`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示 -如下，是一个商品信息的展示： +卡片可以用于左侧图片，右侧描述信息的展示。默认是商品相关内容的展示，需要展示其他内容可以使用自定义slot。 + ```html - - - + + +``` + +#### 使用slot +`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。 + +```html + + - - - - - + + - ¥ 999.99 + x 2 - 红烧牛肉【虚拟商品】【有库存】【有sku】 + 我是标题 - - x2 - - 3000克 50% - - - - - 已发货 + ¥ 111 - + ``` +### API +| 参数 | 说明 | 类型 | 默认值 | +|-----|-----|-----|-----| +| card-class | 自定义最外层class | String | - +| thumb | 左侧缩略图 | String | - +| price | 商品价格 | String | - +| title | 商品标题 | String | - +| desc | 商品描述 | String | - +| num | 商品数量 | Number | - +| status | 商品状态 | String | - +| useThumbSlot | 是否使用thumb-slot（true时需要添加对应slot） | Boolean | `false` +| useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false` diff --git a/packages/card/index.js b/packages/card/index.js new file mode 100644 index 00000000..d8e268f1 --- /dev/null +++ b/packages/card/index.js @@ -0,0 +1,24 @@ +Component({ + options: { + multipleSlots: true + }, + + externalClasses: ['card-class'], + + properties: { + useThumbSlot: { + type: Boolean, + value: false + }, + useDetailSlot: { + type: Boolean, + value: false + }, + thumb: String, + price: String, + title: String, + num: Number, + desc: String, + status: String + } +}); diff --git a/packages/card/index.json b/packages/card/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/card/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/card/index.pcss b/packages/card/index.pcss index 27a4376c..04847ed9 100644 --- a/packages/card/index.pcss +++ b/packages/card/index.pcss @@ -1,6 +1,9 @@ +@import "../color/index.pcss"; +@import "../helper/index.pcss"; + .zan-card { + display: flex; margin-left: 0px; - width: auto; padding: 5px 15px; overflow: hidden; position: relative; @@ -10,7 +13,6 @@ .zan-card__thumb { width: 90px; height: 90px; - float: left; position: relative; margin-left: auto; margin-right: auto; @@ -31,8 +33,8 @@ } .zan-card__detail { - margin-left: 100px; - width: auto; + flex: 1; + margin-left: 10px; position: relative; } diff --git a/packages/card/index.wxml b/packages/card/index.wxml new file mode 100644 index 00000000..b5b32b83 --- /dev/null +++ b/packages/card/index.wxml @@ -0,0 +1,31 @@ + + + + + + + + + + + ¥ {{ price }} + + {{ title }} + + + + + x {{ num }} + + {{ desc }} + + + + + {{ status }} + + + diff --git a/packages/col/index.js b/packages/col/index.js new file mode 100644 index 00000000..b9e7bf42 --- /dev/null +++ b/packages/col/index.js @@ -0,0 +1,20 @@ +Component({ + externalClasses: ['col-class'], + + relations: { + '../row/index': { + type: 'parent' + } + }, + + properties: { + col: { + value: 0, + type: Number + }, + offset: { + value: 0, + type: Number + } + } +}); diff --git a/packages/col/index.json b/packages/col/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/col/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/col/index.wxml b/packages/col/index.wxml new file mode 100644 index 00000000..2be191c3 --- /dev/null +++ b/packages/col/index.wxml @@ -0,0 +1 @@ + diff --git a/packages/row/README.md b/packages/row/README.md index a021d2c2..44c07651 100644 --- a/packages/row/README.md +++ b/packages/row/README.md @@ -1,34 +1,48 @@ ## Layout 布局 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-row": "path/to/zanui-weapp/dist/row/index", + "zan-col": "path/to/zanui-weapp/dist/col/index" + } +} ``` ### 代码演示 -Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度 +Layout 组件提供了24列栅格，设置 col 属性可以设置元素所占宽度 + ```html - - - span: 8 - - - span: 8 - - - span: 8 - - + + span: 8 + span: 8 + span: 8 + ``` -Layout 提供了 offset 功能。添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同 +Layout 提供了 offset 功能。设置 offset 属性可以设置列的偏移宽度，计算方式与 span 相同 ```html - - span: 4 - offset: 4, span: 10 - - - offset: 12, span: 12 - + + span: 4 + offset: 4, span: 10 + + + offset: 12, span: 12 + ``` + +### API +#### Row +| 参数 | 说明 | 类型 | 默认值 | +|-----|-----|-----|-----| +| row-class | 自定义row class | String | - + +#### Col +| 参数 | 说明 | 类型 | 默认值 | +|-----|-----|-----|-----| +| col-class | 自定义col class | String | - +| col | 元素所占宽度 | Number | `0` +| offset | 元素偏移宽度 | Number | `0` + diff --git a/packages/row/index.js b/packages/row/index.js new file mode 100644 index 00000000..ac80c59a --- /dev/null +++ b/packages/row/index.js @@ -0,0 +1,9 @@ +Component({ + externalClasses: ['row-class'], + + relations: { + '../col/index': { + type: 'child' + } + } +}); diff --git a/packages/row/index.json b/packages/row/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/row/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/row/index.wxml b/packages/row/index.wxml new file mode 100644 index 00000000..c420646a --- /dev/null +++ b/packages/row/index.wxml @@ -0,0 +1 @@ +