From e918c52fd07160114ef534f39d5f1f5193d8ad93 Mon Sep 17 00:00:00 2001
From: niunai <colonD.wny@gmail.com>
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 @@
</div>
```
+### loading按钮
+
+表示loading状态
+
+```html
+<div class="zan-button-group">
+ <div class="zan-button-1">
+ <zan-button type="primary" loading>111</zan-button>
+ </div>
+ <div class="zan-button-1">
+ <zan-button loading>222</zan-button>
+ </div>
+</div>
+```
+
### 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 @@
<div class="page-button">
<h1 class="page-title">Button</h1>
<h2 class="page-sub-title">按钮功能</h2>
- <div class="zan-button-group">
- <div class="zan-button-1">
- <zan-button>default</zan-button>
- </div>
- <div class="zan-button-1">
- <zan-button type="primary">primary</zan-button>
- </div>
- <div class="zan-button-1">
- <zan-button type="danger">danger</zan-button>
- </div>
- </div>
+ <zan-row>
+ <zan-col span="24">
+ <zan-button block>default</zan-button>
+ </zan-col>
+ <zan-col span="24">
+ <zan-button type="primary" block>primary</zan-button>
+ </zan-col>
+ <zan-col span="24">
+ <zan-button type="danger" block>danger</zan-button>
+ </zan-col>
+ </zan-row>
<h2 class="page-sub-title">禁用状态</h2>
- <div class="zan-button-group">
- <div class="zan-button-1">
- <zan-button disabled>diabled</zan-button>
- </div>
- </div>
+ <zan-row>
+ <zan-col span="24">
+ <zan-button disabled block>diabled</zan-button>
+ </zan-col>
+ </zan-row>
<h2 class="page-sub-title">按钮尺寸</h2>
- <div class="zan-button-group">
- <div class="zan-button-1">
+ <zan-row>
+ <zan-col span="24">
<zan-button size="large">large</zan-button>
- </div>
- </div>
- <div class="zan-button-group">
- <div class="zan-button-3">
- <zan-button type="primary">normal</zan-button>
- </div>
- <div class="zan-button-3">
- <zan-button size="small">small</zan-button>
- </div>
- <div class="zan-button-3">
- <zan-button size="mini">mini</zan-button>
- </div>
- </div>
+ </zan-col>
+ </zan-row>
+ <zan-row gutter="10">
+ <zan-col span="8">
+ <zan-button type="primary" block>normal</zan-button>
+ </zan-col>
+ <zan-col span="8">
+ <zan-button size="small" block>small</zan-button>
+ </zan-col>
+ <zan-col span="8">
+ <zan-button size="mini" block>mini</zan-button>
+ </zan-col>
+ </zan-row>
<h2 class="page-sub-title">自定义按钮标签</h2>
- <div class="zan-button-group">
- <div class="zan-button-1">
+ <zan-row>
+ <zan-col span="24">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
- </div>
- </div>
+ </zan-col>
+ </zan-row>
+
+ <h2 class="page-sub-title">loading</h2>
+ <zan-row>
+ <zan-col span="24">
+ <zan-button type="primary" loading block>loading</zan-button>
+ </zan-col>
+ <zan-col span="24">
+ <zan-button loading block></zan-button>
+ </zan-col>
+ </zan-row>
<h2 class="page-sub-title">button group</h2>
- <div class="zan-button-group">
+ <div class="button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
@@ -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;
+ }
</style>
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 ? <i class="zan-icon-loading"></i> : null
+ loading ?
+ <zan-loading
+ class="zan-button__icon-loading"
+ type="circle"
+ color={type === 'default' ? 'black' : 'white'}>
+ </zan-loading> :
+ null
}
- <span class="zan-button-text">{this.$slots.default}</span>
+ <span class="zan-button__text">{this.$slots.default}</span>
</Tag>
);
}
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 @@
+<template>
+ <div
+ :class="[
+ `${prefix}-col`,
+ {
+ [`${prefix}-col-${span}`]: span,
+ [`${prefix}-col-offset-${offset}`]: offset,
+ }
+ ]"
+ :style="style">
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+ export default {
+ name: 'zan-col',
+ props: {
+ span: [Number, String],
+ offset: [Number, String],
+ prefix: {
+ type: String,
+ default: 'zan'
+ }
+ },
+ computed: {
+ gutter() {
+ return Number(this.$parent.gutter);
+ },
+ style() {
+ const padding = `${this.gutter / 2}px`;
+ return this.gutter ?
+ { paddingLeft: padding, paddingRight: padding } :
+ null;
+ }
+ }
+ };
+</script>
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 @@
+<template>
+ <div
+ :class="`${prefix}-row`"
+ :style="style">
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+ export default {
+ name: 'zan-row',
+ props: {
+ prefix: {
+ type: String,
+ default: 'zan'
+ },
+ gutter: [Number, String]
+ },
+ computed: {
+ style() {
+ const gutter = Number(this.gutter);
+ const margin = `-${gutter / 2}px`;
+ return gutter ?
+ { marginLeft: margin, marginRight: margin } :
+ {};
+ }
+ }
+ };
+</script>
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
};