From e918c52fd07160114ef534f39d5f1f5193d8ad93 Mon Sep 17 00:00:00 2001 From: niunai Date: Fri, 3 Mar 2017 17:58:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0zan-layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.json | 4 +- docs/examples-docs/button.md | 15 ++++ docs/examples-docs/layout.md | 0 docs/examples/button.vue | 92 ++++++++++++++----------- docs/examples/layout.vue | 0 packages/button/src/button.js | 16 +++-- packages/col/CHANGELOG.md | 8 +++ packages/col/README.md | 26 +++++++ packages/col/index.js | 3 + packages/col/package.json | 10 +++ packages/col/src/col.vue | 38 ++++++++++ packages/row/CHANGELOG.md | 8 +++ packages/row/README.md | 26 +++++++ packages/row/index.js | 3 + packages/row/package.json | 10 +++ packages/row/src/row.vue | 29 ++++++++ packages/zanui-css/src/button.css | 25 ++++++- packages/zanui-css/src/button_group.css | 7 +- packages/zanui-css/src/col.css | 52 ++++++++++++++ packages/zanui-css/src/common/var.css | 70 +------------------ packages/zanui-css/src/index.css | 3 +- packages/zanui-css/src/row.css | 8 +++ src/index.js | 8 ++- 23 files changed, 337 insertions(+), 124 deletions(-) create mode 100644 docs/examples-docs/layout.md create mode 100644 docs/examples/layout.vue create mode 100644 packages/col/CHANGELOG.md create mode 100644 packages/col/README.md create mode 100644 packages/col/index.js create mode 100644 packages/col/package.json create mode 100644 packages/col/src/col.vue create mode 100644 packages/row/CHANGELOG.md create mode 100644 packages/row/README.md create mode 100644 packages/row/index.js create mode 100644 packages/row/package.json create mode 100644 packages/row/src/row.vue create mode 100644 packages/zanui-css/src/col.css create mode 100644 packages/zanui-css/src/row.css diff --git a/components.json b/components.json index 2663baa6f..83e0600fa 100644 --- a/components.json +++ b/components.json @@ -22,5 +22,7 @@ "badge": "./packages/badge/index.js", "search": "./packages/search/index.js", "step": "./packages/step/index.js", - "image-preview": "./packages/image-preview/index.js" + "image-preview": "./packages/image-preview/index.js", + "col": "./packages/col/index.js", + "row": "./packages/row/index.js" } diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md index 16f7f1ae3..e9df6e35a 100644 --- a/docs/examples-docs/button.md +++ b/docs/examples-docs/button.md @@ -64,6 +64,21 @@ ``` +### loading按钮 + +表示loading状态 + +```html +
+
+ 111 +
+
+ 222 +
+
+``` + ### button group 一组按钮。 diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/examples/button.vue b/docs/examples/button.vue index 998ad67e1..0c31c3bf1 100644 --- a/docs/examples/button.vue +++ b/docs/examples/button.vue @@ -2,52 +2,62 @@

Button

按钮功能

-
-
- default -
-
- primary -
-
- danger -
-
+ + + default + + + primary + + + danger + +

禁用状态

-
-
- diabled -
-
+ + + diabled + +

按钮尺寸

-
-
+ + large -
-
-
-
- normal -
-
- small -
-
- mini -
-
+ + + + + normal + + + small + + + mini + +

自定义按钮标签

-
-
+ + a标签按钮 -
-
+ + + +

loading

+ + + loading + + + + +

button group

-
+
确认付款 确认收货 取消订单 @@ -62,11 +72,11 @@ } } @component-namespace zan { - @b button-group { - .zan-button-1 { - margin-bottom: 10px; - } + @b col { + margin-bottom: 10px; } } - + .button-group { + font-size: 0; + } diff --git a/docs/examples/layout.vue b/docs/examples/layout.vue new file mode 100644 index 000000000..e69de29bb diff --git a/packages/button/src/button.js b/packages/button/src/button.js index 8ce62f182..85a0eec07 100644 --- a/packages/button/src/button.js +++ b/packages/button/src/button.js @@ -61,17 +61,23 @@ export default { 'zan-button--' + type, 'zan-button--' + size, { - 'z-button--disabled': disabled, - 'z-button--loading': loading, - 'z-button--block': block + 'zan-button--disabled': disabled, + 'zan-button--loading': loading, + 'zan-button--block': block } ]} onClick={this.handleClick} > { - loading ? : null + loading ? + + : + null } - {this.$slots.default} + {this.$slots.default} ); } diff --git a/packages/col/CHANGELOG.md b/packages/col/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/col/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/col/README.md b/packages/col/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/col/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/col/index.js b/packages/col/index.js new file mode 100644 index 000000000..b8728de40 --- /dev/null +++ b/packages/col/index.js @@ -0,0 +1,3 @@ +import Col from './src/col'; + +export default Col; diff --git a/packages/col/package.json b/packages/col/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/col/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/col/src/col.vue b/packages/col/src/col.vue new file mode 100644 index 000000000..8bf71f3e3 --- /dev/null +++ b/packages/col/src/col.vue @@ -0,0 +1,38 @@ + + + diff --git a/packages/row/CHANGELOG.md b/packages/row/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/row/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/row/README.md b/packages/row/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/row/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/row/index.js b/packages/row/index.js new file mode 100644 index 000000000..6549c1ffb --- /dev/null +++ b/packages/row/index.js @@ -0,0 +1,3 @@ +import Row from './src/row'; + +export default Row; diff --git a/packages/row/package.json b/packages/row/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/row/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/row/src/row.vue b/packages/row/src/row.vue new file mode 100644 index 000000000..f72a027f4 --- /dev/null +++ b/packages/row/src/row.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/zanui-css/src/button.css b/packages/zanui-css/src/button.css index 3010554a5..4c1bdd15a 100644 --- a/packages/zanui-css/src/button.css +++ b/packages/zanui-css/src/button.css @@ -1,4 +1,5 @@ -@import "./common/var.css"; +@import './common/var'; +@import './loading'; @component-namespace zan { @b button { @@ -27,6 +28,10 @@ opacity: .3; } + & + .zan-button { + margin-left: 10px; + } + @m default { color: $button-default-color; background-color: $button-default-background-color; @@ -73,6 +78,10 @@ height: 22px; line-height: 20px; font-size: 10px; + + & + .zan-button--mini { + margin-left: 5px; + } } @m disabled { @@ -83,6 +92,20 @@ @m block { display: block; + width: 100%; + } + + @m loading { + .zan-button__text { + display: none; + } + } + + @e icon-loading { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; } } } diff --git a/packages/zanui-css/src/button_group.css b/packages/zanui-css/src/button_group.css index 5d4231493..5321eb204 100644 --- a/packages/zanui-css/src/button_group.css +++ b/packages/zanui-css/src/button_group.css @@ -15,12 +15,7 @@ @b button-group { font-size: 0; - > .zan-button { - margin-right: 10px; - &::last-child { - margin-right: 0; - } - } + } @b button-1 { @mixin button-wrap; diff --git a/packages/zanui-css/src/col.css b/packages/zanui-css/src/col.css new file mode 100644 index 000000000..2ac002af9 --- /dev/null +++ b/packages/zanui-css/src/col.css @@ -0,0 +1,52 @@ +.zan-col { + float: left; + box-sizing: border-box; +} +.zan-col-1 { width: 4.166666666666667%; } +.zan-col-2 { width: 8.333333333333334%; } +.zan-col-3 { width: 12.5%; } +.zan-col-4 { width: 16.666666666666668%; } +.zan-col-5 { width: 20.833333333333336%; } +.zan-col-6 { width: 25%; } +.zan-col-7 { width: 29.166666666666668%; } +.zan-col-8 { width: 33.333333333333336%; } +.zan-col-9 { width: 37.5%; } +.zan-col-10 { width: 41.66666666666667%; } +.zan-col-11 { width: 45.833333333333336%; } +.zan-col-12 { width: 50%; } +.zan-col-13 { width: 54.16666666666667%; } +.zan-col-14 { width: 58.333333333333336%; } +.zan-col-15 { width: 62.50000000000001%; } +.zan-col-16 { width: 66.66666666666667%; } +.zan-col-17 { width: 70.83333333333334%; } +.zan-col-18 { width: 75%; } +.zan-col-19 { width: 79.16666666666667%; } +.zan-col-20 { width: 83.33333333333334%; } +.zan-col-21 { width: 87.5%; } +.zan-col-22 { width: 91.66666666666667%; } +.zan-col-23 { width: 95.83333333333334%; } +.zan-col-24 { width: 100%; } +.zan-col-offset-1 { margin-left: 4.166666666666667%; } +.zan-col-offset-2 { margin-left: 8.333333333333334%; } +.zan-col-offset-3 { margin-left: 12.5%; } +.zan-col-offset-4 { margin-left: 16.666666666666668%; } +.zan-col-offset-5 { margin-left: 20.833333333333336%; } +.zan-col-offset-6 { margin-left: 25%; } +.zan-col-offset-7 { margin-left: 29.166666666666668%; } +.zan-col-offset-8 { margin-left: 33.333333333333336%; } +.zan-col-offset-9 { margin-left: 37.5%; } +.zan-col-offset-10 { margin-left: 41.66666666666667%; } +.zan-col-offset-11 { margin-left: 45.833333333333336%; } +.zan-col-offset-12 { margin-left: 50%; } +.zan-col-offset-13 { margin-left: 54.16666666666667%; } +.zan-col-offset-14 { margin-left: 58.333333333333336%; } +.zan-col-offset-15 { margin-left: 62.50000000000001%; } +.zan-col-offset-16 { margin-left: 66.66666666666667%; } +.zan-col-offset-17 { margin-left: 70.83333333333334%; } +.zan-col-offset-18 { margin-left: 75%; } +.zan-col-offset-19 { margin-left: 79.16666666666667%; } +.zan-col-offset-20 { margin-left: 83.33333333333334%; } +.zan-col-offset-21 { margin-left: 87.5%; } +.zan-col-offset-22 { margin-left: 91.66666666666667%; } +.zan-col-offset-23 { margin-left: 95.83333333333334%; } +.zan-col-offset-24 { margin-left: 100%; } diff --git a/packages/zanui-css/src/common/var.css b/packages/zanui-css/src/common/var.css index 2b9eb4803..7f79e0414 100644 --- a/packages/zanui-css/src/common/var.css +++ b/packages/zanui-css/src/common/var.css @@ -20,9 +20,11 @@ $c-background: #f8f8f8; $button-primary-color: $c-white; $button-primary-background-color: $c-green-wx; $button-primary-border-color: #0a0; + $button-default-color: $c-black; $button-default-background-color: $c-white; $button-default-border-color: #bbb; + $button-danger-color: $c-white; $button-danger-background-color: #f44; $button-danger-border-color: #e33; @@ -30,71 +32,3 @@ $button-danger-border-color: #e33; $button-disabled-color: $c-gray-dark; $button-disabled-background-color: $c-gray-light; $button-disabled-border-color: #cacaca; - -:root{ - - /* zan-index - -------------------------- */ - --index-normal: 1; - --index-top: 1000; - --index-popper: 2000; - - /* Link - -------------------------- */ - --link-color: #475669; - --link-hover-color: var(--color-primary); - - /* Border - -------------------------- */ - --border-width-base: 1px; - --border-style-base: solid; - --border-color-base: var(--color-grey); - --border-color-hover: #8492a6; - --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base); - --border-radius-base: 4px; - --border-radius-small: 2px; - --border-radius-circle: 100%; - --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light); - - /* Box-shadow - -------------------------- */ - --box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); - --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12); - - /* Fill - -------------------------- */ - --fill-base: var(--color-white); - - /* Font - -------------------------- */ - --font-size-base: 14px; - --font-color-base: #1f2d3d; - --font-color-disabled-base: #bbb; - - /* Size - -------------------------- */ - --size-base: 14px; - - - /* Disable base - -------------------------- */ - --disabled-fill-base: #EFF2F7; - --disabled-color-base: #bbb; - --disabled-border-base: #D3DCE6; - - /* Icon - -------------------------- */ - --icon-color: #666; - - /* Button - -------------------------- */ - - --button-default-color: #656b79; - --button-default-background-color: #f6f8fa; - --button-default-plain-color: #5a5a5a; - --button-default-box-shadow: 0 0 1px #b8bbbf; - --button-primary-color: #fff; - --button-primary-background-color: #06BF04; - --button-danger-color: #fff; - --button-danger-background-color: #ef4f4f; -} diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css index 3f89bef3c..46fb786c7 100644 --- a/packages/zanui-css/src/index.css +++ b/packages/zanui-css/src/index.css @@ -2,7 +2,6 @@ css组件库入口，组装成css组件库 */ @import './button.css'; -@import './button_group.css'; @import './cell.css'; @import './card.css'; @import './dialog.css'; @@ -19,3 +18,5 @@ @import './steps.css'; @import './tag.css'; @import './checkbox.css'; +@import './col.css'; +@import './row.css'; diff --git a/packages/zanui-css/src/row.css b/packages/zanui-css/src/row.css new file mode 100644 index 000000000..f17e5a1ea --- /dev/null +++ b/packages/zanui-css/src/row.css @@ -0,0 +1,8 @@ +.zan-row { + &:after { + content: ""; + display: table; + clear: both; + } + zoom: 1; +} diff --git a/src/index.js b/src/index.js index 4005790e7..b3c6d9cec 100644 --- a/src/index.js +++ b/src/index.js @@ -22,6 +22,8 @@ import Badge from '../packages/badge/index.js'; import Search from '../packages/search/index.js'; import Step from '../packages/step/index.js'; import ImagePreview from '../packages/image-preview/index.js'; +import Col from '../packages/col/index.js'; +import Row from '../packages/row/index.js'; const install = function(Vue) { if (install.installed) return; @@ -48,6 +50,8 @@ const install = function(Vue) { Vue.component(Search.name, Search); Vue.component(Step.name, Step); Vue.component(ImagePreview.name, ImagePreview); + Vue.component(Col.name, Col); + Vue.component(Row.name, Row); }; // auto install @@ -81,5 +85,7 @@ module.exports = { Badge, Search, Step, - ImagePreview + ImagePreview, + Col, + Row };