mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [radio & checkbox] add using value tip and perf examples (#17051)

Browse Source 
docs: [radio & checkbox] add using `value` tip and perf examples
This commit is contained in:
sea 2024-07-13 09:59:31 +08:00 committed by GitHub
parent 5d6051d78e
commit 2082247ebb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/en-US/component/checkbox.md
View File

@ -5,15 +5,29 @@ lang: en-US
# Checkbox
A group of options for multiple choices.
:::warning
`label` act as `value` has been **deprecated**, `label` is used only as display text, this action **will be** removed in ^(3.0.0), consider switching to new API.
New API `value` has been added in ^(2.6.0), you can use `value` API to set the value of Checkbox.
:::
:::tip
New API `value` has been added in ^(2.6.0), the examples in the document all use the `value`.
If you are using a version **less than** ^(2.6.0) and using `checkbox-group`, please refer to:
:::
A group of options for multiple choices.
``` vue
<el-checkbox-group v-model="checkList">
<!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ -->
<el-checkbox label="Option 1" value="Value 1" />
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
<el-checkbox label="Option 2 & Value 2" />
</el-checkbox-group>
```
## Basic usage

18
docs/en-US/component/radio.md
View File

@ -5,15 +5,29 @@ lang: en-US
# Radio
Single selection among multiple options.
:::warning
`label` act as `value` has been **deprecated**, `label` is used only as display text, this action **will be** removed in ^(3.0.0), consider switching to new API.
New API `value` has been added in ^(2.6.0), you can use `value` API to set the value of Radio.
:::
:::tip
New API `value` has been added in ^(2.6.0), the examples in the document all use the `value`.
If you are using a version **less than** ^(2.6.0), please refer to:
:::
Single selection among multiple options.
``` vue
<el-radio-group v-model="radio1">
<!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
<el-radio value="Value 1">Option 1</el-radio>
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
<el-radio label="Label 2 & Value 2">Option 2</el-radio>
</el-radio-group>
```
## Basic usage

10
docs/examples/checkbox/basic.vue
View File

@ -3,18 +3,14 @@
<el-checkbox v-model="checked1" label="Option 1" size="large" />
<el-checkbox v-model="checked2" label="Option 2" size="large" />
</div>
<div>
<div class="my-2">
<el-checkbox v-model="checked3" label="Option 1" />
<el-checkbox v-model="checked4" label="Option 2" />
</div>
<div>
<div class="mt-2">
<el-checkbox v-model="checked5" label="Option 1" size="small" />
<el-checkbox v-model="checked6" label="Option 2" size="small" />
</div>
<div>
<el-checkbox v-model="checked7" label="Option 1" size="small" disabled />
<el-checkbox v-model="checked8" label="Option 2" size="small" disabled />
</div>
</template>
<script lang="ts" setup>
@ -26,6 +22,4 @@ const checked3 = ref(false)
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)
const checked7 = ref(false)
const checked8 = ref(false)
</script>

18
docs/examples/radio/basic-usage.vue
View File

@ -1,24 +1,18 @@
<template>
<div class="mb-2 flex items-center text-sm">
<el-radio-group v-model="radio1" class="ml-4">
<div class="mb-2 ml-4">
<el-radio-group v-model="radio1">
<el-radio value="1" size="large">Option 1</el-radio>
<el-radio value="2" size="large">Option 2</el-radio>
</el-radio-group>
</div>
<div class="my-2 flex items-center text-sm">
<el-radio-group v-model="radio2" class="ml-4">
<div class="my-2 ml-4">
<el-radio-group v-model="radio2">
<el-radio value="1">Option 1</el-radio>
<el-radio value="2">Option 2</el-radio>
</el-radio-group>
</div>
<div class="my-4 flex items-center text-sm">
<el-radio-group v-model="radio3" class="ml-4">
<el-radio value="1" size="small">Option 1</el-radio>
<el-radio value="2" size="small">Option 2</el-radio>
</el-radio-group>
</div>
<div class="mb-2 flex items-center text-sm">
<el-radio-group v-model="radio3" disabled class="ml-4">
<div class="my-4 ml-4">
<el-radio-group v-model="radio3">
<el-radio value="1" size="small">Option 1</el-radio>
<el-radio value="2" size="small">Option 2</el-radio>
</el-radio-group>