diff --git a/packages/col/src/row.ts b/packages/col/src/row.ts index efec6d1e1e..d67f5afc05 100644 --- a/packages/col/src/row.ts +++ b/packages/col/src/row.ts @@ -11,10 +11,6 @@ export default defineComponent({ type: Number, default: 0, }, - type: { - type: String, - default: '', - }, justify: { type: String, default: 'start', @@ -50,7 +46,6 @@ export default defineComponent({ 'el-row', props.justify !== 'start' ? `is-justify-${props.justify}` : '', props.align !== 'top' ? `is-align-${props.align}` : '', - props.type === 'flex' ? 'el-row--flex' : '', ], style: style.value, }, diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss index 84a09d5713..59a868eeec 100644 --- a/packages/theme-chalk/src/form.scss +++ b/packages/theme-chalk/src/form.scss @@ -38,7 +38,6 @@ @include b(form-item) { display: flex; margin-bottom: 22px; - @include utils-clearfix; & .#{$namespace}-form-item { margin-bottom: 0; @@ -99,7 +98,6 @@ line-height: 40px; position: relative; font-size: 14px; - @include utils-clearfix; .#{$namespace}-input-group { vertical-align: top; diff --git a/packages/theme-chalk/src/row.scss b/packages/theme-chalk/src/row.scss index a25763b537..a60c966586 100644 --- a/packages/theme-chalk/src/row.scss +++ b/packages/theme-chalk/src/row.scss @@ -7,35 +7,24 @@ flex-wrap: wrap; position: relative; box-sizing: border-box; - @include utils-clearfix; - @include m(flex) { - display: flex; - &:before, - &:after { - display: none; - } - - @include when(justify-center) { - justify-content: center; - } - @include when(justify-end) { - justify-content: flex-end; - } - @include when(justify-space-between) { - justify-content: space-between; - } - @include when(justify-space-around) { - justify-content: space-around; - } - - @include when(align-middle) { - align-items: center; - } - @include when(align-bottom) { - align-items: flex-end; - } + @include when(justify-center) { + justify-content: center; + } + @include when(justify-end) { + justify-content: flex-end; + } + @include when(justify-space-between) { + justify-content: space-between; + } + @include when(justify-space-around) { + justify-content: space-around; } + @include when(align-middle) { + align-items: center; + } + @include when(align-bottom) { + align-items: flex-end; + } } - diff --git a/website/docs/en-US/form.md b/website/docs/en-US/form.md index 725cfb5313..ff74c726ad 100644 --- a/website/docs/en-US/form.md +++ b/website/docs/en-US/form.md @@ -2,6 +2,10 @@ Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data. +:::tip +The component has been upgraded with a flex layout to replace the old float layout. +::: + ### Basic form It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`. diff --git a/website/docs/en-US/layout.md b/website/docs/en-US/layout.md index 94760d1b20..68ef4a4d99 100644 --- a/website/docs/en-US/layout.md +++ b/website/docs/en-US/layout.md @@ -2,6 +2,12 @@ Quickly and easily create layouts with the basic 24-column. +:::tip +The component uses flex layout by default, no need to set `type="flex"` manually. + +Please note that the parent container should avoid using `inline` related styles, which will cause the component to not fill up its width. +::: + ### Basic layout Create basic grid layout using columns. @@ -215,31 +221,31 @@ You can specify column offsets. ### Alignment -Use the flex layout to make flexible alignment of columns. +Default use the flex layout to make flexible alignment of columns. -:::demo You can enable flex layout by setting `type` attribute to 'flex', and 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 or space-around. ```html - +
- +
- +
- +
- +
@@ -335,7 +341,6 @@ The classes are: | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | 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 | | tag | custom element tag | string | * | div | diff --git a/website/docs/es/form.md b/website/docs/es/form.md index 5efa5b421d..23acf6a492 100644 --- a/website/docs/es/form.md +++ b/website/docs/es/form.md @@ -2,6 +2,10 @@ Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos. +:::tip +The component has been upgraded with a flex layout to replace the old float layout. +::: + ### Form básico Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`. diff --git a/website/docs/es/layout.md b/website/docs/es/layout.md index 2843659a92..8bfb04c826 100644 --- a/website/docs/es/layout.md +++ b/website/docs/es/layout.md @@ -2,6 +2,12 @@ Rápido y facilmente crea un layout básico con 24 columnas. +:::tip +The component uses flex layout by default, no need to set `type="flex"` manually. + +Please note that the parent container should avoid using `inline` related styles, which will cause the component to not fill up its width. +::: + ### Layout básico Crea un layout básico usando columnas. @@ -215,31 +221,31 @@ Puedes especificar offsets para las columnas. ### Alineación -Usa flex layout para un alineamiento flexible de columnas. +Default use the flex layout to make flexible alignment of columns. -:::demo Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around. +:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around. ```html - +
- +
- +
- +
- +
@@ -336,7 +342,6 @@ Las clases son: | Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | | --------- | ---------------------------------------- | ------ | ---------------------------------------- | ----------------- | | 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 | | tag | tag de elemento propio | string | * | div | diff --git a/website/docs/fr-FR/form.md b/website/docs/fr-FR/form.md index 4df5115c3b..eda73bbe99 100644 --- a/website/docs/fr-FR/form.md +++ b/website/docs/fr-FR/form.md @@ -2,6 +2,10 @@ Un formulaire est constitué des éléments `input`, `radio`, `select`, `checkbox`, etc. Il sert principalement à collecter, vérifier et soumettre des données. +:::tip +The component has been upgraded with a flex layout to replace the old float layout. +::: + ### Formulaire de base Il peut contenir toutes sortes de champs tels que `input`, `select`, `radio` et `checkbox`. diff --git a/website/docs/fr-FR/layout.md b/website/docs/fr-FR/layout.md index 8c45801fa2..c535f33229 100644 --- a/website/docs/fr-FR/layout.md +++ b/website/docs/fr-FR/layout.md @@ -2,6 +2,12 @@ Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes. +:::tip +The component uses flex layout by default, no need to set `type="flex"` manually. + +Please note that the parent container should avoid using `inline` related styles, which will cause the component to not fill up its width. +::: + ### Mise en page basique Créez une grille de mise en page basique grâce aux colonnes. @@ -215,31 +221,31 @@ Vous pouvez spécifier un décalage pour les colonnes. ### Alignement -Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible. +Default use the flex layout to make flexible alignment of columns. -:::demo Vous pouvez activer la mise en page flex en réglant l'attribut `type` à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut `justify` définit à 'start', 'center', 'end', 'space-between' ou 'space-around'. +:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around. ```html - +
- +
- +
- +
- +
@@ -336,7 +342,6 @@ Ces classes sont: | Attribut | Description | Type | Valeurs acceptées | Défaut | |---------- |-------------- |---------- |-------------------------------- |-------- | | 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 | | tag | Élément de tag personnalisé. | string | * | div | diff --git a/website/docs/jp/form.md b/website/docs/jp/form.md index 78fb282a55..3447a93048 100644 --- a/website/docs/jp/form.md +++ b/website/docs/jp/form.md @@ -2,6 +2,10 @@ フォームは `input`, `radio`, `select`, `checkbox` などから構成されています。フォームを使うと、データを収集したり、検証したり、送信したりすることができます。 +:::tip +The component has been upgraded with a flex layout to replace the old float layout. +::: + ### 基本フォーム これには、`input`, `select`, `radio`, `checkbox` などのあらゆる種類の入力項目が含まれます。 diff --git a/website/docs/jp/layout.md b/website/docs/jp/layout.md index 44446f29d9..760a27f8fa 100644 --- a/website/docs/jp/layout.md +++ b/website/docs/jp/layout.md @@ -2,6 +2,12 @@ 24カラムを基本レイアウトで、簡単、素早く作れます。 +:::tip +The component uses flex layout by default, no need to set `type="flex"` manually. + +Please note that the parent container should avoid using `inline` related styles, which will cause the component to not fill up its width. +::: + ### ベーシックレイアウト カラムを用いて、ベーシックグリッドレイアウトを作ります。 @@ -215,31 +221,31 @@ ### 配置 -フレックスレイアウトを使用して、列の配置を柔軟に行うことができます。 +Default use the flex layout to make flexible alignment of columns. -:::demo `type` 属性に `flex` を設定することでフレックスレイアウトを有効にし、`justify` 属性に start, center, end, space-between, space-around を設定することで子要素のレイアウトを定義することができます。 +:::demo You can define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around. ```html - +
- +
- +
- +
- +
@@ -335,7 +341,6 @@ import 'element-plus/lib/theme-chalk/display.css'; | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | gutter | グリッド間隔 | number | — | 0 | -| type | レイアウトモード、フレックスを使用することができます、モダンなブラウザで動作します。 | string | — | — | | justify | フレックスレイアウトの水平配置 | string | start/end/center/space-around/space-between | start | | align | フレックスレイアウトの垂直配置 | string | top/middle/bottom | top | | tag | カスタムエレメントタグ | string | * | div | diff --git a/website/docs/zh-CN/form.md b/website/docs/zh-CN/form.md index 6b651626ec..53b23a8a13 100644 --- a/website/docs/zh-CN/form.md +++ b/website/docs/zh-CN/form.md @@ -2,6 +2,10 @@ 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 +:::tip +组件升级采用了 flex 布局，以替代旧版本的 float 布局。 +::: + ### 典型表单 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。 diff --git a/website/docs/zh-CN/layout.md b/website/docs/zh-CN/layout.md index 97752cbbc6..f226ada694 100644 --- a/website/docs/zh-CN/layout.md +++ b/website/docs/zh-CN/layout.md @@ -2,6 +2,12 @@ 通过基础的 24 分栏，迅速简便地创建布局。 +:::tip +组件默认采用了 flex 布局，无需手动设置 `type="flex"`。 + +请注意父容器避免使用 `inline` 相关样式，会导致组件宽度不能撑满。 +::: + ### 基础布局 使用单一分栏创建基础的栅格布局。 @@ -214,31 +220,31 @@ ### 对齐方式 -通过 `flex` 布局来对分栏进行灵活的对齐。 +默认使用 `flex` 布局来对分栏进行灵活的对齐。 -:::demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 +:::demo 可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 ```html - +
- +
- +
- +
- +
@@ -334,7 +340,6 @@ import 'element-plus/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 | | tag | 自定义元素标签 | string | * | div |