mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
docs(components): [radio] (#11064)
* docs(components): [docs] * Update form docs with new syntax. * docs(components): [radio] * Update radio docs with new syntax. * docs(components): [radio] * Update radio docs with new syntax.
This commit is contained in:
Xc
GitHub
parent
69443c52a7
commit
554dad9a1b
@ -55,62 +55,71 @@ radio/with-borders
|
||||
|
||||
:::
|
||||
|
||||
## Radio Attributes
|
||||
## Radio API
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ------------------------------------ | ------------------------- | ---------------------- | ------- |
|
||||
| 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 | string | large / default /small | — |
|
||||
| name | native 'name' attribute | string | — | — |
|
||||
### Radio Attributes
|
||||
|
||||
## Radio Events
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------- | ------------------------------------ | ---------------------------------------- | ------- |
|
||||
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| label | the value of Raido | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| disabled | whether Raido is disabled | ^[boolean] | false |
|
||||
| border | whether to add a border around Raido | ^[boolean] | false |
|
||||
| size | size of the Raido | ^[enum]`'large' \| 'default' \| 'small'` | — |
|
||||
| name | native `name` attribute | ^[string] | — |
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ------ | ------------------------------------- | ----------------------------------- |
|
||||
| change | triggers when the bound value changes | the label value of the chosen radio |
|
||||
### Radio Events
|
||||
|
||||
## Radio Slots
|
||||
| Name | Description | Type |
|
||||
| ------ | ------------------------------------- | --------------------------------------------------------- |
|
||||
| change | triggers when the bound value changes | ^[Function]`(value: string \| number \| boolean) => void` |
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ------------------------- |
|
||||
| — | customize default content |
|
||||
### Radio Slots
|
||||
|
||||
## Radio-group Attributes
|
||||
| Name | Description |
|
||||
| ------- | ------------------------- |
|
||||
| default | customize default content |
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ------------------------------------------------- | ------------------------- | ----------------------- | ------- |
|
||||
| model-value / v-model | binding value | string / number / boolean | — | — |
|
||||
| size | the size of radio | string | large / default / small | 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 |
|
||||
## RadioGroup API
|
||||
|
||||
## Radio-group Events
|
||||
### RadioGroup Attributes
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ------ | ------------------------------------- | ----------------------------------- |
|
||||
| change | triggers when the bound value changes | the label value of the chosen radio |
|
||||
| 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 |
|
||||
| label<A11yTag /> | same as `aria-label` in RaidoGroup | ^[string] | — |
|
||||
| name | native `name` attribute | ^[string] | — |
|
||||
| id | native `id` attribute | ^[string] | — |
|
||||
|
||||
## Radio-group Slots
|
||||
### RadioGroup Events
|
||||
|
||||
| Name | Description | Subtags |
|
||||
| ---- | ------------------------- | -------------------- |
|
||||
| — | customize default content | Radio / Radio-button |
|
||||
| Name | Description | Type |
|
||||
| ------ | ------------------------------------- | --------------------------------------------------------- |
|
||||
| change | triggers when the bound value changes | ^[Function]`(value: string \| number \| boolean) => void` |
|
||||
|
||||
## Radio-button Attributes
|
||||
### RadioGroup Slots
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| -------- | ------------------------- | --------------- | --------------- | ------- |
|
||||
| label | the value of radio | string / number | — | — |
|
||||
| disabled | whether radio is disabled | boolean | — | false |
|
||||
| name | native 'name' attribute | string | — | — |
|
||||
| Name | Description | Subtags |
|
||||
| ------- | ------------------------- | ------------------- |
|
||||
| default | customize default content | Radio / RadioButton |
|
||||
|
||||
## Radio-button Slots
|
||||
## RadioButton API
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ------------------------- |
|
||||
| — | customize default content |
|
||||
### RadioButton Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| -------- | ------------------------- | ---------------------------------- | ------- |
|
||||
| label | the value of Raido | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| disabled | whether Raido is disabled | ^[boolean] | false |
|
||||
| name | native 'name' attribute | ^[string] | — |
|
||||
|
||||
### RadioButton Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | ------------------------- |
|
||||
| default | customize default content |
|
||||
|
||||
@ -5,6 +5,9 @@ import type RadioButton from './radio-button.vue'
|
||||
|
||||
export const radioButtonProps = buildProps({
|
||||
...radioPropsBase,
|
||||
/**
|
||||
* @description native 'name' attribute
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
|
||||
@ -5,32 +5,59 @@ import type { ExtractPropTypes } from '@vue/runtime-core'
|
||||
import type RadioGroup from './radio-group.vue'
|
||||
|
||||
export const radioGroupProps = buildProps({
|
||||
/**
|
||||
* @description native `id` attribute
|
||||
*/
|
||||
id: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description the size of radio buttons or bordered radios
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @description whether the nesting raidos are disabled
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description binding value
|
||||
*/
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description border and background color when button is active
|
||||
*/
|
||||
fill: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description same as `aria-label` in RaidoGroup
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description font color when button is active
|
||||
*/
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description native `name` attribute
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description whether to trigger form validation
|
||||
*/
|
||||
validateEvent: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
||||
@ -5,8 +5,17 @@ import type { ExtractPropTypes } from 'vue'
|
||||
import type Radio from './radio.vue'
|
||||
|
||||
export const radioPropsBase = buildProps({
|
||||
/**
|
||||
* @description size of the Raido
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @description whether Raido is disabled
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description the value of Raido
|
||||
*/
|
||||
label: {
|
||||
type: [String, Number, Boolean],
|
||||
default: '',
|
||||
@ -15,14 +24,23 @@ export const radioPropsBase = buildProps({
|
||||
|
||||
export const radioProps = buildProps({
|
||||
...radioPropsBase,
|
||||
/**
|
||||
* @description binding value
|
||||
*/
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description native `name` attribute
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description whether to add a border around Raido
|
||||
*/
|
||||
border: Boolean,
|
||||
} as const)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user