mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-21 02:50:11 +08:00
kooriookami
Herrington Darkholme
parent
c6ccdbec8f
commit
b8dccdc884
@ -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,
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-row class="row-bg">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-row class="row-bg" justify="center">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-row class="row-bg" justify="end">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-row class="row-bg" justify="space-between">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-row class="row-bg" justify="space-around">
|
||||
<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>
|
||||
@ -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 |
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-row class="row-bg">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-row class="row-bg" justify="center">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-row class="row-bg" justify="end">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-row class="row-bg" justify="space-between">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-row class="row-bg" justify="space-around">
|
||||
<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>
|
||||
@ -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 |
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-row class="row-bg">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-row class="row-bg" justify="center">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-row class="row-bg" justify="end">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-row class="row-bg" justify="space-between">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-row class="row-bg" justify="space-around">
|
||||
<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>
|
||||
@ -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 |
|
||||
|
||||
@ -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` などのあらゆる種類の入力項目が含まれます。
|
||||
|
||||
@ -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
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-row class="row-bg">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-row class="row-bg" justify="center">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-row class="row-bg" justify="end">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-row class="row-bg" justify="space-between">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-row class="row-bg" justify="space-around">
|
||||
<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>
|
||||
@ -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 |
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
|
||||
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
|
||||
|
||||
:::tip
|
||||
组件升级采用了 flex 布局，以替代旧版本的 float 布局。
|
||||
:::
|
||||
|
||||
### 典型表单
|
||||
|
||||
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
|
||||
|
||||
@ -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
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-row class="row-bg">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-row class="row-bg" justify="center">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-row class="row-bg" justify="end">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-row class="row-bg" justify="space-between">
|
||||
<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>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-row class="row-bg" justify="space-around">
|
||||
<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>
|
||||
@ -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 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user