mirror of https://github.com/ElemeFE/element
Row: fix align top (#20963)
parent
e1990a70d3
commit
5ba0f1c219
|
@ -337,7 +337,7 @@ The classes are:
|
|||
| gutter | grid spacing | number | — | 0 |
|
||||
| type | layout mode, you can use flex, works in modern browsers | string | — | — |
|
||||
| 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 |
|
||||
| align | vertical alignment of flex layout | string | top/middle/bottom | — |
|
||||
| tag | custom element tag | string | * | div |
|
||||
|
||||
### Col Attributes
|
||||
|
|
|
@ -338,7 +338,7 @@ Las clases son:
|
|||
| gutter | espaciado de la grilla | number | — | 0 |
|
||||
| type | modo del layout , puedes usar flex, funciona en navegadores modernos | string | — | — |
|
||||
| justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start |
|
||||
| align | alineación vertical del layout flex | string | top/middle/bottom | top |
|
||||
| align | alineación vertical del layout flex | string | top/middle/bottom | — |
|
||||
| tag | tag de elemento propio | string | * | div |
|
||||
|
||||
### Atributos Col
|
||||
|
|
|
@ -338,7 +338,7 @@ Ces classes sont:
|
|||
| gutter | Espacement de la grille. | number | — | 0 |
|
||||
| type | Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes. | string | — | — |
|
||||
| justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start |
|
||||
| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | top |
|
||||
| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | — |
|
||||
| tag | Élément de tag personnalisé. | string | * | div |
|
||||
|
||||
### Attributs des colonnes
|
||||
|
|
|
@ -336,7 +336,7 @@ import 'element-ui/lib/theme-chalk/display.css';
|
|||
| gutter | 栅格间隔 | number | — | 0 |
|
||||
| type | 布局模式,可选 flex,现代浏览器下有效 | string | — | — |
|
||||
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
|
||||
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
|
||||
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | — |
|
||||
| tag | 自定义元素标签 | string | * | div |
|
||||
|
||||
### Col Attributes
|
||||
|
|
|
@ -14,10 +14,7 @@ export default {
|
|||
type: String,
|
||||
default: 'start'
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
}
|
||||
align: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
@ -38,7 +35,7 @@ export default {
|
|||
class: [
|
||||
'el-row',
|
||||
this.justify !== 'start' ? `is-justify-${this.justify}` : '',
|
||||
this.align !== 'top' ? `is-align-${this.align}` : '',
|
||||
this.align ? `is-align-${this.align}` : '',
|
||||
{ 'el-row--flex': this.type === 'flex' }
|
||||
],
|
||||
style: this.style
|
||||
|
|
|
@ -27,6 +27,10 @@
|
|||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@include when(align-top) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@include when(align-middle) {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue