alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(Layout): enable flex by default, remove type prop

Browse Source
This commit is contained in:
chenjiahan
2020-10-06 17:29:02 +08:00
parent e9c2821235
commit f7a1208a18
6 changed files with 27 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/col/README.md
+5 -14
View File
@@ -51,36 +51,28 @@ Set grid spacing using `gutter` attribute. The default value is 0.
</van-row>
```
### Flex Layout
Setting `type` to `flex` to enable flex layout.
### Justify Content
```html
<van-row type="flex">
<van-row justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="center">
<van-row justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="end">
<van-row justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-around">
<van-row justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
@@ -93,7 +85,6 @@ Setting `type` to `flex` to enable flex layout.
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| type | Layout type, can be set to `flex` | _string_ | - |
| gutter | Grid spacing（px） | _number \| string_ | - |
| tag | Custom element tag | _string_ | `div` |
| justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` |
src/col/README.zh-CN.md
+8 -16
View File
@@ -50,41 +50,34 @@ Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性
</van-row>
```
### Flex 布局
### 对齐方式
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐。
通过 `justify` 属性可以设置主轴上内容的对齐方式，等价于 flex 布局中的 `justify-content` 属性。
```html
<!-- 左对齐 -->
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 居中 -->
<van-row type="flex" justify="center">
<van-row justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 右对齐 -->
<van-row type="flex" justify="end">
<van-row justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 两端对齐 -->
<van-row type="flex" justify="space-between">
<van-row justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 每个元素的两侧间隔相等 -->
<van-row type="flex" justify="space-around">
<van-row justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
@@ -97,11 +90,10 @@ Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 布局方式，可选值为`flex` | _string_ | - |
| gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - |
| tag | 自定义元素标签 | _string_ | `div` |
| justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
| justify | 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
| align | 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
### Col Props
src/col/demo/index.vue
+7 -13
View File
@@ -29,32 +29,26 @@
</van-row>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('title3')">
<van-row type="flex">
<demo-block v-if="!isWeapp" :title="t('justify')">
<van-row justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="center">
<van-row justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="end">
<van-row justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-around">
<van-row justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
@@ -68,11 +62,11 @@ export default {
i18n: {
'zh-CN': {
title2: '在列元素之间增加间距',
title3: 'Flex 布局',
justify: '对齐方式',
},
'en-US': {
title2: 'Column Spacing',
title3: 'Flex Layout',
justify: 'Justify Content',
},
},
};
src/col/index.less
+3 -2
View File
@@ -1,7 +1,7 @@
@import '../style/var';
.van-col {
float: left;
display: block;
box-sizing: border-box;
min-height: 1px;
}
@@ -9,7 +9,8 @@
.generate-col(24);
.generate-col(@n, @i: 1) when (@i =< @n) {
.van-col--@{i} {
width: @i * 100% / 24;
flex: 0 0 @i * 100% / 24;
max-width: @i * 100% / 24;
}
.van-col--offset-@{i} {