Explorar o código

Row: fix align top (#20963)

好多大米 %!s(int64=4) %!d(string=hai) anos
pai
achega
5ba0f1c219

+ 1 - 1
examples/docs/en-US/layout.md

@@ -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

+ 1 - 1
examples/docs/es/layout.md

@@ -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 

+ 1 - 1
examples/docs/fr-FR/layout.md

@@ -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

+ 1 - 1
examples/docs/zh-CN/layout.md

@@ -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

+ 2 - 5
packages/row/src/row.js

@@ -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

+ 4 - 0
packages/theme-chalk/src/row.scss

@@ -27,6 +27,10 @@
       justify-content: space-around;
     }
 
+    @include when(align-top) {
+      align-items: flex-start;
+    }
+
     @include when(align-middle) {
       align-items: center;
     }