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

style: radio support size prop both border or not (#3103)

Browse Source
This commit is contained in:
kooriookami 2021-08-27 20:31:40 +08:00 committed by GitHub
parent 5f87831710
commit a54098393f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 170 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/components/radio/src/radio.vue
View File

@ -2,7 +2,7 @@
<label
class="el-radio"
:class="{
[`el-radio--${radioSize || ''}`]: border && radioSize,
[`el-radio--${radioSize || ''}`]: radioSize,
'is-disabled': isDisabled,
'is-focus': focus,
'is-bordered': border,

30
packages/theme-chalk/src/common/var.scss
View File

@ -224,6 +224,17 @@ $--radio: map.merge(
$--radio
);
$--radio-height: () !default;
$--radio-height: map.merge(
(
'default': 40px,
'medium': 36px,
'small': 32px,
'mini': 28px,
),
$--radio-height
);
$--radio-button: () !default;
$--radio-button: map.merge(
(
@ -263,10 +274,10 @@ $--radio-input-border-color-hover: var(--el-color-primary) !default;
$--radio-bordered-padding: () !default;
$--radio-bordered-padding: map.merge(
(
'default': 12px 20px 0 10px,
'medium': 10px 20px 0 10px,
'small': 8px 15px 0 10px,
'mini': 6px 15px 0 10px,
'default': 0 20px 0 10px,
'medium': 0 20px 0 10px,
'small': 0 15px 0 10px,
'mini': 0 15px 0 10px,
),
$--radio-bordered-padding
);
@ -291,17 +302,6 @@ $--radio-bordered-input-width: map.merge(
$--radio-bordered-input-width
);
$--radio-bordered-height: () !default;
$--radio-bordered-height: map.merge(
(
'default': 40px,
'medium': 36px,
'small': 32px,
'mini': 28px,
),
$--radio-bordered-height
);
/* Select
-------------------------- */
$--select: () !default;

1
packages/theme-chalk/src/radio-button.scss
View File

@ -42,6 +42,7 @@
position: relative;
cursor: pointer;
transition: var(--el-transition-all);
@include utils-user-select(none);
@include button-size(
map.get($--button-padding-vertical, 'default'),

3
packages/theme-chalk/src/radio-group.scss
View File

@ -2,8 +2,5 @@
@import 'common/var';
@include b(radio-group) {
display: inline-block;
line-height: 1;
vertical-align: middle;
font-size: 0;
}

41
packages/theme-chalk/src/radio.scss
View File

@ -13,22 +13,29 @@
@include b(radio) {
color: var(--el-radio-font-color);
font-weight: var(--el-radio-font-weight);
line-height: 1;
position: relative;
cursor: pointer;
display: inline-block;
display: inline-flex;
align-items: center;
white-space: nowrap;
outline: none;
font-size: var(--el-font-size-base);
user-select: none;
margin-right: 30px;
height: map.get($--radio-height, 'default');
@include utils-user-select(none);
@each $size in (medium, small, mini) {
&.#{$namespace}-radio--#{$size} {
height: map.get($--radio-height, $size);
}
}
@include when(bordered) {
padding: map.get($--radio-bordered-padding, 'default');
border-radius: var(--el-border-radius-base);
border: var(--el-border-base);
box-sizing: border-box;
height: map.get($--radio-bordered-height, 'default');
&.is-checked {
border-color: var(--el-color-primary);
@ -42,19 +49,20 @@
& + .#{$namespace}-radio.is-bordered {
margin-left: 10px;
}
}
@each $size in (medium, small, mini) {
&.is-bordered {
padding: map.get($--radio-bordered-padding, $size);
border-radius: var(--el-border-radius-base);
height: map.get($--radio-bordered-height, $size);
.#{$namespace}-radio__label {
font-size: map.get($--button-font-size, $size);
}
.#{$namespace}-radio__inner {
height: map.get($--radio-bordered-input-height, $size);
width: map.get($--radio-bordered-input-width, $size);
@each $size in (medium, small, mini) {
&.#{$namespace}-radio--#{$size} {
padding: map.get($--radio-bordered-padding, $size);
border-radius: var(--el-border-radius-base);
.#{$namespace}-radio__label {
font-size: map.get($--button-font-size, $size);
}
.#{$namespace}-radio__inner {
height: map.get($--radio-bordered-input-height, $size);
width: map.get($--radio-bordered-input-width, $size);
}
}
}
}
@ -67,8 +75,7 @@
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
display: inline-flex;
position: relative;
vertical-align: middle;

32
website/docs/en-US/radio.md
View File

@ -9,15 +9,32 @@ Radio should not have too many options. Otherwise, use the Select component inst
:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
```html
<template>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
<div>
<el-radio v-model="radio1" label="1">Option 1</el-radio>
<el-radio v-model="radio1" label="2">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
<el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
<el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
<el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
</div>
</template>
<script>
export default {
data () {
return {
radio: '1'
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1',
};
}
}
@ -29,7 +46,10 @@ Radio should not have too many options. Otherwise, use the Select component inst
export default defineComponent({
setup() {
return {
radio: ref('1'),
radio1: ref('1'),
radio2: ref('1'),
radio3: ref('1'),
radio4: ref('1'),
}
}
})
@ -250,7 +270,7 @@ model-value / v-model | binding value | string / number / boolean | — | —
label | the value of Radio | string / number / boolean | — | —
disabled | whether Radio is disabled | boolean | — | false
border | whether to add a border around Radio | boolean | — | false
size | size of the Radio, only works when `border` is true | string | medium / small / mini | —
size | size of the Radio | string | medium / small / mini | —
name | native 'name' attribute | string | — | —
### Radio Events
@ -264,7 +284,7 @@ name | native 'name' attribute | string | — | —
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
model-value / v-model | binding value | string / number / boolean | — | —
size | the size of radio buttons or bordered radios | string | medium / small / mini | —
size | the size of radio | string | medium / small / mini | —
disabled | whether the nesting radios are disabled | boolean | — | false
text-color | font color when button is active | string | — | #ffffff |
fill | border and background color when button is active | string | — | #409EFF |

32
website/docs/es/radio.md
View File

@ -7,15 +7,32 @@ El elemento Radio no debe tener muchas opciones. De otra manera, utilice el comp
:::demo Crear un elemento Radio es fácil, solo necesita enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.
```html
<template>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
<div>
<el-radio v-model="radio1" label="1">Option 1</el-radio>
<el-radio v-model="radio1" label="2">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
<el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
<el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
<el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
</div>
</template>
<script>
export default {
data () {
return {
radio: '1'
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1',
};
}
}
@ -27,7 +44,10 @@ El elemento Radio no debe tener muchas opciones. De otra manera, utilice el comp
export default defineComponent({
setup() {
return {
radio: ref('1'),
radio1: ref('1'),
radio2: ref('1'),
radio3: ref('1'),
radio4: ref('1'),
}
}
})
@ -248,7 +268,7 @@ Radio con estilo de botón.
| label | el valor del Radio | string / number / boolean | — | — |
| disabled | si el Radio está deshabilitado | boolean | — | false |
| border | agregar borde alrededor del elemento Radio | boolean | — | false |
| size | tamaño del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | — |
| size | tamaño del elemento Radio | string | medium / small / mini | — |
| name | atributo nativo `name` | string | — | — |
### Atributos de Radio-button
@ -264,7 +284,7 @@ Radio con estilo de botón.
| Atributo | Descripción | Tipo | Valores Aceptado | Valores por defecto |
| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
| model-value / v-model | valor enlazado | string / number / boolean | — | — |
| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — |
| size | the size of radio | string | medium / small / mini | — |
| disabled | si la anidación de radios está deshabilitada | boolean | — | false |
| text-color | color de las letras cuando el botón está activo | string | — | #ffffff |
| fill | color del borde y fondo cuando el botón está activo | string | — | #409EFF |

30
website/docs/fr-FR/radio.md
View File

@ -9,15 +9,32 @@ Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.
:::demo Créer un composant Radio est facile, vous avez juste besoin de lier les `v-model` des options. Chacun équivaut à la valeur de `label` du radio correspondant. Le type de `label` est `String`, `Number` ou `Boolean`.
```html
<template>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
<div>
<el-radio v-model="radio1" label="1">Option 1</el-radio>
<el-radio v-model="radio1" label="2">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
<el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
<el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
<el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
</div>
</template>
<script>
export default {
data () {
return {
radio: '1'
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1',
};
}
}
@ -29,7 +46,10 @@ Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.
export default defineComponent({
setup() {
return {
radio: ref('1'),
radio1: ref('1'),
radio2: ref('1'),
radio3: ref('1'),
radio4: ref('1'),
}
}
})
@ -250,7 +270,7 @@ Des radios affichés comme des boutons standards.
| label | La valeur du radio. | string / number / boolean | — | — |
| disabled | Si le radio est désactivé. | boolean | — | false |
| border | Si une bordure doit être affichée autour du radio. | boolean | — | false |
| size | Taille du radio, ne marche que si `border` est `true`. | string | medium / small / mini | — |
| size | Taille du radio | string | medium / small / mini | — |
| name | Attribut 'name' natif. | string | — | — |
### Évènements de Radio

32
website/docs/jp/radio.md
View File

@ -9,15 +9,32 @@
:::demo radioコンポーネントの作成は簡単で、Radioの `v-model` に変数をバインドするだけです。これは選択したラジオの `label` の値に等しくなります。ラベルの型は `String`, `Number`, `Boolean` のいずれかです。
```html
<template>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
<div>
<el-radio v-model="radio1" label="1">Option 1</el-radio>
<el-radio v-model="radio1" label="2">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
<el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
<el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
<el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
</div>
</template>
<script>
export default {
data () {
return {
radio: '1'
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1',
};
}
}
@ -29,7 +46,10 @@
export default defineComponent({
setup() {
return {
radio: ref('1'),
radio1: ref('1'),
radio2: ref('1'),
radio3: ref('1'),
radio4: ref('1'),
}
}
})
@ -250,7 +270,7 @@ model-value / v-model | バインド値 | string / number / boolean | — | —
label | ラジオの値 | string / number / boolean | — | —
disabled | ラジオが無効になっているかどうか | boolean | — | false
border | ラジオの周りにボーダーを追加するかどうか | boolean | — | false
size | ラジオのサイズ、`border` が真の場合のみ動作します。 | string | medium / small / mini | —
size | ラジオのサイズ | string | medium / small / mini | —
name | ネイティブ 'name' 属性 | string | — | —
### ラジオイベント
@ -264,7 +284,7 @@ name | ネイティブ 'name' 属性 | string | — | —
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
model-value / v-model | バインディング値 | string / number / boolean | — | —
size | ラジオボタンのボーダーもしくはラジオボタンの大きさ | string | medium / small / mini | —
size | ラジオボタンの大きさ | string | medium / small / mini | —
disabled | ネストしたラジオが無効になっているかどうか | boolean | — | false
text-color | ボタンがアクティブなときのフォント色 | string | — | #ffffff |
fill | ボタンがアクティブなときの境界線と背景色 | string | — | #409EFF |

32
website/docs/zh-CN/radio.md
View File

@ -10,15 +10,32 @@
```html
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
<div>
<el-radio v-model="radio1" label="1">备选项1</el-radio>
<el-radio v-model="radio1" label="2">备选项2</el-radio>
</div>
<div>
<el-radio v-model="radio2" label="1" size="medium">备选项1</el-radio>
<el-radio v-model="radio2" label="2" size="medium">备选项2</el-radio>
</div>
<div>
<el-radio v-model="radio3" label="1" size="small">备选项1</el-radio>
<el-radio v-model="radio3" label="2" size="small">备选项2</el-radio>
</div>
<div>
<el-radio v-model="radio4" label="1" size="mini">备选项1</el-radio>
<el-radio v-model="radio4" label="2" size="mini">备选项2</el-radio>
</div>
</template>
<script>
export default {
data () {
return {
radio: '1'
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1',
};
}
}
@ -30,7 +47,10 @@
export default defineComponent({
setup() {
return {
radio: ref('1'),
radio1: ref('1'),
radio2: ref('1'),
radio3: ref('1'),
radio4: ref('1'),
}
}
})
@ -252,7 +272,7 @@
| label | Radio 的 value | string / number / boolean | — | — |
| disabled | 是否禁用 | boolean | — | false |
| border | 是否显示边框 | boolean | — | false |
| size | Radio 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
| size | Radio 的尺寸 | string | medium / small / mini | — |
| name | 原生 name 属性 | string | — | — |
### Radio Events
@ -264,7 +284,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| model-value / v-model | 绑定值 | string / number / boolean | — | — |
| size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
| size | 单选框组尺寸 | string | medium / small / mini | — |
| disabled | 是否禁用 | boolean | — | false |
| text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |