From c368e36aea8dd97e4f45c5285849b86ed1221785 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 19 Jun 2018 22:54:02 +0800 Subject: [PATCH] [Improvement] Layout: support flex (#1305) --- .../test/__snapshots__/demo.spec.js.snap | 4 +- packages/col/demo/index.vue | 38 +++- packages/col/en-US.md | 46 ++++- packages/col/index.vue | 14 +- .../col/test/__snapshots__/demo.spec.js.snap | 45 ++++- packages/col/zh-CN.md | 45 +++++ .../icon/test/__snapshots__/demo.spec.js.snap | 190 +++++++++--------- packages/row/index.vue | 23 ++- packages/vant-css/src/col.css | 4 +- packages/vant-css/src/row.css | 32 +++ 10 files changed, 321 insertions(+), 120 deletions(-) diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap index 7cf19b217..b3e35085f 100644 --- a/packages/button/test/__snapshots__/demo.spec.js.snap +++ b/packages/button/test/__snapshots__/demo.spec.js.snap @@ -41,11 +41,11 @@ exports[`renders demo correctly 1`] = `
-
+
-
+
diff --git a/packages/col/demo/index.vue b/packages/col/demo/index.vue index 905c33865..23460ce33 100644 --- a/packages/col/demo/index.vue +++ b/packages/col/demo/index.vue @@ -24,6 +24,38 @@ span: 8 + + + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + + @@ -31,10 +63,12 @@ export default { i18n: { 'zh-CN': { - title2: '在列元素之间增加间距' + title2: '在列元素之间增加间距', + title3: 'Flex 布局' }, 'en-US': { - title2: 'Column Spacing' + title2: 'Column Spacing', + title3: 'Flex Layout' } } }; diff --git a/packages/col/en-US.md b/packages/col/en-US.md index c79f0bd80..6ce7e179f 100644 --- a/packages/col/en-US.md +++ b/packages/col/en-US.md @@ -48,6 +48,42 @@ Set grid spacing using `gutter` attribute. The default value is 0 ``` +#### Flex Layout + +Setting `type` to `flex` to enable flex layout + +```html + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + + + + span: 6 + span: 6 + span: 6 + +``` + ### API @@ -55,11 +91,15 @@ Set grid spacing using `gutter` attribute. The default value is 0 | Attribute | Description | Type | Default | |-----------|-----------|-----------|-------------| -| gutter | grid spacing（px） | `String | Number` | - | +| gutter | Grid spacing（px） | `String | Number` | - | +| tag | Custom element tag | `String` | `div` | +| justify | Flex main axis，can be set to end/center/space-around/space-between | `String` | `start` | +| align | Flex cross axis, be set to center/bottom | `String` | `top` | #### Column | Attribute | Description | Type | Default | |-----------|-----------|-----------|-------------| -| span | number of column the grid spans | `String | Number` | - | -| offset | number of spacing on the left side of the grid | `String | Number` | - | +| span | Number of column the grid spans | `String | Number` | - | +| offset | Number of spacing on the left side of the grid | `String | Number` | - | +| tag | Custom element tag | `String` | `div` | diff --git a/packages/col/index.vue b/packages/col/index.vue index 55b123363..82ac612e5 100644 --- a/packages/col/index.vue +++ b/packages/col/index.vue @@ -1,11 +1,11 @@