20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,33 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root'), version: '1.0.0' },
|
||||
{ name: 'icon', desc: t('icon'), version: '1.0.0' },
|
||||
{ name: 'label', desc: t('label'), version: '1.0.0' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Radio"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-radio :classes="classes">
|
||||
Radio
|
||||
</a-radio>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,21 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The simplest use.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const val = shallowRef()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio v-model:checked="val">
|
||||
Radio
|
||||
</a-radio>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,34 @@
|
||||
# disabled
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Radio unavailable.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const disabled = shallowRef(true)
|
||||
function toggleDisabled() {
|
||||
disabled.value = !disabled.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-space>
|
||||
<a-radio :checked="false" :disabled="disabled">
|
||||
Disabled
|
||||
</a-radio>
|
||||
<a-radio :checked="true" :disabled="disabled">
|
||||
Disabled
|
||||
</a-radio>
|
||||
</a-space>
|
||||
<a-button type="primary" @click="toggleDisabled">
|
||||
Toggle disabled
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
# Solid radio button
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Solid radio button style.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const value = shallowRef('a')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-radio-group v-model:value="value" button-style="solid">
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b">
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group v-model:value="value" button-style="solid">
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b" disabled>
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
# radio style
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The combination of radio button style.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const value = shallowRef('a')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-radio-group v-model:value="value">
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b">
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group v-model:value="value">
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b" disabled>
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group v-model:value="value" disabled>
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b">
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
# Block Radio.Group
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The `block` property will make a Radio.Group fit to its parent width.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CheckboxOptionType } from 'antdv-next'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const options: CheckboxOptionType[] = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange' },
|
||||
]
|
||||
const value = shallowRef('Apple')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-radio-group v-model:value="value" block :options="options" />
|
||||
<a-radio-group
|
||||
v-model:value="value"
|
||||
block
|
||||
:options="options"
|
||||
option-type="button"
|
||||
button-style="solid"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-model:value="value"
|
||||
block
|
||||
:options="options"
|
||||
option-type="button"
|
||||
/>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
# Vertical Radio.Group
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Vertical Radio.Group, with more radios.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { RadioGroupProps } from 'antdv-next'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const val = shallowRef(1)
|
||||
|
||||
const buttonOptions: RadioGroupProps['options'] = [
|
||||
{ label: 'Apple', value: 'Apple', class: 'label-1' },
|
||||
{ label: 'Pear', value: 'Pear', class: 'label-2' },
|
||||
{ label: 'Orange', value: 'Orange', title: 'Orange', class: 'label-3' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex align="start" gap="large">
|
||||
<div style="flex: 1">
|
||||
<a-radio-group v-model:value="val" vertical>
|
||||
<a-radio :value="1">
|
||||
Option A
|
||||
</a-radio>
|
||||
<a-radio :value="2">
|
||||
Option B
|
||||
</a-radio>
|
||||
<a-radio :value="3">
|
||||
Option C
|
||||
</a-radio>
|
||||
<a-radio :value="4">
|
||||
More...
|
||||
<a-input v-if="val === 4" style="width: 100px; margin-left: 10px" />
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<a-radio-group :options="buttonOptions" option-type="button" vertical />
|
||||
</div>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
# Radio.Group group - optional
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Render radios by configuring `options`. Radio type can also be set through the `optionType` parameter.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CheckboxOptionType } from 'antdv-next'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange']
|
||||
const options: CheckboxOptionType[] = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange', title: 'Orange' },
|
||||
]
|
||||
const optionsWithDisabled: CheckboxOptionType[] = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange', disabled: true },
|
||||
]
|
||||
|
||||
const value1 = shallowRef('Apple')
|
||||
const value2 = shallowRef('Apple')
|
||||
const value3 = shallowRef('Apple')
|
||||
const value4 = shallowRef('Apple')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-radio-group v-model:value="value1" :options="plainOptions" />
|
||||
<a-radio-group v-model:value="value2" :options="optionsWithDisabled" />
|
||||
<br>
|
||||
<a-radio-group v-model:value="value3" :options="options" option-type="button" />
|
||||
<a-radio-group v-model:value="value4" :options="optionsWithDisabled" option-type="button" button-style="solid" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
# Radio.Group with name
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Passing the `name` property to all `input[type="radio"]` that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CheckboxOptionType } from 'antdv-next'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const options: CheckboxOptionType[] = [
|
||||
{ label: 'A', value: 1 },
|
||||
{ label: 'B', value: 2 },
|
||||
{ label: 'C', value: 3 },
|
||||
{ label: 'D', value: 4 },
|
||||
]
|
||||
const val = shallowRef(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group v-model:value="val" name="radiogroup" :options="options" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,56 @@
|
||||
# Radio Group
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A group of radio components.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { RadioOptionType } from 'antdv-next'
|
||||
import { BarChartOutlined, DotChartOutlined, LineChartOutlined, PieChartOutlined } from '@antdv-next/icons'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const iconsMap: any = {
|
||||
1: LineChartOutlined,
|
||||
2: DotChartOutlined,
|
||||
3: BarChartOutlined,
|
||||
4: PieChartOutlined,
|
||||
}
|
||||
const options: RadioOptionType[] = [
|
||||
{
|
||||
value: 1,
|
||||
class: 'option-1',
|
||||
label: 'LineChat',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
class: 'option-2',
|
||||
label: 'DotChart',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
class: 'option-3',
|
||||
label: 'BarChart',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
class: 'option-4',
|
||||
label: 'PieChart',
|
||||
},
|
||||
]
|
||||
const val = shallowRef(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group v-model:value="val" :options="options">
|
||||
<template #labelRender="{ item }">
|
||||
<a-flex gap="small" justify="center" align="center" vertical>
|
||||
<component :is="iconsMap[item.value]" style="font-size: 18px;" />
|
||||
{{ item.label }}
|
||||
</a-flex>
|
||||
</template>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
# Size
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
There are three sizes available: large, medium, and small. It can coordinate with input box.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const value = shallowRef()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-radio-group v-model:value="value" size="small" default-value="a">
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b">
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group v-model:value="value" default-value="a">
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b">
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group v-model:value="value" size="large" disabled default-value="a">
|
||||
<a-radio-button value="a">
|
||||
Hangzhou
|
||||
</a-radio-button>
|
||||
<a-radio-button value="b">
|
||||
Shanghai
|
||||
</a-radio-button>
|
||||
<a-radio-button value="c">
|
||||
Beijing
|
||||
</a-radio-button>
|
||||
<a-radio-button value="d">
|
||||
Chengdu
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: Radio
|
||||
description: Used to select a single state from multiple options.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
- Used to select a single state from multiple options.
|
||||
- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.
|
||||
|
||||
```vue
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- When use RadioGroup, recommended ✅ -->
|
||||
<a-radio-group
|
||||
v-model:value="value"
|
||||
:options="[
|
||||
{ value: 1, label: 'A' },
|
||||
{ value: 2, label: 'B' },
|
||||
{ value: 3, label: 'C' },
|
||||
]"
|
||||
/>
|
||||
<!-- No recommended 🙅🏻♀️ -->
|
||||
<a-radio-group v-model:value="value">
|
||||
<a-radio :value="1">
|
||||
A
|
||||
</a-radio>
|
||||
<a-radio :value="2">
|
||||
B
|
||||
</a-radio>
|
||||
<a-radio :value="3">
|
||||
C
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| disabled | demo/disabled.md |
|
||||
| Radio Group | demo/radiogroup.md |
|
||||
| Vertical Radio.Group | demo/radiogroup-more.md |
|
||||
| Block Radio.Group | demo/radiogroup-block.md |
|
||||
| Radio.Group group - optional | demo/radiogroup-options.md |
|
||||
| radio style | demo/radiobutton.md |
|
||||
| Radio.Group with name | demo/radiogroup-with-name.md |
|
||||
| Size | demo/size.md |
|
||||
| Solid radio button | demo/radiobutton-solid.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Radio/RadioButton
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| checked | Specifies whether the radio is selected, support `v-model:checked` | boolean | false | | × |
|
||||
| disabled | Disable radio | boolean | false | | × |
|
||||
| value | According to value for comparison, to determine whether the selected | any | - | | × |
|
||||
|
||||
#### Methods
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| blur() | Remove focus |
|
||||
| focus() | Get focus |
|
||||
|
||||
### RadioGroup
|
||||
|
||||
Radio group can wrap a group of `Radio`.
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| block | Option to fit RadioGroup width to its parent width | boolean | false | - |
|
||||
| buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` | |
|
||||
| defaultValue | Default selected value | any | - | |
|
||||
| disabled | Disable all radio buttons | boolean | false | |
|
||||
| name | The `name` property of all `input[type="radio"]` children. If not set, it will fallback to a randomly generated name | string | - | |
|
||||
| options | Set children optional | string\[] \| number\[] \| Array<[CheckboxOptionType](#checkboxoptiontype)> | - | |
|
||||
| optionType | Set Radio optionType | `default` \| `button` | `default` | - |
|
||||
| orientation | Orientation | `horizontal` \| `vertical` | `horizontal` | |
|
||||
| size | The size of radio button style | `large` \| `middle` \| `small` | - | |
|
||||
| value | Used for setting the currently selected value, support `v-model:value` | any | - | |
|
||||
| vertical | If true, the Radio group will be vertical. Simultaneously existing with `orientation`, `orientation` takes priority | boolean | false | |
|
||||
|
||||
#### Events
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| change | The callback function that is triggered when the state changes | (e: RadioChangeEvent) => void | - |
|
||||
|
||||
#### Slots
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| labelRender | label render slot | (params: { item: CheckboxOptionType, index: number }) => any | - |
|
||||
|
||||
## Types
|
||||
|
||||
### CheckboxOptionType
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| label | The text used to display as the Radio option | `string` | - | - |
|
||||
| value | The value associated with the Radio option | `string` \| `number` \| `boolean` | - | - |
|
||||
| style | The style to apply to the Radio option | `CSSProperties` | - | - |
|
||||
| class | class of the Radio option | `string` | - | - |
|
||||
| disabled | Specifies whether the Radio option is disabled | `boolean` | `false` | - |
|
||||
| title | Adds the Title attribute value | `string` | - | - |
|
||||
| id | Adds the Radio Id attribute value | `string` | - | - |
|
||||
| onChange | Triggered when the value of the Radio Group changes | `(e: CheckboxChangeEvent) => void;` | - | - |
|
||||
| required | Specifies whether the Radio option is required | `boolean` | `false` | - |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,39 @@
|
||||
# radio Token
|
||||
|
||||
Use these variables through `theme.components.Radio`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Radio: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `radioSize` | `number` | Radio size |
|
||||
| `dotSize` | `number` | Size of Radio dot |
|
||||
| `dotColorDisabled` | `string` | Color of disabled Radio dot |
|
||||
| `buttonBg` | `string` | Background color of Radio button |
|
||||
| `buttonCheckedBg` | `string` | Background color of checked Radio button |
|
||||
| `buttonColor` | `string` | Color of Radio button text |
|
||||
| `buttonPaddingInline` | `number` | Horizontal padding of Radio button |
|
||||
| `buttonCheckedBgDisabled` | `string` | Background color of checked and disabled Radio button |
|
||||
| `buttonCheckedColorDisabled` | `string` | Color of checked and disabled Radio button text |
|
||||
| `buttonSolidCheckedColor` | `string` | Color of checked solid Radio button text |
|
||||
| `buttonSolidCheckedBg` | `string` | Background color of checked solid Radio button text |
|
||||
| `buttonSolidCheckedHoverBg` | `string` | Background color of checked solid Radio button text when hover |
|
||||
| `buttonSolidCheckedActiveBg` | `string` | Background color of checked solid Radio button text when active |
|
||||
| `wrapperMarginInlineEnd` | `number` | Margin right of Radio button |
|
||||
Reference in new issue
Block a user