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,90 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const mode = ref<'single' | 'multiple'>('single')
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => {
|
||||
const base = [
|
||||
{ name: 'root', desc: t('root') },
|
||||
{ name: 'prefix', desc: t('prefix') },
|
||||
{ name: 'content', desc: t('content') },
|
||||
{ name: 'placeholder', desc: t('placeholder') },
|
||||
{ name: 'clear', desc: t('clear') },
|
||||
{ name: 'input', desc: t('input') },
|
||||
{ name: 'suffix', desc: t('suffix') },
|
||||
{ name: 'popup.root', desc: t('popup.root') },
|
||||
{ name: 'popup.list', desc: t('popup.list') },
|
||||
{ name: 'popup.listItem', desc: t('popup.listItem') },
|
||||
]
|
||||
|
||||
if (mode.value === 'multiple') {
|
||||
return [
|
||||
...base,
|
||||
{ name: 'item', desc: t('item') },
|
||||
{ name: 'itemContent', desc: t('itemContent') },
|
||||
{ name: 'itemRemove', desc: t('itemRemove') },
|
||||
]
|
||||
}
|
||||
|
||||
return base
|
||||
})
|
||||
|
||||
const divRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: 'contributors',
|
||||
label: 'contributors',
|
||||
children: [
|
||||
{ value: 'aojunhao123', label: 'aojunhao123' },
|
||||
{ value: 'thinkasany', label: 'thinkasany' },
|
||||
{ value: 'meet-student', label: 'meet-student' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const value = computed(() => {
|
||||
if (mode.value !== 'multiple')
|
||||
return ['contributors', 'thinkasany']
|
||||
|
||||
return [['contributors', 'aojunhao123']]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Cascader"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<div ref="divRef" :style="{ position: 'absolute', height: '200px' }">
|
||||
<div :style="{ display: 'flex', justifyContent: 'center', marginBottom: '12px' }">
|
||||
<a-segmented v-model:value="mode" :options="['single', 'multiple']" />
|
||||
</div>
|
||||
<div :style="{ display: 'flex', flexDirection: 'column', gap: '12px' }">
|
||||
<a-cascader
|
||||
prefix="prefix"
|
||||
:style="{ width: '300px' }"
|
||||
:options="options"
|
||||
:value="value"
|
||||
:multiple="mode === 'multiple'"
|
||||
open
|
||||
:get-popup-container="() => divRef!"
|
||||
:classes="classes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
# Custom dropdown
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Customize the dropdown menu via `popupRender`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
children?: Option[]
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader :options="options" placeholder="Please select">
|
||||
<template #popupRender="menus">
|
||||
<component :is="menus" />
|
||||
<a-divider style="margin: 0" />
|
||||
<div style="padding: 8px">
|
||||
The footer is not very short.
|
||||
</div>
|
||||
</template>
|
||||
</a-cascader>
|
||||
</template>
|
||||
```
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
# Custom render
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
For instance, add an external link after the selected value.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
children?: Option[]
|
||||
code?: number
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
code: 752100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
code: 453400,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
function handleAreaClick(e: MouseEvent, label: string, option: Option) {
|
||||
e.stopPropagation()
|
||||
console.log('clicked', label, option)
|
||||
}
|
||||
|
||||
function getSelectedOption(selectedOptions: Option[] | undefined, index: number) {
|
||||
return selectedOptions?.[index]
|
||||
}
|
||||
|
||||
function handleLastClick(
|
||||
e: MouseEvent,
|
||||
label: string,
|
||||
selectedOptions: Option[] | undefined,
|
||||
index: number,
|
||||
) {
|
||||
const option = selectedOptions?.[index]
|
||||
if (!option) {
|
||||
return
|
||||
}
|
||||
handleAreaClick(e, label, option)
|
||||
}
|
||||
|
||||
function getLabelKey(label: string, selectedOptions: Option[] | undefined, index: number) {
|
||||
return getSelectedOption(selectedOptions, index)?.value ?? label
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader
|
||||
:options="options"
|
||||
:default-value="['zhejiang', 'hangzhou', 'xihu']"
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #displayRender="{ labels, selectedOptions }">
|
||||
<span v-for="(label, index) in labels" :key="getLabelKey(String(label), selectedOptions as any, index)">
|
||||
<template v-if="index === labels.length - 1">
|
||||
{{ label }}
|
||||
<template v-if="getSelectedOption(selectedOptions as any, index)?.code !== undefined">
|
||||
(
|
||||
<a
|
||||
@click="(e) => handleLastClick(e, String(label), selectedOptions as any, index)"
|
||||
>
|
||||
{{ getSelectedOption(selectedOptions as any, index)?.code }}
|
||||
</a>
|
||||
)
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ label }} /
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<template #optionRender="option">
|
||||
<span>{{ option.label }} ({{ option.value }})</span>
|
||||
</template>
|
||||
</a-cascader>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,67 @@
|
||||
# Custom Field Names
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Custom field names.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
|
||||
interface Option {
|
||||
code: string
|
||||
name: string
|
||||
items?: Option[]
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
code: 'zhejiang',
|
||||
name: 'Zhejiang',
|
||||
items: [
|
||||
{
|
||||
code: 'hangzhou',
|
||||
name: 'Hangzhou',
|
||||
items: [
|
||||
{
|
||||
code: 'xihu',
|
||||
name: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
code: 'jiangsu',
|
||||
name: 'Jiangsu',
|
||||
items: [
|
||||
{
|
||||
code: 'nanjing',
|
||||
name: 'Nanjing',
|
||||
items: [
|
||||
{
|
||||
code: 'zhonghuamen',
|
||||
name: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader
|
||||
:field-names="{ label: 'name', value: 'code', children: 'items' }"
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,69 @@
|
||||
# Load Options Lazily
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Load options lazily with `loadData`.
|
||||
|
||||
> Note: `loadData` cannot work with `showSearch`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface Option {
|
||||
value?: string | number | null
|
||||
label: string
|
||||
children?: Option[]
|
||||
isLeaf?: boolean
|
||||
}
|
||||
|
||||
const optionLists: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
isLeaf: false,
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
isLeaf: false,
|
||||
},
|
||||
]
|
||||
|
||||
const options = ref<Option[]>(optionLists)
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value, selectedOptions) => {
|
||||
console.log(value, selectedOptions)
|
||||
}
|
||||
|
||||
function loadData(selectedOptions: Option[]) {
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1]
|
||||
|
||||
setTimeout(() => {
|
||||
targetOption.children = [
|
||||
{
|
||||
label: `${targetOption.label} Dynamic 1`,
|
||||
value: 'dynamic1',
|
||||
},
|
||||
{
|
||||
label: `${targetOption.label} Dynamic 2`,
|
||||
value: 'dynamic2',
|
||||
},
|
||||
]
|
||||
options.value = [...options.value]
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader
|
||||
:options="options"
|
||||
:load-data="loadData"
|
||||
change-on-select
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
# Multiple
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Select multiple options. Disable the `checkbox` by adding the `disableCheckbox` property and selecting a specific item. The style of the disable can be modified by the className.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
|
||||
interface Option {
|
||||
value: string | number
|
||||
label: string
|
||||
children?: Option[]
|
||||
disableCheckbox?: boolean
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
label: 'Light',
|
||||
value: 'light',
|
||||
children: Array.from({ length: 20 }).map((_, index) => ({
|
||||
label: `Number ${index}`,
|
||||
value: index,
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Bamboo',
|
||||
value: 'bamboo',
|
||||
children: [
|
||||
{
|
||||
label: 'Little',
|
||||
value: 'little',
|
||||
children: [
|
||||
{
|
||||
label: 'Toy Fish',
|
||||
value: 'fish',
|
||||
disableCheckbox: true,
|
||||
},
|
||||
{
|
||||
label: 'Toy Cards',
|
||||
value: 'cards',
|
||||
},
|
||||
{
|
||||
label: 'Toy Bird',
|
||||
value: 'bird',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader
|
||||
style="width: 100%"
|
||||
:options="options"
|
||||
multiple
|
||||
max-tag-count="responsive"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
# Panel
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Used for inline view case.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface Option {
|
||||
value: string | number
|
||||
label: string
|
||||
children?: Option[]
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const disabled = ref(false)
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
const onMultipleChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="small" align="flex-start">
|
||||
<a-switch
|
||||
v-model:checked="disabled"
|
||||
checked-children="Enabled"
|
||||
un-checked-children="Disabled"
|
||||
aria-label="disabled switch"
|
||||
/>
|
||||
<a-cascader-panel :options="options" :disabled="disabled" @change="onChange" />
|
||||
<a-cascader-panel multiple :options="options" :disabled="disabled" @change="onMultipleChange" />
|
||||
<a-cascader-panel />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,78 @@
|
||||
# Placement
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
You can manually specify the position of the popup via `placement`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
children?: Option[]
|
||||
}
|
||||
|
||||
const placement = shallowRef<Placement>('topLeft')
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group v-model:value="placement">
|
||||
<a-radio-button value="topLeft">
|
||||
topLeft
|
||||
</a-radio-button>
|
||||
<a-radio-button value="topRight">
|
||||
topRight
|
||||
</a-radio-button>
|
||||
<a-radio-button value="bottomLeft">
|
||||
bottomLeft
|
||||
</a-radio-button>
|
||||
<a-radio-button value="bottomRight">
|
||||
bottomRight
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader :options="options" placeholder="Please select" :placement="placement" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
# Search
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Search and select options directly.
|
||||
|
||||
> Now, `Cascader[showSearch]` doesn't support search on server, more info [#5547](https://github.com/ant-design/ant-design/issues/5547)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
children?: Option[]
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
{
|
||||
value: 'xiasha',
|
||||
label: 'Xia Sha',
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value, selectedOptions) => {
|
||||
console.log(value, selectedOptions)
|
||||
}
|
||||
|
||||
function handleSearch(value: string) {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
function filter(inputValue: string, path: Option[]) {
|
||||
return path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader
|
||||
:options="options"
|
||||
:show-search="{ filter, onSearch: handleSearch } as any"
|
||||
placeholder="Please select"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
# ShowCheckedStrategy
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Shows a selected item in a box using `showCheckedStrategy`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
import { Cascader } from 'antdv-next'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const SHOW_CHILD = Cascader.SHOW_CHILD
|
||||
|
||||
interface Option {
|
||||
value: string | number
|
||||
label: string
|
||||
children?: Option[]
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
label: 'Light',
|
||||
value: 'light',
|
||||
children: Array.from({ length: 20 }).map((_, index) => ({
|
||||
label: `Number ${index}`,
|
||||
value: index,
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Bamboo',
|
||||
value: 'bamboo',
|
||||
children: [
|
||||
{
|
||||
label: 'Little',
|
||||
value: 'little',
|
||||
children: [
|
||||
{
|
||||
label: 'Toy Fish',
|
||||
value: 'fish',
|
||||
},
|
||||
{
|
||||
label: 'Toy Cards',
|
||||
value: 'cards',
|
||||
},
|
||||
{
|
||||
label: 'Toy Bird',
|
||||
value: 'bird',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
const value = shallowRef([
|
||||
['bamboo', 'little', 'fish'],
|
||||
['bamboo', 'little', 'cards'],
|
||||
['bamboo', 'little', 'bird'],
|
||||
] as any)
|
||||
|
||||
const value1 = shallowRef([['bamboo']])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader
|
||||
v-model:value="value"
|
||||
style="width: 100%"
|
||||
:options="options"
|
||||
multiple
|
||||
max-tag-count="responsive"
|
||||
:show-checked-strategy="SHOW_CHILD"
|
||||
@change="onChange"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader
|
||||
v-model:value="value1"
|
||||
style="width: 100%"
|
||||
:options="options"
|
||||
multiple
|
||||
max-tag-count="responsive"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
# Size
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Cascade selection box of different sizes.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
children?: Option[]
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader size="large" :options="options" @change="onChange" />
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader :options="options" @change="onChange" />
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader size="small" :options="options" @change="onChange" />
|
||||
<br>
|
||||
<br>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,16 @@
|
||||
# Status
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Add status to Cascader with `status`, which could be `error` or `warning`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space vertical>
|
||||
<a-cascader status="error" placeholder="Error" />
|
||||
<a-cascader status="warning" multiple placeholder="Warning multiple" />
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits, CascaderProps } from 'antdv-next'
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
children?: Option[]
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'meet-student',
|
||||
label: 'meet-student',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const classes: CascaderProps['classes'] = {
|
||||
root: 'cascader-demo-root',
|
||||
}
|
||||
|
||||
const stylesObject: CascaderProps['styles'] = {
|
||||
prefix: {
|
||||
color: '#ccc',
|
||||
},
|
||||
suffix: {
|
||||
color: '#ccc',
|
||||
},
|
||||
}
|
||||
|
||||
const stylesFn: CascaderProps['styles'] = ({ props }) => {
|
||||
if (props.variant === 'filled') {
|
||||
return {
|
||||
prefix: {
|
||||
color: '#1890ff',
|
||||
},
|
||||
suffix: {
|
||||
color: '#1890ff',
|
||||
},
|
||||
popup: {
|
||||
listItem: {
|
||||
color: '#1890ff',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-cascader
|
||||
:options="options"
|
||||
:classes="classes"
|
||||
:styles="stylesObject"
|
||||
placeholder="Object styles"
|
||||
prefix="🏠"
|
||||
@change="onChange"
|
||||
/>
|
||||
<a-cascader
|
||||
:options="options"
|
||||
:classes="classes"
|
||||
:styles="stylesFn"
|
||||
placeholder="Function styles"
|
||||
variant="filled"
|
||||
prefix="✅"
|
||||
@change="onChange"
|
||||
/>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.cascader-demo-root) {
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
# Prefix and Suffix
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use `prefix` to customize the prefix content, use `suffixIcon` to customize the selection box suffix icon, and use `expandIcon` to customize the current item expand icon.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CascaderEmits } from 'antdv-next'
|
||||
import { SmileOutlined } from '@antdv-next/icons'
|
||||
import { h } from 'vue'
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
children?: Option[]
|
||||
}
|
||||
|
||||
const options: Option[] = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const onChange: CascaderEmits['change'] = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
const prefixIcon = h(SmileOutlined)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-cascader
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
@change="onChange"
|
||||
>
|
||||
<template #suffixIcon>
|
||||
<SmileOutlined />
|
||||
</template>
|
||||
</a-cascader>
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader
|
||||
suffix-icon="ab"
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
@change="onChange"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
@change="onChange"
|
||||
>
|
||||
<template #expandIcon>
|
||||
<SmileOutlined />
|
||||
</template>
|
||||
</a-cascader>
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader
|
||||
expand-icon="ab"
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
@change="onChange"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<a-cascader
|
||||
:prefix="prefixIcon"
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,18 @@
|
||||
# Variants
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Variants of Cascader, there are four variants: `outlined` `filled` `borderless` and `underlined`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-cascader placeholder="Please select" variant="borderless" />
|
||||
<a-cascader placeholder="Please select" variant="filled" />
|
||||
<a-cascader placeholder="Please select" variant="outlined" />
|
||||
<a-cascader placeholder="Please select" variant="underlined" />
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
title: Cascader
|
||||
description: Cascade selection box.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
|
||||
- When selecting from a large data set, with multi-stage classifications separated for easy selection.
|
||||
- Chooses cascade items in one float layer for better user experience.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Multiple | demo/multiple.md |
|
||||
| ShowCheckedStrategy | demo/showCheckedStrategy.md |
|
||||
| Size | demo/size.md |
|
||||
| Custom render | demo/custom-render.md |
|
||||
| Search | demo/search.md |
|
||||
| Load Options Lazily | demo/lazy.md |
|
||||
| Custom Field Names | demo/fields-name.md |
|
||||
| Prefix and Suffix | demo/suffix.md |
|
||||
| Custom dropdown | demo/custom-dropdown.md |
|
||||
| Placement | demo/placement.md |
|
||||
| Variants | demo/variant.md |
|
||||
| Status | demo/status.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
| Panel | demo/panel.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Props
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| allowClear | Show clear button | boolean \| \{ clearIcon?: VueNode \} | true | - | × |
|
||||
| changeOnSelect | Change value on each selection if set to true (always works when `multiple` is `true`) | boolean | false | - | × |
|
||||
| disabled | Whether disabled select | boolean | false | - | × |
|
||||
| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | - | × |
|
||||
| fieldNames | Custom field name for label and value and children | object | \{ label: `label`, value: `value`, children: `children` \} | - | × |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | - | × |
|
||||
| loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - | - | × |
|
||||
| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | - | × |
|
||||
| maxTagPlaceholder | Placeholder for not showing tags | VueNode \| function(omittedValues) | - | - | × |
|
||||
| maxTagTextLength | Max tag text length to show | number | - | - | × |
|
||||
| multiple | Support multiple or not | boolean | - | - | × |
|
||||
| open | Set visible of cascader popup | boolean | - | - | × |
|
||||
| options | The data options of cascade | [Option](#option)\[] | - | - | × |
|
||||
| placeholder | The input placeholder | string | - | - | × |
|
||||
| placement | Use preset popup align config from builtinPlacements | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | - | × |
|
||||
| popupMenuColumnStyle | The style of the drop-down menu column | CSSProperties | - | - | × |
|
||||
| showCheckedStrategy | The way to show selected items in the box (only effective when `multiple` is `true`). `Cascader.SHOW_CHILD`: just show child treeNode. `Cascader.SHOW_PARENT`: just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | - | × |
|
||||
| showSearch | Whether show search input in single mode | boolean \| [Object](#showsearch) | false | - | × |
|
||||
| ~~searchValue~~ | Set search value, Need work with `showSearch` | string | - | - | × |
|
||||
| size | The input size | `large` \| `middle` \| `small` | - | - | × |
|
||||
| status | Set validation status | 'error' \| 'warning' | - | - | × |
|
||||
| value | The selected value, support `v-model:value` | string\[] \| number\[] | - | - | × |
|
||||
| variant | Variants of selector | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| change | Callback when finishing cascader select | (value, selectedOptions) => void | - |
|
||||
| openChange | Callback when popup shown or hidden | (value) => void | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| displayRender | The render function of displaying selected options | (label, selectedOptions) => VueNode | - |
|
||||
| expandIcon | Customize the current item expand icon | VueNode | - |
|
||||
| loadingIcon | The appearance of lazy loading (now is useless) | VueNode | - |
|
||||
| notFoundContent | Specify content to show when no result matches | VueNode | - |
|
||||
| optionRender | Customize the rendering dropdown options | (option: Option) => VueNode | - |
|
||||
| popupRender | Customize dropdown content | (menus: VueNode) => VueNode | - |
|
||||
| prefix | The custom prefix | VueNode | - |
|
||||
| removeIcon | The custom remove icon | VueNode | - |
|
||||
| suffixIcon | The custom suffix icon | VueNode | - |
|
||||
| tagRender | Custom render function for tags in `multiple` mode | (\{ label: string, onClose: function, value: string \}) => VueNode | - |
|
||||
|
||||
### Methods
|
||||
|
||||
| Method | Description | Version |
|
||||
| --- | --- | --- |
|
||||
| blur() | Remove focus | - |
|
||||
| focus() | Get focus | - |
|
||||
|
||||
## Types
|
||||
|
||||
### showSearch
|
||||
|
||||
Fields for showSearch when it's an object:
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `multiple` is `true` | boolean | true | - |
|
||||
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - | - |
|
||||
| limit | Set the count of filtered items | number \| false | 50 | - |
|
||||
| matchInputWidth | Whether the width of list matches input, ([how it looks](https://github.com/ant-design/ant-design/issues/25779)) | boolean | true | - |
|
||||
| render | Used to render filtered options | function(inputValue, path): VueNode | - | - |
|
||||
| sort | Used to sort filtered options | function(a, b, inputValue) | - | - |
|
||||
| searchValue | Set search value, Need work with `showSearch` | string | - | - |
|
||||
| onSearch | The callback function triggered when input changed | (search: string) => void | - | - |
|
||||
|
||||
### Option
|
||||
|
||||
```typescript
|
||||
interface Option {
|
||||
value: string | number
|
||||
label?: VueNode
|
||||
disabled?: boolean
|
||||
children?: Option[]
|
||||
// Determines if this is a leaf node(effective when `loadData` is specified).
|
||||
// `false` will force trade TreeNode as a parent node.
|
||||
// Show expand icon even if the current node has no children.
|
||||
isLeaf?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,33 @@
|
||||
# cascader Token
|
||||
|
||||
Use these variables through `theme.components.Cascader`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Cascader: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `controlWidth` | `string \| number` | Width of Cascader |
|
||||
| `controlItemWidth` | `string \| number` | Width of item |
|
||||
| `dropdownHeight` | `string \| number` | Height of dropdown |
|
||||
| `optionSelectedBg` | `string` | Background color of selected item |
|
||||
| `optionSelectedColor` | `string` | Text color when option is selected |
|
||||
| `optionSelectedFontWeight` | `CSSProperties` | Font weight of selected item |
|
||||
| `optionPadding` | `CSSProperties` | Padding of menu item |
|
||||
| `menuPadding` | `CSSProperties` | Padding of menu item (single column) |
|
||||
Reference in new issue
Block a user