javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: [radio] add use fill & text-color example (#20686)

Browse Source 
* docs: [radio] add use fill & text-color example

* chore: add file
This commit is contained in:
btea
2025-05-09 14:30:02 +08:00
committed by GitHub
parent 5490bedf85
commit 6f0f4eae03
2 changed files with 60 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,6 +71,16 @@ radio/button-style
:::
## Button style
Radio with button styles.
:::demo You can set the style of the button when it is active by using `fill` and `text-color`.
radio/button-fill-textcolor
:::
## With borders
:::demo The `border` attribute adds a border to Radios.
@@ -109,18 +119,16 @@ radio/with-borders
### RadioGroup Attributes
| Name | Description | Type | Default |
| --------------------------- | ------------------------------------------------- | ---------------------------------- | ------- |
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
| size | the size of radio buttons or bordered radios | ^[string] | default |
| 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 |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in RadioGroup | ^[string] | — |
| name | native `name` attribute | ^[string] | — |
| id | native `id` attribute | ^[string] | — |
| label ^(a11y) ^(deprecated) | same as `aria-label` in RadioGroup | ^[string] | — |
| Name | Description | Type | Default |
| --------------------------- | -------------------------------------------- | ---------------------------------- | ------- |
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
| size | the size of radio buttons or bordered radios | ^[string] | default |
| disabled | whether the nesting radios are disabled | ^[boolean] | false |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in RadioGroup | ^[string] | — |
| name | native `name` attribute | ^[string] | — |
| id | native `id` attribute | ^[string] | — |
| label ^(a11y) ^(deprecated) | same as `aria-label` in RadioGroup | ^[string] | — |
### RadioGroup Events
@@ -144,6 +152,8 @@ radio/with-borders
| label | the label of Radio. If there's no `value`, `label` will act as `value` | ^[string] / ^[number] / ^[boolean] | — |
| disabled | whether Radio is disabled | ^[boolean] | false |
| name | native 'name' attribute | ^[string] | — |
| text-color | font color when button is active | ^[string] | #ffffff |
| fill | border and background color when button is active | ^[string] | #409eff |
### RadioButton Slots

38
docs/examples/radio/button-fill-textcolor.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div>
<el-radio-group v-model="radio1" size="large" fill="#6cf">
<el-radio-button label="New York" value="New York" />
<el-radio-button label="Washington" value="Washington" />
<el-radio-button label="Los Angeles" value="Los Angeles" />
<el-radio-button label="Chicago" value="Chicago" />
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group
v-model="radio2"
text-color="#626aef"
fill="rgb(239, 240, 253)"
>
<el-radio-button label="New York" value="New York" />
<el-radio-button label="Washington" value="Washington" />
<el-radio-button label="Los Angeles" value="Los Angeles" />
<el-radio-button label="Chicago" value="Chicago" />
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio3" size="small">
<el-radio-button label="New York" value="New York" />
<el-radio-button label="Washington" value="Washington" disabled />
<el-radio-button label="Los Angeles" value="Los Angeles" />
<el-radio-button label="Chicago" value="Chicago" />
</el-radio-group>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio1 = ref('New York')
const radio2 = ref('New York')
const radio3 = ref('New York')
</script>