oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260720172840

Browse Source
This commit is contained in:
oneao committed 2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
3117 files changed
+201407 -1236
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/_semantic.md
+37
View File
@@ -0,0 +1,37 @@
# _semantic
## Source
```vue
<script setup lang="ts">
import { AntDesignOutlined } from '@antdv-next/icons'
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: 'content', desc: t('content'), version: '1.0.0' },
])
</script>
<template>
<SemanticPreview
component-name="Button"
:semantics="semantics"
>
<template #default="{ classes }">
<a-button type="primary" :classes="classes">
<template #icon>
<AntDesignOutlined />
</template>
Antdv Next
</a-button>
</template>
</SemanticPreview>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/basic.md
+27
View File
@@ -0,0 +1,27 @@
# Syntactic sugar
## Description (en-US)
Through the `type` syntactic sugar, use the preset button styles: `primary` buttons, `default` buttons, `dashed` buttons, `text` buttons, and `link` buttons.
## Source
```vue
<template>
<a-flex gap="small" wrap>
<a-button type="primary">
Primary Button
</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">
Dashed Button
</a-button>
<a-button type="text">
Text Button
</a-button>
<a-button type="link">
Link Button
</a-button>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/block.md
+32
View File
@@ -0,0 +1,32 @@
# Block Button
## Description (en-US)
The `block` property will make a button fit to its parent width.
## Source
```vue
<template>
<a-flex vertical gap="small" style="width: 100%">
<a-button type="primary" block>
Primary
</a-button>
<a-button block>
Default
</a-button>
<a-button type="dashed" block>
Dashed
</a-button>
<a-button disabled block>
disabled
</a-button>
<a-button type="text" block>
text
</a-button>
<a-button type="link" block>
Link
</a-button>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/color-variant.md
+146
View File
@@ -0,0 +1,146 @@
# Color & Variant
## Description (en-US)
You can set the `color` and `variant` attributes at the same time can derive more variant buttons.
## Source
```vue
<script setup lang="ts">
import { useResponsive } from 'antdv-next'
const { xl } = useResponsive()
</script>
<template>
<a-config-provider :component-size="xl ? 'middle' : 'small'">
<a-flex vertical gap="small">
<a-flex gap="small" wrap>
<a-button color="default" variant="solid">
Solid
</a-button>
<a-button color="default" variant="outlined">
Outlined
</a-button>
<a-button color="default" variant="dashed">
Dashed
</a-button>
<a-button color="default" variant="filled">
Filled
</a-button>
<a-button color="default" variant="text">
Text
</a-button>
<a-button color="default" variant="link">
Link
</a-button>
</a-flex>
<a-flex gap="small" wrap>
<a-button color="primary" variant="solid">
Solid
</a-button>
<a-button color="primary" variant="outlined">
Outlined
</a-button>
<a-button color="primary" variant="dashed">
Dashed
</a-button>
<a-button color="primary" variant="filled">
Filled
</a-button>
<a-button color="primary" variant="text">
Text
</a-button>
<a-button color="primary" variant="link">
Link
</a-button>
</a-flex>
<a-flex gap="small" wrap>
<a-button color="danger" variant="solid">
Solid
</a-button>
<a-button color="danger" variant="outlined">
Outlined
</a-button>
<a-button color="danger" variant="dashed">
Dashed
</a-button>
<a-button color="danger" variant="filled">
Filled
</a-button>
<a-button color="danger" variant="text">
Text
</a-button>
<a-button color="danger" variant="link">
Link
</a-button>
</a-flex>
<a-flex gap="small" wrap>
<a-button color="pink" variant="solid">
Solid
</a-button>
<a-button color="pink" variant="outlined">
Outlined
</a-button>
<a-button color="pink" variant="dashed">
Dashed
</a-button>
<a-button color="pink" variant="filled">
Filled
</a-button>
<a-button color="pink" variant="text">
Text
</a-button>
<a-button color="pink" variant="link">
Link
</a-button>
</a-flex>
<a-flex gap="small" wrap>
<a-button color="purple" variant="solid">
Solid
</a-button>
<a-button color="purple" variant="outlined">
Outlined
</a-button>
<a-button color="purple" variant="dashed">
Dashed
</a-button>
<a-button color="purple" variant="filled">
Filled
</a-button>
<a-button color="purple" variant="text">
Text
</a-button>
<a-button color="purple" variant="link">
Link
</a-button>
</a-flex>
<a-flex gap="small" wrap>
<a-button color="cyan" variant="solid">
Solid
</a-button>
<a-button color="cyan" variant="outlined">
Outlined
</a-button>
<a-button color="cyan" variant="dashed">
Dashed
</a-button>
<a-button color="cyan" variant="filled">
Filled
</a-button>
<a-button color="cyan" variant="text">
Text
</a-button>
<a-button color="cyan" variant="link">
Link
</a-button>
</a-flex>
</a-flex>
</a-config-provider>
</template>
<style scoped>
</style>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/danger.md
+29
View File
@@ -0,0 +1,29 @@
# Danger Buttons
## Description (en-US)
The `danger` is a property of buttons after antd 4.0.
## Source
```vue
<template>
<a-flex wrap gap="small">
<a-button type="primary" danger>
Primary
</a-button>
<a-button danger>
Default
</a-button>
<a-button type="dashed" danger>
Dashed
</a-button>
<a-button type="text" danger>
Text
</a-button>
<a-button type="link" danger>
Link
</a-button>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/disabled.md
+92
View File
@@ -0,0 +1,92 @@
# Disabled
## Description (en-US)
To mark a button as disabled, add the `disabled` property to the `Button`.
## Source
```vue
<template>
<a-flex gap="small" align="flex-start" vertical>
<a-flex gap="small">
<a-button type="primary">
Primary
</a-button>
<a-button type="primary" disabled>
Primary(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button>Default</a-button>
<a-button disabled>
Default(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button type="dashed">
Dashed
</a-button>
<a-button type="dashed" disabled>
Dashed(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button type="text">
Text
</a-button>
<a-button type="text" disabled>
Text(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button type="link">
Link
</a-button>
<a-button type="link" disabled>
Link(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button type="primary" href="https://antdv-next.com/index-cn">
Href Primary
</a-button>
<a-button type="primary" href="https://antdv-next.com/index-cn" disabled>
Href Primary(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button danger>
Danger Default
</a-button>
<a-button danger disabled>
Danger Default(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button danger type="text">
Danger Text
</a-button>
<a-button danger type="text" disabled>
Danger Text(disabled)
</a-button>
</a-flex>
<a-flex gap="small">
<a-button type="link" danger>
Danger Link
</a-button>
<a-button type="link" danger disabled>
Danger Link(disabled)
</a-button>
</a-flex>
<a-flex gap="small" class="site-button-ghost-wrapper">
<a-button ghost>
Ghost
</a-button>
<a-button ghost disabled>
Ghost(disabled)
</a-button>
</a-flex>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/ghost.md
+26
View File
@@ -0,0 +1,26 @@
# Ghost Button
## Description (en-US)
The `ghost` property will make a button's background transparent, this is commonly used in colored background.
## Source
```vue
<template>
<a-flex wrap gap="small" class="site-button-ghost-wrapper">
<a-button type="primary" ghost>
Primary
</a-button>
<a-button ghost>
Default
</a-button>
<a-button type="dashed" ghost>
Dashed
</a-button>
<a-button type="primary" danger ghost>
Danger
</a-button>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/icon-placement.md
+105
View File
@@ -0,0 +1,105 @@
# Icon Placement
## Description (en-US)
You can set the position of a button's icon by setting the `iconPlacement` to `start` or `end` respectively.
## Source
```vue
<script setup lang="ts">
import { SearchOutlined } from '@antdv-next/icons'
import { ref } from 'vue'
const position = ref<'start' | 'end'>('end')
</script>
<template>
<a-space>
<a-radio-group v-model:value="position">
<a-radio-button value="start">
start
</a-radio-button>
<a-radio-button value="end">
end
</a-radio-button>
</a-radio-group>
</a-space>
<a-divider title-placement="start" plain>
Preview
</a-divider>
<a-flex gap="small" vertical>
<a-flex wrap gap="small">
<a-tooltip title="search">
<a-button type="primary" shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
</a-tooltip>
<a-button type="primary" shape="circle">
A
</a-button>
<a-button type="primary" :icon-placement="position">
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
<a-tooltip title="search">
<a-button shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
</a-tooltip>
<a-button :icon-placement="position">
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
</a-flex>
<a-flex wrap gap="small">
<a-tooltip title="search">
<a-button shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
</a-tooltip>
<a-button type="text" :icon-placement="position">
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
<a-tooltip title="search">
<a-button type="dashed" shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
</a-tooltip>
<a-button type="dashed" :icon-placement="position">
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
<a-button
href="https://www.google.com"
target="_blank"
:icon-placement="position"
>
<template #icon>
<SearchOutlined />
</template>
</a-button>
<a-button type="primary" loading :icon-placement="position">
Loading
</a-button>
</a-flex>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/icon.md
+74
View File
@@ -0,0 +1,74 @@
# Icon
## Description (en-US)
You can add an icon using the `icon`/`slot` property.
## Source
```vue
<script setup lang="ts">
import { SearchOutlined } from '@antdv-next/icons'
</script>
<template>
<a-flex gap="small" vertical>
<a-flex wrap gap="small">
<a-button type="primary" shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
<a-button type="primary" shape="circle">
A
</a-button>
<a-button type="primary">
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
<a-button shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
<a-button>
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
</a-flex>
<a-flex wrap gap="small">
<a-button shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
<a-button>
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
<a-button type="dashed" shape="circle">
<template #icon>
<SearchOutlined />
</template>
</a-button>
<a-button type="dashed">
<template #icon>
<SearchOutlined />
</template>
Search
</a-button>
<a-button href="https://www.google.com" target="_blank">
<template #icon>
<SearchOutlined />
</template>
</a-button>
</a-flex>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/linear-gradient.md
+59
View File
@@ -0,0 +1,59 @@
# Gradient Button
## Description (en-US)
You can add custom styles by setting `button.classes` in ConfigProvider. This example shows how to add a gradient effect to buttons.
## Source
```vue
<script setup lang="ts">
import { AntDesignOutlined } from '@antdv-next/icons'
</script>
<template>
<a-config-provider
:button="{
classes: {
root: 'linear-gradient-button',
},
}"
>
<a-space>
<a-button type="primary" size="large">
<template #icon>
<AntDesignOutlined />
</template>
Gradient Button
</a-button>
<a-button size="large">
Button
</a-button>
</a-space>
</a-config-provider>
</template>
<style>
.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous) {
position: relative;
}
.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous) > span {
position: relative;
}
.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous)::before {
content: '';
background: linear-gradient(135deg, #6253e1, #04befe);
position: absolute;
inset: -1px;
opacity: 1;
transition: all 0.3s;
border-radius: inherit;
}
.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous):hover::before {
opacity: 0;
}
</style>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/loading.md
+74
View File
@@ -0,0 +1,74 @@
# Loading
## Description (en-US)
A loading indicator can be added to a button by setting the `loading` property on the `Button`. The `loading.icon` can be used to customize the loading icon.
## Source
```vue
<script setup lang="ts">
import { PoweroffOutlined, SyncOutlined } from '@antdv-next/icons'
import { ref } from 'vue'
const loadings = ref<boolean[]>([])
function enterLoading(index: number) {
loadings.value[index] = true
setTimeout(() => {
loadings.value[index] = false
}, 3000)
}
</script>
<template>
<a-flex gap="small" vertical>
<a-flex gap="small" align="center" wrap>
<a-button type="primary" loading>
Loading
</a-button>
<a-button type="primary" size="small" loading>
Loading
</a-button>
<a-button type="primary" loading>
<template #icon>
<PoweroffOutlined />
</template>
</a-button>
<a-button type="primary" loading>
Loading Icon
<template #loadingIcon>
<SyncOutlined spin />
</template>
</a-button>
</a-flex>
<a-flex gap="small" wrap>
<a-button type="primary" :loading="loadings[0]" @click="enterLoading(0)">
Icon Start
</a-button>
<a-button type="primary" :loading="loadings[2]" @click="enterLoading(2)">
IconEnd
</a-button>
<a-button type="primary" :loading="loadings[1]" @click="enterLoading(1)">
Icon Replace
<template #icon>
<PoweroffOutlined />
</template>
</a-button>
<a-button type="primary" :loading="loadings[3]" @click="enterLoading(3)">
<template #icon>
<PoweroffOutlined />
</template>
</a-button>
<a-button type="primary" :loading="loadings[3]" @click="enterLoading(3)">
<template #icon>
<PoweroffOutlined />
</template>
<template #loadingIcon>
<SyncOutlined spin />
</template>
Loading Icon
</a-button>
</a-flex>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/multiple.md
+52
View File
@@ -0,0 +1,52 @@
# Multiple Buttons
## Description (en-US)
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown](../../dropdown/docs.md/#dropdown-demo-dropdown-button).
## Source
```vue
<script setup lang="ts">
import type { MenuEmits } from 'antdv-next'
import { EllipsisOutlined } from '@antdv-next/icons'
const onMenuClick: MenuEmits['click'] = (e) => {
console.log('click', e)
}
const items = [
{
key: '1',
label: '1st item',
},
{
key: '2',
label: '2nd item',
},
{
key: '3',
label: '3rd item',
},
]
</script>
<template>
<a-flex align="flex-start" gap="small" vertical>
<a-button type="primary">
primary
</a-button>
<a-button>secondary</a-button>
<a-space-compact>
<a-button>Actions</a-button>
<a-dropdown :menu="{ items, onClick: onMenuClick }" placement="bottomRight">
<a-button>
<template #icon>
<EllipsisOutlined />
</template>
</a-button>
</a-dropdown>
</a-space-compact>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/size.md
+81
View File
@@ -0,0 +1,81 @@
# Size
## Description (en-US)
Antdv Next supports three sizes of buttons: small, default and large.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
## Source
```vue
<script setup lang="ts">
import type { SizeType } from 'antdv-next'
import { DownloadOutlined } from '@antdv-next/icons'
import { ref } from 'vue'
const size = ref<SizeType>('large')
</script>
<template>
<a-radio-group v-model:value="size">
<a-radio-button value="large">
Large
</a-radio-button>
<a-radio-button value="default">
Default
</a-radio-button>
<a-radio-button value="small">
Small
</a-radio-button>
</a-radio-group>
<a-divider title-placement="start" plain>
Preview
</a-divider>
<a-flex gap="small" align="flex-start" vertical>
<a-flex gap="small" wrap>
<a-button type="primary" :size="size">
Primary
</a-button>
<a-button :size="size">
Default
</a-button>
<a-button type="dashed" :size="size">
Dashed
</a-button>
</a-flex>
<a-button type="link" :size="size">
Link
</a-button>
<a-flex gap="small" wrap>
<a-button type="primary" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" shape="circle" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" shape="round" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" shape="round" :size="size">
<template #icon>
<DownloadOutlined />
</template>
Download
</a-button>
<a-button type="primary" :size="size">
<template #icon>
<DownloadOutlined />
</template>
Download
</a-button>
</a-flex>
</a-flex>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/demo/style-class.md
+63
View File
@@ -0,0 +1,63 @@
# Custom semantic dom styling
## Description (en-US)
## Source
```vue
<script setup lang="ts">
import type { ButtonProps } from 'antdv-next'
import { theme } from 'antdv-next'
const { token } = theme.useToken()
const classes: ButtonProps['classes'] = {
root: 'demo-button-root',
content: 'demo-button-content',
}
const stylesObject: ButtonProps['styles'] = {
root: {
boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
},
}
const stylesFn: ButtonProps['styles'] = (info) => {
if (info?.props?.type === 'primary') {
return {
root: {
backgroundColor: '#171717',
},
content: {
color: '#fff',
},
}
}
return {}
}
</script>
<template>
<a-flex gap="small">
<a-button type="default" :classes="classes" :styles="stylesObject">
Object
</a-button>
<a-button type="primary" :classes="classes" :styles="stylesFn">
Function
</a-button>
</a-flex>
</template>
<style>
.demo-button-root {
border: 1px solid v-bind('token.colorBorder');
border-radius: v-bind('`${token.borderRadius}px`');
padding: v-bind('`${token.paddingXS}px`') v-bind('`${token.padding}px`');
height: auto;
}
.demo-button-content {
color: v-bind('token.colorText');
}
</style>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/docs.md
+124
View File
@@ -0,0 +1,124 @@
---
title: Button
description: To trigger an operation.
---
## When To Use
A button means an operation (or a series of operations). Clicking a button will trigger its corresponding business logic.
In Antdv Next we provide 5 types of button.
- 🔵 Primary button: used for the main action, there can be at most one primary button in a section.
- ⚪️ Default button: used for a series of actions without priority.
- 😶 Dashed button: commonly used for adding more actions.
- 🔤 Text button: used for the most secondary action.
- 🔗 Link button: used for external links.
And 4 other properties additionally.
- 🔴 `danger`: used for actions of risk, like deletion or authorization.
- 👻 `ghost`: used in situations with complex background, home pages usually.
- 🚫 `disabled`: used when actions are not available.
- 🔃 `loading`: adds a loading spinner in button, avoids multiple submits too.
## Demos
| Demo | Path |
| --- | --- |
| Syntactic sugar | demo/basic.md |
| Color & Variant | demo/color-variant.md |
| Icon | demo/icon.md |
| Icon Placement | demo/icon-placement.md |
| Disabled | demo/disabled.md |
| Loading | demo/loading.md |
| Size | demo/size.md |
| Ghost Button | demo/ghost.md |
| Danger Buttons | demo/danger.md |
| Block Button | demo/block.md |
| Multiple Buttons | demo/multiple.md |
| Gradient Button | demo/linear-gradient.md |
| Custom semantic dom styling | demo/style-class.md |
## API
### Props
Common props ref：[Common props](../../docs/vue/common-props.md)
Different button styles generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| autoInsertSpace | We add a space between two Chinese characters by default. Set `autoInsertSpace` to `false` to disable. | boolean | `true` | - | ✓ |
| block | Option to fit button width to its parent width | boolean | false | - | × |
| color | Set button color | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | - | ✓ |
| danger | Syntactic sugar. Set the danger status of button. Will follow `color` if provided | boolean | false | - | × |
| disabled | Disabled state of button | boolean | false | - | × |
| ghost | Make background transparent and invert text and border colors | boolean | false | - | × |
| href | Redirect url of link button | string | - | - | × |
| htmlType | Set the original html `type` of `button`, see: [HTML Standard](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | - | × |
| iconPlacement | Set the icon position of button | `start` \| `end` | `start` | - | × |
| loading | Set the loading status of button | boolean \| &#123; delay: number, icon: VueNode &#125; | false | - | × |
| loadingIcon | (Global config only) Set the loading icon of button | VueNode | `<LoadingOutlined />` | - | ✓ |
| shape | Can be used to set button shape | `default` \| `circle` \| `round` | `default` | - | ✓ |
| size | Set the size of button | `large` \| `middle` \| `small` | `middle` | - | × |
| target | Same as target attribute of a, works when href is specified | string | - | - | × |
| type | Syntactic sugar. Set button type. Will follow `variant` & `color` if provided | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | - | × |
| variant | Set button variant | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | - | ✓ |
### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| `click` | Callback executed when button is clicked | `(event: MouseEvent) =&gt; void` | - |
### Slots
| Slot | Description | Type | Version |
| --- | --- | ---- | --- |
| `icon` | Set the icon component of button | - | - |
| `loadingIcon` | Set the loading icon component of button | - | - |
## Types
### PresetColors
> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
## Semantic DOM
| _semantic | demo/_semantic.md |
## FAQ
### How to choose type and color & variant?
Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.
```vue
<template>
<a-button type="primary">
click
</a-button>
</template>
```
Equivalent
```vue
<template>
<a-button color="primary" variant="solid">
click
</a-button>
</template>
```
### How to close the click wave effect?
If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](../config-provider/docs.md#api) as `true`.
```vue
<template>
<a-config-provider :wave="{ disabled: true }">
<a-button>click</a-button>
</a-config-provider>
</template>
```
code/fms/.codebuddy/skills/antdv-next/references/components/button/token.md
+61
View File
@@ -0,0 +1,61 @@
# button Token
Use these variables through `theme.components.Button`. This document lists definitions only and does not include values.
```vue
<a-config-provider
:theme="{
token: {
// Global token configuration
},
components: {
Button: {
// Token name: value
},
},
}"
>
...
</a-config-provider>
```
## Token List
| Token | Type | Description |
| --- | --- | --- |
| `fontWeight` | `CSSProperties` | Font weight of text |
| `iconGap` | `CSSProperties` | Gap between icon and text |
| `defaultShadow` | `string` | Shadow of default button |
| `primaryShadow` | `string` | Shadow of primary button |
| `dangerShadow` | `string` | Shadow of danger button |
| `primaryColor` | `string` | Text color of primary button |
| `defaultColor` | `string` | Text color of default button |
| `defaultBg` | `string` | Background color of default button |
| `defaultBorderColor` | `string` | Border color of default button |
| `dangerColor` | `string` | Text color of danger button |
| `defaultHoverBg` | `string` | Background color of default button when hover |
| `defaultHoverColor` | `string` | Text color of default button when hover |
| `defaultHoverBorderColor` | `string` | Border color of default button |
| `defaultActiveBg` | `string` | Background color of default button when active |
| `defaultActiveColor` | `string` | Text color of default button when active |
| `defaultActiveBorderColor` | `string` | Border color of default button when active |
| `defaultGhostColor` | `string` | Text color of default ghost button |
| `ghostBg` | `string` | Background color of ghost button |
| `defaultGhostBorderColor` | `string` | Border color of default ghost button |
| `solidTextColor` | `string` | Default text color for solid buttons. |
| `textTextColor` | `string` | Default text color for text buttons |
| `textTextHoverColor` | `string` | Default text color for text buttons on hover |
| `textTextActiveColor` | `string` | Default text color for text buttons on active |
| `paddingInline` | `CSSProperties` | Horizontal padding of button |
| `paddingInlineLG` | `CSSProperties` | Horizontal padding of large button |
| `paddingInlineSM` | `CSSProperties` | Horizontal padding of small button |
| `onlyIconSize` | `string \| number` | Icon size of button which only contains icon |
| `onlyIconSizeLG` | `string \| number` | Icon size of large button which only contains icon |
| `onlyIconSizeSM` | `string \| number` | Icon size of small button which only contains icon |
| `linkHoverBg` | `string` | Background color of link button when hover |
| `textHoverBg` | `string` | Background color of text button when hover |
| `contentFontSize` | `number` | Font size of button content |
| `contentFontSizeLG` | `number` | Font size of large button content |
| `contentFontSizeSM` | `number` | Font size of small button content |
| `defaultBgDisabled` | `string` | - |
| `dashedBgDisabled` | `string` | - |