From b1e37e33da31061e9fdf7ccdcf2a4385c017e93e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 30 Jul 2018 16:18:43 +0800 Subject: [PATCH] [breaking change] Layout: rewrite --- example/pages/icon/index.js | 108 +++---- example/pages/icon/index.json | 2 + example/pages/icon/index.wxml | 12 +- example/pages/layout/index.js | 12 +- example/pages/layout/index.json | 4 +- example/pages/layout/index.wxml | 27 +- example/pages/layout/index.wxss | 16 +- packages/button/README.md | 14 +- packages/button/index.js | 4 - packages/col/index.js | 24 +- packages/col/index.pcss | 5 +- packages/col/index.wxml | 7 +- packages/icon/README.md | 38 ++- packages/icon/index.js | 9 +- packages/icon/index.pcss | 527 ++++++++++++++++++++++++-------- packages/icon/index.wxml | 4 +- packages/row/README.md | 58 ++-- packages/row/index.js | 34 ++- packages/row/index.pcss | 2 +- packages/row/index.wxml | 4 +- 20 files changed, 632 insertions(+), 279 deletions(-) diff --git a/example/pages/icon/index.js b/example/pages/icon/index.js index e5cb2c59..c3f362a2 100644 --- a/example/pages/icon/index.js +++ b/example/pages/icon/index.js @@ -2,46 +2,73 @@ Page({ data: { icons: [ 'close', - 'location', + 'upgrade', + 'add-o', + 'passed', + 'chat', + 'question', 'clock', 'gold-coin', - 'chat', - 'exchange', - 'upgrade', + 'play', + 'pause', + 'stop', + 'more-o', + 'info-o', + 'share', + 'like-o', + 'logistics', 'edit', + 'exchange', + 'location', + 'cart', + 'shop', + 'gift', 'contact', - 'passed', + 'wap-home', 'points', + 'discount', + 'point-gift', + 'after-sale', + 'edit-data', 'delete', 'records', - 'logistics', - 'check', - 'checked', - 'gift', - 'like-o', - 'like', - 'qr', - 'qr-invalid', - 'shop', - 'photograph', - 'add', - 'minus', - 'add2', - 'add-o', - 'minus-o', + 'completed', + 'certificate', + 'tosend', + 'sign', 'photo', - 'cart', + 'idcard', + 'home', + 'free-postage', + 'cash-back-record', + 'points-mall', + 'exchange-record', + 'pending-payment', + 'pending-orders', + 'pending-deliver', + 'pending-evaluate', + 'password-view', + 'password-not-view', + 'check', 'arrow', + 'arrow-left', 'search', - 'clear', 'success', 'fail', + 'add', + 'checked', + 'warn', + 'clear', + 'underway', + 'more', + 'like', + 'photograph', + 'qr-invalid', + 'qr', + 'add2', 'wechat', 'alipay', - 'password-view', 'wap-nav', - 'password-not-view', - 'wap-home', 'ecard-pay', 'balance-pay', 'peer-pay', @@ -56,38 +83,13 @@ Page({ 'send-gift', 'setting', 'coupon', - 'free-postage', - 'discount', - 'birthday-privilege', - 'member-day-privilege', - 'balance-details', - 'cash-back-record', - 'points-mall', - 'exchange-record', - 'pending-payment', - 'pending-orders', - 'pending-deliver', - 'pending-evaluate', - 'cash-on-deliver', 'gift-card-pay', - 'underway', - 'point-gift', - 'after-sale', - 'edit-data', - 'question', + 'cash-on-deliver', + 'phone', 'description', 'card', - 'gift-card', - 'completed', 'value-card', - 'certificate', - 'tosend', - 'sign', - 'home', - 'phone', - 'play', - 'pause', - 'stop', + 'gift-card', 'hot', 'new', 'new-arrival', diff --git a/example/pages/icon/index.json b/example/pages/icon/index.json index 780be98f..013af28d 100644 --- a/example/pages/icon/index.json +++ b/example/pages/icon/index.json @@ -1,6 +1,8 @@ { "navigationBarTitleText": "Icon 图标", "usingComponents": { + "demo-block": "../../components/demo-block/index", + "van-col": "../../dist/icon/index", "van-icon": "../../dist/icon/index" } } diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml index 08cea3dc..68cb15ef 100644 --- a/example/pages/icon/index.wxml +++ b/example/pages/icon/index.wxml @@ -1,6 +1,6 @@ - - - - - van-icon-{{ icon }} - + + + + {{ item }} + + diff --git a/example/pages/layout/index.js b/example/pages/layout/index.js index 454020c0..560d44d4 100644 --- a/example/pages/layout/index.js +++ b/example/pages/layout/index.js @@ -1,11 +1 @@ -Page({ - data: { - }, - - onLoad: function () { - - }, - - onShow: function() { - }, -}) +Page({}); diff --git a/example/pages/layout/index.json b/example/pages/layout/index.json index 91225d0f..cc5599c9 100644 --- a/example/pages/layout/index.json +++ b/example/pages/layout/index.json @@ -1,7 +1,7 @@ { "usingComponents": { + "demo-block": "../../components/demo-block/index", "van-row": "../../dist/row/index", - "van-col": "../../dist/col/index", - "van-panel": "../../dist/panel/index" + "van-col": "../../dist/col/index" } } diff --git a/example/pages/layout/index.wxml b/example/pages/layout/index.wxml index b59314f2..a8af27d3 100644 --- a/example/pages/layout/index.wxml +++ b/example/pages/layout/index.wxml @@ -1,17 +1,24 @@ - + - span: 8 - span: 8 - span: 8 + span: 8 + span: 8 + span: 8 - - - span: 4 - offset: 4, span: 10 + span: 4 + offset: 4, span: 10 + - offset: 12, span: 12 + offset: 12, span: 12 - + + + + + span: 8 + span: 8 + span: 8 + + diff --git a/example/pages/layout/index.wxss b/example/pages/layout/index.wxss index 20f059d8..378de2ae 100644 --- a/example/pages/layout/index.wxss +++ b/example/pages/layout/index.wxss @@ -1,11 +1,17 @@ -.custom-van-col { +.dark, +.light { + color: #fff; + font-size: 13px; line-height: 30px; text-align: center; - background-color: #39a9ed; - font-size: 12px; - color: #fff; + margin-bottom: 10px; + background-clip: content-box; } -.custom-van-col:nth-child(even) { +.dark { + background-color: #39a9ed; +} + +.light { background-color: #66c6f2; } diff --git a/packages/button/README.md b/packages/button/README.md index 0b66b1a2..171ec7e0 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -72,13 +72,6 @@ | send-message-img | sendMessageImg | `String` | 截图 | | show-message-card | 显示会话内消息卡片 | `String` | `false` | -### 外部样式类 - -| 类名 | 说明 | -|-----------|-----------| -| custom-class | 根节点样式类 | -| loading-class | 加载图标样式类 | - ### 事件 | 事件名 | 说明 | 参数 | @@ -88,3 +81,10 @@ | contact | 客服消息回调 | - | | getphonenumber | 获取用户手机号回调 | - | | error | 当使用开放能力时，发生错误的回调 | - | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | +| loading-class | 加载图标样式类 | diff --git a/packages/button/index.js b/packages/button/index.js index 62dca894..da2293bf 100644 --- a/packages/button/index.js +++ b/packages/button/index.js @@ -46,10 +46,6 @@ Component({ } }, - data: { - classes: '' - }, - attached() { this.setClasses(); }, diff --git a/packages/col/index.js b/packages/col/index.js index b9e7bf42..956f5dc7 100644 --- a/packages/col/index.js +++ b/packages/col/index.js @@ -1,20 +1,24 @@ +const ROW_PATH = '../row/index'; + Component({ - externalClasses: ['col-class'], + externalClasses: ['custom-class'], relations: { - '../row/index': { - type: 'parent' + [ROW_PATH]: { + type: 'ancestor' } }, properties: { - col: { - value: 0, - type: Number - }, - offset: { - value: 0, - type: Number + span: Number, + offset: Number + }, + + methods: { + setGutter(gutter) { + const padding = `${gutter / 2}px`; + const style = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : ''; + this.setData({ style }); } } }); diff --git a/packages/col/index.pcss b/packages/col/index.pcss index 4b37377f..282dfa3d 100644 --- a/packages/col/index.pcss +++ b/packages/col/index.pcss @@ -1,10 +1,9 @@ .van-col { float: left; box-sizing: border-box; - width: 0; } @for $i from 1 to 24 { - .van-col-$i { width: calc($i * 100% / 24); } - .van-col-offset-$i { margin-left: calc($i * 100% / 24); } + .van-col--$i { width: calc($i * 100% / 24); } + .van-col--offset-$i { margin-left: calc($i * 100% / 24); } } diff --git a/packages/col/index.wxml b/packages/col/index.wxml index 22eee8f3..30baf92a 100644 --- a/packages/col/index.wxml +++ b/packages/col/index.wxml @@ -1 +1,6 @@ - + + + diff --git a/packages/icon/README.md b/packages/icon/README.md index c44bb36a..1d59ce9f 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -1,24 +1,40 @@ ## Icon 图标 ### 使用指南 + 在 index.json 中引入组件 ```json -{ - "usingComponents": { - "van-icon": "path/to/vant-weapp/dist/icon/index" - } +"usingComponents": { + "van-icon": "path/to/vant-weapp/dist/icon/index" } ``` ### 代码演示 -可以在任意位置上使用 van-icon 标签。通过 type 可以控制 icon 显示的图标 + +#### 基础用法 + +设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表 + ```html - + ``` -支持的 icon 和 名称 见下图 +### API -![](https://img.yzcdn.cn/public_files/2017/12/03/c582397894f57f1c72fb28118588f833.jpeg?imageView2/2/w/500/h/0/q/100) -![](https://img.yzcdn.cn/public_files/2017/12/03/ab37f55520dfdcdf8dbe8951025e379a.jpeg?imageView2/2/w/500/h/0/q/100) -![](https://img.yzcdn.cn/public_files/2017/12/03/e862638f5cab9c0c7d2be38702c162df.jpeg?imageView2/2/w/500/h/0/q/100) -![](https://img.yzcdn.cn/public_files/2017/12/03/dfa76b99ca1c37671628e1c7b224dbb9.jpeg?imageView2/2/w/500/h/0/q/100) +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| name | 图标名称 | `String` | - | +| info | 图标右上角文字提示 | `String | Number` | - | +| color | 图标颜色 | `String` | - | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| click | 点击图标时触发 | - | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | diff --git a/packages/icon/index.js b/packages/icon/index.js index d964601a..6bf247ed 100644 --- a/packages/icon/index.js +++ b/packages/icon/index.js @@ -1,8 +1,9 @@ Component({ + externalClasses: ['custom-class'], + properties: { - type: { - type: String, - value: '' - } + info: null, + name: String, + color: String } }); diff --git a/packages/icon/index.pcss b/packages/icon/index.pcss index 880b6194..62dd95fc 100644 --- a/packages/icon/index.pcss +++ b/packages/icon/index.pcss @@ -1,139 +1,410 @@ -/* DO NOT EDIT! Generated by fount */ +@import '../common/var.pcss'; @font-face { - font-family: 'zanui-weapp-icon'; - src: url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.eot'); - src: url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.eot?#iefix') format('embedded-opentype'), - url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.woff2') format('woff2'), - url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.woff') format('woff'), - url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.ttf') format('truetype') + font-style: normal; + font-weight: normal; + font-family: 'vant-icon'; + src: url('https://img.yzcdn.cn/vant/vant-icon-eb8c95.ttf') format('truetype'); } .van-icon { - display: inline-block; -} -.van-icon::before { - font-family: "zanui-weapp-icon" !important; - font-style: normal; - font-weight: normal; - speak: none; - + position: relative; display: inline-block; - text-decoration: inherit; - width: 1em; - text-align: center; + font: normal normal normal 14px/1 "vant-icon"; + font-size: inherit; + text-rendering: auto; - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; + &__info { + color: #fff; + left: 100%; + top: -.5em; + font-size: .5em; + padding: 0 .3em; + text-align: center; + min-width: 1.2em; + line-height: 1.2; + position: absolute; + border-radius: .6em; + box-sizing: border-box; + background-color: $red; + transform: translateX(-50%); + font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; + } - /* fix buttons height, for twitter bootstrap */ - line-height: 1em; - - /* Animation center compensation - margins should be symmetric */ - /* remove if not needed */ - /* margin-left: .2em; */ - - /* you can be more comfortable with increased icons size */ - /* font-size: 120%; */ - - /* Font smoothing. That was taken from TWBS */ - -webkit-font-smoothing: antialiased; - - /* Uncomment for 3D effect */ - /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ + &::before { + display: inline-block; + } } -/* DO NOT EDIT! Generated by iconfount */ +.van-icon-add-o::before { + content: "\F000"; +} + +.van-icon-add::before { + content: "\F001"; +} + +.van-icon-add2::before { + content: "\F002"; +} + +.van-icon-after-sale::before { + content: "\F003"; +} + +.van-icon-alipay::before { + content: "\F004"; +} + +.van-icon-arrow-left::before { + content: "\F005"; +} + +.van-icon-arrow::before { + content: "\F006"; +} + +.van-icon-balance-pay::before { + content: "\F007"; +} + +.van-icon-browsing-history::before { + content: "\F008"; +} + +.van-icon-card::before { + content: "\F009"; +} + +.van-icon-cart::before { + content: "\F00A"; +} + +.van-icon-cash-back-record::before { + content: "\F00B"; +} + +.van-icon-cash-on-deliver::before { + content: "\F00C"; +} + +.van-icon-certificate::before { + content: "\F00D"; +} + +.van-icon-chat::before { + content: "\F00E"; +} + +.van-icon-check::before { + content: "\F00F"; +} + +.van-icon-checked::before { + content: "\F010"; +} + +.van-icon-clear::before { + content: "\F011"; +} + +.van-icon-clock::before { + content: "\F012"; +} + +.van-icon-close::before { + content: "\F013"; +} + +.van-icon-completed::before { + content: "\F014"; +} + +.van-icon-contact::before { + content: "\F015"; +} + +.van-icon-coupon::before { + content: "\F016"; +} + +.van-icon-credit-pay::before { + content: "\F017"; +} + +.van-icon-debit-pay::before { + content: "\F018"; +} + +.van-icon-delete::before { + content: "\F019"; +} + +.van-icon-description::before { + content: "\F01A"; +} + +.van-icon-discount::before { + content: "\F01B"; +} + +.van-icon-ecard-pay::before { + content: "\F01C"; +} + +.van-icon-edit-data::before { + content: "\F01D"; +} + +.van-icon-edit::before { + content: "\F01E"; +} + +.van-icon-exchange-record::before { + content: "\F01F"; +} + +.van-icon-exchange::before { + content: "\F020"; +} + +.van-icon-fail::before { + content: "\F021"; +} + +.van-icon-free-postage::before { + content: "\F022"; +} + +.van-icon-gift-card-pay::before { + content: "\F023"; +} + +.van-icon-gift-card::before { + content: "\F024"; +} + +.van-icon-gift::before { + content: "\F025"; +} + +.van-icon-gold-coin::before { + content: "\F026"; +} + +.van-icon-goods-collect::before { + content: "\F027"; +} + +.van-icon-home::before { + content: "\F028"; +} + +.van-icon-hot-sale::before { + content: "\F029"; +} + +.van-icon-hot::before { + content: "\F02A"; +} + +.van-icon-idcard::before { + content: "\F02B"; +} + +.van-icon-info-o::before { + content: "\F02C"; +} + +.van-icon-like-o::before { + content: "\F02D"; +} + +.van-icon-like::before { + content: "\F02E"; +} + +.van-icon-location::before { + content: "\F02F"; +} + +.van-icon-logistics::before { + content: "\F030"; +} + +.van-icon-more-o::before { + content: "\F031"; +} + +.van-icon-more::before { + content: "\F032"; +} + +.van-icon-new-arrival::before { + content: "\F033"; +} + +.van-icon-new::before { + content: "\F034"; +} + +.van-icon-other-pay::before { + content: "\F035"; +} + +.van-icon-passed::before { + content: "\F036"; +} + +.van-icon-password-not-view::before { + content: "\F037"; +} + +.van-icon-password-view::before { + content: "\F038"; +} + +.van-icon-pause::before { + content: "\F039"; +} + +.van-icon-peer-pay::before { + content: "\F03A"; +} + +.van-icon-pending-deliver::before { + content: "\F03B"; +} + +.van-icon-pending-evaluate::before { + content: "\F03C"; +} + +.van-icon-pending-orders::before { + content: "\F03D"; +} + +.van-icon-pending-payment::before { + content: "\F03E"; +} + +.van-icon-phone::before { + content: "\F03F"; +} + +.van-icon-photo::before { + content: "\F040"; +} + +.van-icon-photograph::before { + content: "\F041"; +} + +.van-icon-play::before { + content: "\F042"; +} + +.van-icon-point-gift::before { + content: "\F043"; +} + +.van-icon-points-mall::before { + content: "\F044"; +} + +.van-icon-points::before { + content: "\F045"; +} + +.van-icon-qr-invalid::before { + content: "\F046"; +} + +.van-icon-qr::before { + content: "\F047"; +} + +.van-icon-question::before { + content: "\F048"; +} + +.van-icon-receive-gift::before { + content: "\F049"; +} + +.van-icon-records::before { + content: "\F04A"; +} + +.van-icon-search::before { + content: "\F04B"; +} + +.van-icon-send-gift::before { + content: "\F04C"; +} + +.van-icon-setting::before { + content: "\F04D"; +} + +.van-icon-share::before { + content: "\F04E"; +} + +.van-icon-shop-collect::before { + content: "\F04F"; +} + +.van-icon-shop::before { + content: "\F050"; +} + +.van-icon-shopping-cart::before { + content: "\F051"; +} + +.van-icon-sign::before { + content: "\F052"; +} + +.van-icon-stop::before { + content: "\F053"; +} + +.van-icon-success::before { + content: "\F054"; +} + +.van-icon-tosend::before { + content: "\F055"; +} + +.van-icon-underway::before { + content: "\F056"; +} + +.van-icon-upgrade::before { + content: "\F057"; +} + +.van-icon-value-card::before { + content: "\F058"; +} + +.van-icon-wap-home::before { + content: "\F059"; +} + +.van-icon-wap-nav::before { + content: "\F05A"; +} + +.van-icon-warn::before { + content: "\F05B"; +} + +.van-icon-wechat::before { + content: "\F05C"; +} -.van-icon-qr-invalid:before { content: '\e800'; } /* '' */ -.van-icon-qr:before { content: '\e801'; } /* '' */ -.van-icon-exchange:before { content: '\e802'; } /* '' */ -.van-icon-close:before { content: '\e803'; } /* '' */ -.van-icon-location:before { content: '\e804'; } /* '' */ -.van-icon-upgrade:before { content: '\e805'; } /* '' */ -.van-icon-check:before { content: '\e806'; } /* '' */ -.van-icon-checked:before { content: '\e807'; } /* '' */ -.van-icon-like-o:before { content: '\e808'; } /* '' */ -.van-icon-like:before { content: '\e809'; } /* '' */ -.van-icon-chat:before { content: '\e80a'; } /* '' */ -.van-icon-shop:before { content: '\e80b'; } /* '' */ -.van-icon-photograph:before { content: '\e80c'; } /* '' */ -.van-icon-add:before { content: '\e80d'; } /* '' */ -.van-icon-minus:before { content: '\e80e'; } /* '' */ -.van-icon-add2:before { content: '\e80f'; } /* '' */ -.van-icon-photo:before { content: '\e810'; } /* '' */ -.van-icon-logistics:before { content: '\e811'; } /* '' */ -.van-icon-edit:before { content: '\e812'; } /* '' */ -.van-icon-passed:before { content: '\e813'; } /* '' */ -.van-icon-cart:before { content: '\e814'; } /* '' */ -.van-icon-shopping-cart:before { content: '\e815'; } /* '' */ -.van-icon-arrow:before { content: '\e816'; } /* '' */ -.van-icon-gift:before { content: '\e817'; } /* '' */ -.van-icon-search:before { content: '\e818'; } /* '' */ -.van-icon-clear:before { content: '\e819'; } /* '' */ -.van-icon-success:before { content: '\e81a'; } /* '' */ -.van-icon-fail:before { content: '\e81b'; } /* '' */ -.van-icon-contact:before { content: '\e81c'; } /* '' */ -.van-icon-wechat:before { content: '\e81d'; } /* '' */ -.van-icon-alipay:before { content: '\e81e'; } /* '' */ -.van-icon-password-view:before { content: '\e81f'; } /* '' */ -.van-icon-password-not-view:before { content: '\e820'; } /* '' */ -.van-icon-wap-nav:before { content: '\e821'; } /* '' */ -.van-icon-wap-home:before { content: '\e822'; } /* '' */ -.van-icon-ecard-pay:before { content: '\e823'; } /* '' */ -.van-icon-balance-pay:before { content: '\e824'; } /* '' */ -.van-icon-peer-pay:before { content: '\e825'; } /* '' */ -.van-icon-credit-pay:before { content: '\e826'; } /* '' */ -.van-icon-debit-pay:before { content: '\e827'; } /* '' */ -.van-icon-other-pay:before { content: '\e828'; } /* '' */ -.van-icon-browsing-history:before { content: '\e829'; } /* '' */ -.van-icon-goods-collect:before { content: '\e82a'; } /* '' */ -.van-icon-shop-collect:before { content: '\e82b'; } /* '' */ -.van-icon-receive-gift:before { content: '\e82c'; } /* '' */ -.van-icon-send-gift:before { content: '\e82d'; } /* '' */ -.van-icon-setting:before { content: '\e82e'; } /* '' */ -.van-icon-points:before { content: '\e82f'; } /* '' */ -.van-icon-coupon:before { content: '\e830'; } /* '' */ -.van-icon-free-postage:before { content: '\e831'; } /* '' */ -.van-icon-discount:before { content: '\e832'; } /* '' */ -.van-icon-birthday-privilege:before { content: '\e833'; } /* '' */ -.van-icon-member-day-privilege:before { content: '\e834'; } /* '' */ -.van-icon-balance-details:before { content: '\e835'; } /* '' */ -.van-icon-cash-back-record:before { content: '\e836'; } /* '' */ -.van-icon-points-mall:before { content: '\e837'; } /* '' */ -.van-icon-exchange-record:before { content: '\e838'; } /* '' */ -.van-icon-pending-payment:before { content: '\e839'; } /* '' */ -.van-icon-pending-orders:before { content: '\e83a'; } /* '' */ -.van-icon-pending-deliver:before { content: '\e83b'; } /* '' */ -.van-icon-pending-evaluate:before { content: '\e83c'; } /* '' */ -.van-icon-gift-card-pay:before { content: '\e83d'; } /* '' */ -.van-icon-cash-on-deliver:before { content: '\e83e'; } /* '' */ -.van-icon-underway:before { content: '\e83f'; } /* '' */ -.van-icon-point-gift:before { content: '\e840'; } /* '' */ -.van-icon-after-sale:before { content: '\e841'; } /* '' */ -.van-icon-edit-data:before { content: '\e842'; } /* '' */ -.van-icon-question:before { content: '\e843'; } /* '' */ -.van-icon-delete:before { content: '\e844'; } /* '' */ -.van-icon-records:before { content: '\e845'; } /* '' */ -.van-icon-description:before { content: '\e846'; } /* '' */ -.van-icon-card:before { content: '\e847'; } /* '' */ -.van-icon-gift-card:before { content: '\e848'; } /* '' */ -.van-icon-clock:before { content: '\e849'; } /* '' */ -.van-icon-gold-coin:before { content: '\e84a'; } /* '' */ -.van-icon-completed:before { content: '\e84b'; } /* '' */ -.van-icon-value-card:before { content: '\e84c'; } /* '' */ -.van-icon-certificate:before { content: '\e84d'; } /* '' */ -.van-icon-tosend:before { content: '\e84e'; } /* '' */ -.van-icon-sign:before { content: '\e84f'; } /* '' */ -.van-icon-home:before { content: '\e850'; } /* '' */ -.van-icon-phone:before { content: '\e851'; } /* '' */ -.van-icon-add-o:before { content: '\e852'; } /* '' */ -.van-icon-minus-o:before { content: '\e853'; } /* '' */ -.van-icon-play:before { content: '\e854'; } /* '' */ -.van-icon-pause:before { content: '\e855'; } /* '' */ -.van-icon-stop:before { content: '\e856'; } /* '' */ -.van-icon-hot:before { content: '\e857'; } /* '' */ -.van-icon-new:before { content: '\e858'; } /* '' */ -.van-icon-new-arrival:before { content: '\e859'; } /* '' */ -.van-icon-hot-sale:before { content: '\e85a'; } /* '' */ \ No newline at end of file diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml index efcd93dd..863dde1e 100644 --- a/packages/icon/index.wxml +++ b/packages/icon/index.wxml @@ -1 +1,3 @@ - + + {{ info }} + diff --git a/packages/row/README.md b/packages/row/README.md index 54bb984b..e4678ef1 100644 --- a/packages/row/README.md +++ b/packages/row/README.md @@ -1,6 +1,7 @@ ## Layout 布局 ### 使用指南 + 在 index.json 中引入组件 ```json { @@ -12,37 +13,58 @@ ``` ### 代码演示 -Layout 组件提供了24列栅格，设置 col 属性可以设置元素所占宽度 + +#### 基本用法 + +Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比 +此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同 ```html - span: 8 - span: 8 - span: 8 + span: 8 + span: 8 + span: 8 + + + + span: 4 + offset: 4, span: 10 + + + + offset: 12, span: 12 ``` -Layout 提供了 offset 功能。设置 offset 属性可以设置列的偏移宽度，计算方式与 span 相同 +#### 设置列元素间距 + +通过`gutter`属性可以设置列元素之间的间距，默认间距为 0 + ```html - - span: 4 - offset: 4, span: 10 - - - offset: 12, span: 12 + + span: 8 + span: 8 + span: 8 ``` ### API + #### Row + | 参数 | 说明 | 类型 | 默认值 | -|-----|-----|-----|-----| -| row-class | 自定义row class | String | - +|-----------|-----------|-----------|-------------| +| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | #### Col -| 参数 | 说明 | 类型 | 默认值 | -|-----|-----|-----|-----| -| col-class | 自定义col class | String | - -| col | 元素所占宽度 | Number | `0` -| offset | 元素偏移宽度 | Number | `0` +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| span | 列元素宽度 | `String | Number` | - | +| offset | 列元素偏移距离 | `String | Number` | - | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | diff --git a/packages/row/index.js b/packages/row/index.js index ac80c59a..2f5999e9 100644 --- a/packages/row/index.js +++ b/packages/row/index.js @@ -1,9 +1,37 @@ +const COL_PATH = '../col/index'; + Component({ - externalClasses: ['row-class'], + externalClasses: ['custom-class'], relations: { - '../col/index': { - type: 'child' + [COL_PATH]: { + type: 'descendant' + } + }, + + properties: { + gutter: { + type: Number, + observer() { + this.setGutter(); + } + } + }, + + ready() { + this.setGutter(); + }, + + methods: { + setGutter() { + const { gutter } = this.data; + const margin = `-${Number(gutter) / 2}px`; + const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : ''; + + this.setData({ style }); + this.getRelationNodes(COL_PATH).forEach(col => { + col.setGutter(this.data.gutter) + }); } } }); diff --git a/packages/row/index.pcss b/packages/row/index.pcss index 6e9b6b89..d5bbbb29 100644 --- a/packages/row/index.pcss +++ b/packages/row/index.pcss @@ -1,5 +1,5 @@ .van-row { - &:after { + &::after { content: ""; display: table; clear: both; diff --git a/packages/row/index.wxml b/packages/row/index.wxml index 6bbc449a..20c53661 100644 --- a/packages/row/index.wxml +++ b/packages/row/index.wxml @@ -1 +1,3 @@ - + + +