blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-07 21:19:45 +08:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/col/README.md
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` |

24
src/col/README.zh-CN.md
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

20
src/col/demo/index.vue
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',
},
},
};

5
src/col/index.less
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} {

14
src/row/index.less
View File

@ -1,19 +1,7 @@
@import '../style/var';
.van-row {
&::after {
display: table;
clear: both;
content: '';
}
&--flex {
display: flex;
&::after {
display: none;
}
}
display: flex;
&--justify-center {
justify-content: center;

10
src/row/index.tsx
View File

@ -23,7 +23,6 @@ export type RowJustify =
export default createComponent({
props: {
type: String as PropType<'flex'>,
align: String as PropType<RowAlign>,
justify: String as PropType<RowJustify>,
tag: {
@ -87,15 +86,12 @@ export default createComponent({
linkChildren({ spaces });
return () => {
const { tag, type, align, justify } = props;
const flex = type === 'flex';
const { tag, align, justify } = props;
return (
<tag
class={bem({
flex,
[`align-${align}`]: flex && align,
[`justify-${justify}`]: flex && justify,
[`align-${align}`]: align,
[`justify-${justify}`]: justify,
})}
>
{slots.default?.()}