mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [el-row] enhancement for supporting space-evenly (#6223)

Browse Source 
Co-authored-by: gp5251 <gp5251@qq.com>
This commit is contained in:
paul 2022-02-23 10:46:06 +08:00 committed by GitHub
parent 496398ce38
commit f68aa3cf05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/en-US/component/layout.md
View File

@ -60,7 +60,7 @@ layout/column-offset
Default use the flex layout to make flexible alignment of columns.
:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between, space-around or space-evenly.
layout/alignment
@ -103,12 +103,12 @@ The classes are:
## Row Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------- | ------ | ------------------------------------------- | ------- |
| gutter | grid spacing | number | — | 0 |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
| tag | custom element tag | string | \* | div |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------- | ------ | ---------------------------------------------------------- | ------- |
| gutter | grid spacing | number | — | 0 |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between/spacing-evenly | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
| tag | custom element tag | string | \* | div |
## Row Slots

5
docs/examples/layout/alignment.vue
View File

@ -24,6 +24,11 @@
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row class="row-bg" justify="space-evenly">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</template>
<style>

9
packages/components/row/src/row.ts
View File

@ -14,7 +14,14 @@ export const rowProps = buildProps({
},
justify: {
type: String,
values: ['start', 'center', 'end', 'space-around', 'space-between'],
values: [
'start',
'center',
'end',
'space-around',
'space-between',
'space-evenly',
],
default: 'start',
},
align: {

4
packages/theme-chalk/src/row.scss
View File

@ -20,7 +20,9 @@
@include when(justify-space-around) {
justify-content: space-around;
}
@include when(justify-space-evenly) {
justify-content: space-evenly;
}
@include when(align-middle) {
align-items: center;
}