确认付款
确认收货
取消订单
@@ -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
};