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="Checkbox"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-checkbox :classes="classes">
|
||||
Checkbox
|
||||
</a-checkbox>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,21 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Basic usage of checkbox.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const checked = shallowRef(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-checkbox v-model:checked="checked">
|
||||
Checkbox
|
||||
</a-checkbox>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,45 @@
|
||||
# Check all
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The `indeterminate` property can help you to achieve a 'check all' effect.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, shallowRef } from 'vue'
|
||||
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange']
|
||||
const defaultCheckedList = ['Apple', 'Orange']
|
||||
|
||||
const checkedList = shallowRef<string[]>(defaultCheckedList)
|
||||
|
||||
const checkAll = computed(() => plainOptions.length === checkedList.value.length)
|
||||
const indeterminate = computed(() => checkedList.value.length > 0 && checkedList.value.length < plainOptions.length)
|
||||
|
||||
function onChange(list: string[]) {
|
||||
checkedList.value = list
|
||||
}
|
||||
|
||||
function onCheckAllChange(e: any) {
|
||||
checkedList.value = e.target.checked ? plainOptions : []
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-checkbox
|
||||
:indeterminate="indeterminate"
|
||||
:checked="checkAll"
|
||||
@change="onCheckAllChange"
|
||||
>
|
||||
Check all
|
||||
</a-checkbox>
|
||||
<a-divider />
|
||||
<a-checkbox-group
|
||||
:options="plainOptions"
|
||||
:value="checkedList"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
# Controlled Checkbox
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Communicated with other components.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, shallowRef } from 'vue'
|
||||
|
||||
const checked = shallowRef(true)
|
||||
const disabled = shallowRef(false)
|
||||
|
||||
function toggleChecked() {
|
||||
checked.value = !checked.value
|
||||
}
|
||||
|
||||
function toggleDisable() {
|
||||
disabled.value = !disabled.value
|
||||
}
|
||||
|
||||
function onChange(e: any) {
|
||||
console.log('checked = ', e.target.checked)
|
||||
checked.value = e.target.checked
|
||||
}
|
||||
|
||||
const label = computed(() => `${checked.value ? 'Checked' : 'Unchecked'}-${disabled.value ? 'Disabled' : 'Enabled'}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p style="margin-bottom: 20px">
|
||||
<a-checkbox
|
||||
:checked="checked"
|
||||
:disabled="disabled"
|
||||
@change="onChange"
|
||||
>
|
||||
{{ label }}
|
||||
</a-checkbox>
|
||||
</p>
|
||||
<p>
|
||||
<a-button type="primary" size="small" @click="toggleChecked">
|
||||
{{ !checked ? 'Check' : 'Uncheck' }}
|
||||
</a-button>
|
||||
<a-button style="margin: 0 10px" type="primary" size="small" @click="toggleDisable">
|
||||
{{ !disabled ? 'Disable' : 'Enable' }}
|
||||
</a-button>
|
||||
</p>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,25 @@
|
||||
# Disabled
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Disabled checkbox.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checked1 = ref(false)
|
||||
const checked2 = ref(false)
|
||||
const checked3 = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-checkbox v-model:checked="checked1" disabled />
|
||||
<br>
|
||||
<a-checkbox v-model:checked="checked2" disabled indeterminate />
|
||||
<br>
|
||||
<a-checkbox v-model:checked="checked3" disabled />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,39 @@
|
||||
# Checkbox Group
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Generate a group of checkboxes from an array.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange']
|
||||
|
||||
const options: any[] = [
|
||||
{ label: 'Apple', value: 'Apple', className: 'label-1' },
|
||||
{ label: 'Pear', value: 'Pear', className: 'label-2' },
|
||||
{ label: 'Orange', value: 'Orange', className: 'label-3' },
|
||||
]
|
||||
|
||||
const optionsWithDisabled: any[] = [
|
||||
{ label: 'Apple', value: 'Apple', className: 'label-1' },
|
||||
{ label: 'Pear', value: 'Pear', className: 'label-2' },
|
||||
{ label: 'Orange', value: 'Orange', className: 'label-3', disabled: false },
|
||||
]
|
||||
|
||||
const val = shallowRef()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-checkbox-group v-model:value="val" :default-value="['Apple']" :options="plainOptions" />
|
||||
<br>
|
||||
<br>
|
||||
<a-checkbox-group v-model:value="val" :default-value="['Apple']" :options="options" />
|
||||
<br>
|
||||
<br>
|
||||
<a-checkbox-group v-model:value="val" disabled :default-value="['Apple']" :options="optionsWithDisabled" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
# Use with Grid
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
We can use Checkbox and Grid in CheckboxGroup, to implement complex layout.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref([])
|
||||
|
||||
function onChange(checkedValues: any[]) {
|
||||
console.log('checked = ', checkedValues)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-checkbox-group v-model:value="value" style="width: 100%" @change="onChange">
|
||||
<a-row>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="A">
|
||||
A
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="B">
|
||||
B
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="C">
|
||||
C
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="D">
|
||||
D
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-checkbox value="E">
|
||||
E
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CheckboxProps } from 'antdv-next'
|
||||
import { theme } from 'antdv-next'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checked = ref(true)
|
||||
const { token } = theme.useToken()
|
||||
|
||||
// Object styles — 静态样式对象
|
||||
const stylesObject: CheckboxProps['styles'] = {
|
||||
icon: {
|
||||
borderRadius: '6px',
|
||||
},
|
||||
label: {
|
||||
color: 'blue',
|
||||
},
|
||||
}
|
||||
|
||||
// Function classes — 根据 checked 状态动态返回类名
|
||||
const classesFn: CheckboxProps['classes'] = (info) => {
|
||||
const base: Record<string, string> = {
|
||||
root: 'checkbox-demo-root',
|
||||
icon: 'checkbox-demo-icon',
|
||||
label: 'checkbox-demo-label',
|
||||
}
|
||||
if (info.props.checked) {
|
||||
return {
|
||||
root: base.root,
|
||||
icon: `${base.icon} checkbox-demo-icon-checked`,
|
||||
label: `${base.label} checkbox-demo-label-checked`,
|
||||
}
|
||||
}
|
||||
return base
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-checkbox :styles="stylesObject">
|
||||
Object styles
|
||||
</a-checkbox>
|
||||
<a-checkbox
|
||||
v-model:checked="checked"
|
||||
:classes="classesFn"
|
||||
>
|
||||
Function classes
|
||||
</a-checkbox>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.checkbox-demo-root {
|
||||
border-radius: v-bind('`${token.borderRadius}px`');
|
||||
background-color: v-bind('token.colorBgContainer');
|
||||
}
|
||||
|
||||
.checkbox-demo-icon {
|
||||
border-color: v-bind('token.colorWarning') !important;
|
||||
}
|
||||
|
||||
.checkbox-demo-icon-checked {
|
||||
background-color: v-bind('token.colorWarning') !important;
|
||||
border-color: v-bind('token.colorWarning') !important;
|
||||
}
|
||||
|
||||
.checkbox-demo-label {
|
||||
color: v-bind('token.colorTextDisabled') !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checkbox-demo-label-checked {
|
||||
color: v-bind('token.colorWarning') !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Collect user's choices.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Disabled | demo/disabled.md |
|
||||
| Controlled Checkbox | demo/controller.md |
|
||||
| Checkbox Group | demo/group.md |
|
||||
| Check all | demo/check-all.md |
|
||||
| Use with Grid | demo/layout.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Checkbox
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| checked | Specifies whether the checkbox is selected, support `v-model:checked` | string \| number \| boolean \| object | false | - | × |
|
||||
| checkedValue | The value when checked | string \| number \| boolean \| object | true | - | × |
|
||||
| defaultChecked | Whether to set the initial state | string \| number \| boolean \| object | false | - | × |
|
||||
| disabled | If disable checkbox | boolean | false | - | × |
|
||||
| indeterminate | The indeterminate checked state of checkbox | boolean | false | - | × |
|
||||
| unCheckedValue | The value when unchecked | string \| number \| boolean \| object | false | - | × |
|
||||
|
||||
#### Events
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| change | The callback function that is triggered when the state changes | (e: CheckboxChangeEvent) => void | - |
|
||||
| focus | Called when entering the component | function() | - |
|
||||
| blur | Called when leaving the component | function() | - |
|
||||
|
||||
### CheckboxGroup
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| options | Specifies options | string\[] \| number\[] \| Option\[] | \[] | - |
|
||||
| disabled | If disable all checkboxes | boolean | false | - |
|
||||
| name | The `name` property of all `input[type="checkbox"]` children | string | - | - |
|
||||
| value | Used for setting the currently selected value, support `v-model:value` | (string \| number \| boolean)\[] | \[] | - |
|
||||
| labelRender | - | (params: { item: CheckboxOptionType, index: number }) => any | - | - |
|
||||
|
||||
#### Events
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| change | The callback function that is triggered when the state changes | (checkedValue: T[]) => void | - |
|
||||
|
||||
#### Slots
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| labelRender | - | (params: { item: CheckboxOptionType, index: number }) => any | - |
|
||||
|
||||
## Semantic DOM
|
||||
| _semantic | demo/_semantic.md |
|
||||
Reference in new issue
Block a user