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/.claude/skills/antdv-next/references/components/float-button/demo/_semantic.md
+44
View File
@@ -0,0 +1,44 @@
# _semantic
## Source
```vue
<script setup lang="ts">
import { QuestionCircleOutlined } from '@antdv-next/icons'
import { FloatButton } from 'antdv-next'
import { computed } from 'vue'
import { SemanticPreview } from '@/components/semantic'
import { useComponentLocale } from '@/composables/use-locale'
import { locales } from '../locales'
const PurePanel = (FloatButton as any)._InternalPanelDoNotUseOrYouWillBeFired
const { t } = useComponentLocale(locales)
const semantics = computed(() => [
{ name: 'root', desc: t('root') },
{ name: 'icon', desc: t('icon') },
{ name: 'content', desc: t('content') },
])
</script>
<template>
<SemanticPreview
component-name="FloatButton"
:semantics="semantics"
>
<template #default="{ classes }">
<PurePanel
type="primary"
shape="square"
content="HELP"
:classes="classes"
>
<template #icon>
<QuestionCircleOutlined />
</template>
</PurePanel>
</template>
</SemanticPreview>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/_semantic_group.md
+64
View File
@@ -0,0 +1,64 @@
# _semantic_group
## Source
```vue
<script setup lang="ts">
import { AlertOutlined, BugOutlined, BulbOutlined } from '@antdv-next/icons'
import { FloatButton } from 'antdv-next'
import { computed, h } from 'vue'
import { SemanticPreview } from '@/components/semantic'
import { useComponentLocale } from '@/composables/use-locale'
import { locales } from '../locales'
const PurePanel = (FloatButton as any)._InternalPanelDoNotUseOrYouWillBeFired
const { t } = useComponentLocale(locales)
const semantics = computed(() => [
{ name: 'root', desc: t('group.root') },
{ name: 'list', desc: t('group.list') },
{ name: 'item', desc: t('group.item') },
{ name: 'itemIcon', desc: t('group.itemIcon') },
{ name: 'itemContent', desc: t('group.itemContent') },
{ name: 'trigger', desc: t('group.trigger') },
{ name: 'triggerIcon', desc: t('group.triggerIcon') },
{ name: 'triggerContent', desc: t('group.triggerContent') },
])
const items = [
{
icon: h(AlertOutlined),
content: 'warn',
},
{
icon: h(BugOutlined),
content: 'bug',
},
{
icon: h(BulbOutlined),
content: 'idea',
},
]
</script>
<template>
<SemanticPreview
component-name="FloatButton"
:semantics="semantics"
:style="{ paddingTop: '100px' }"
>
<template #default="{ classes }">
<PurePanel
type="primary"
shape="square"
:items="items"
trigger="hover"
:open="true"
content="back"
:classes="classes"
/>
</template>
</SemanticPreview>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/back-top.md
+22
View File
@@ -0,0 +1,22 @@
# BackTop
## Description (en-US)
`BackTop` makes it easy to go back to the top of the page.
## Source
```vue
<template>
<div class="h-300vh p-10px">
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<a-float-back-top />
</div>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/badge.md
+34
View File
@@ -0,0 +1,34 @@
# badge
## Description (en-US)
FloatButton with Badge.
## Source
```vue
<script setup lang="ts">
import { QuestionCircleOutlined } from '@antdv-next/icons'
</script>
<template>
<a-float-button shape="circle" style="inset-inline-end: calc(24px + 70px + 70px)" :badge="{ dot: true }" />
<a-float-button-group shape="circle" style="inset-inline-end: calc(24px + 70px)">
<a-float-button href="https://antdv-next.com" :badge="{ count: 5, color: 'blue' }">
<template #tooltip>
<div>Custom badge color</div>
</template>
</a-float-button>
<a-float-button :badge="{ count: 5 }" />
</a-float-button-group>
<a-float-button-group shape="circle">
<a-float-button :badge="{ count: 12 }">
<template #icon>
<QuestionCircleOutlined />
</template>
</a-float-button>
<a-float-button :badge="{ count: 123, overflowCount: 999 }" />
<a-float-back-top :visibility-height="0" />
</a-float-button-group>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/basic.md
+13
View File
@@ -0,0 +1,13 @@
# Basic
## Description (en-US)
The most basic usage.
## Source
```vue
<template>
<a-float-button @click="() => console.log('onClick')" />
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/content.md
+41
View File
@@ -0,0 +1,41 @@
# Content
## Description (en-US)
Setting the `content` property allows you to show a FloatButton with a description.
> supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.
## Source
```vue
<script setup lang="ts">
import { FileTextOutlined } from '@antdv-next/icons'
</script>
<template>
<a-float-button
shape="square"
content="HELP INFO"
style="inset-inline-end: 24px;"
>
<template #icon>
<FileTextOutlined />
</template>
</a-float-button>
<a-float-button
shape="square"
content="HELP INFO"
style="inset-inline-end: 94px;"
/>
<a-float-button
shape="square"
content="HELP"
style="inset-inline-end: 164px;"
>
<template #icon>
<FileTextOutlined />
</template>
</a-float-button>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/controlled.md
+53
View File
@@ -0,0 +1,53 @@
# Controlled mode
## Description (en-US)
Set the component to controlled mode through `open`, which need to be used together with `trigger`.
## Source
```vue
<script setup lang="ts">
import { CommentOutlined, CustomerServiceOutlined } from '@antdv-next/icons'
import { ref } from 'vue'
const open = ref(true)
</script>
<template>
<a-switch v-model:checked="open" style="margin: 16px;" />
<a-float-button-group
:open="open"
trigger="click"
style="inset-inline-end: 24px;"
>
<template #icon>
<CustomerServiceOutlined />
</template>
<a-float-button />
<a-float-button />
<a-float-button>
<template #icon>
<CommentOutlined />
</template>
</a-float-button>
</a-float-button-group>
<a-float-button-group
:open="open"
shape="square"
trigger="click"
style="inset-inline-end: 88px;"
>
<template #icon>
<CustomerServiceOutlined />
</template>
<a-float-button />
<a-float-button />
<a-float-button>
<template #icon>
<CommentOutlined />
</template>
</a-float-button>
</a-float-button-group>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/group-menu.md
+52
View File
@@ -0,0 +1,52 @@
# Menu mode
## Description (en-US)
Open menu mode with `trigger`, which could be `hover` or `click`.
## Source
```vue
<script setup lang="ts">
import { CommentOutlined, CustomerServiceOutlined } from '@antdv-next/icons'
</script>
<template>
<a-float-button-group
trigger="click"
type="primary"
shape="square"
style="inset-inline-end: 24px"
>
<template #icon>
<CustomerServiceOutlined />
</template>
<a-float-button />
<a-float-button>
<template #icon>
<CommentOutlined />
</template>
</a-float-button>
</a-float-button-group>
<a-float-button-group
trigger="hover"
type="primary"
style="inset-inline-end: 94px"
>
<template #icon>
<CustomerServiceOutlined />
</template>
<a-float-button />
<a-float-button>
<template #icon>
<CommentOutlined />
</template>
</a-float-button>
</a-float-button-group>
</template>
<style scoped>
</style>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/group.md
+39
View File
@@ -0,0 +1,39 @@
# FloatButton Group
## Description (en-US)
When multiple buttons are used together, `<a-float-button-group />` is recommended. By setting the `shape` property of FloatButton.Group, you can change the shape of group. The `shape` of the FloatButton.Group will override the `shape` of FloatButtons inside.
## Source
```vue
<script setup lang="ts">
import { QuestionCircleOutlined, SyncOutlined } from '@antdv-next/icons'
</script>
<template>
<a-float-button-group shape="circle" style="inset-inline-end: 24px;">
<a-float-button>
<template #icon>
<QuestionCircleOutlined />
</template>
</a-float-button>
<a-float-button />
<a-float-back-top :visibility-height="0" />
</a-float-button-group>
<a-float-button-group shape="square" style="inset-inline-end: 94px;">
<a-float-button>
<template #icon>
<QuestionCircleOutlined />
</template>
</a-float-button>
<a-float-button />
<a-float-button>
<template #icon>
<SyncOutlined />
</template>
</a-float-button>
<a-float-back-top :visibility-height="0" />
</a-float-button-group>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/placement.md
+75
View File
@@ -0,0 +1,75 @@
# placement
## Description (en-US)
Customize animation placement, providing four preset placement: `top`, `right`, `bottom`, `left`, the `top` position by default.
## Source
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { CommentOutlined, DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@antdv-next/icons'
const BOX_SIZE = 100
const BUTTON_SIZE = 40
const wrapperStyle: CSSProperties = {
width: '100%',
height: '100vh',
overflow: 'hidden',
position: 'relative',
}
const boxStyle: CSSProperties = {
width: `${BOX_SIZE}px`,
height: `${BOX_SIZE}px`,
position: 'relative',
}
const insetInlineEnd = [
(BOX_SIZE - BUTTON_SIZE) / 2,
-(BUTTON_SIZE / 2),
(BOX_SIZE - BUTTON_SIZE) / 2,
BOX_SIZE - BUTTON_SIZE / 2,
]
const bottom = [
BOX_SIZE - BUTTON_SIZE / 2,
(BOX_SIZE - BUTTON_SIZE) / 2,
-BUTTON_SIZE / 2,
(BOX_SIZE - BUTTON_SIZE) / 2,
]
const placements = ['top', 'right', 'bottom', 'left'] as const
const icons = [UpOutlined, RightOutlined, DownOutlined, LeftOutlined]
</script>
<template>
<a-flex justify="space-evenly" align="center" :style="wrapperStyle">
<div :style="boxStyle">
<a-float-button-group
v-for="(placement, i) in placements"
:key="placement"
trigger="click"
:placement="placement"
:style="{
position: 'absolute',
insetInlineEnd: `${insetInlineEnd[i]}px`,
bottom: `${bottom[i]}px`,
}"
>
<template #icon>
<component :is="icons[i]" />
</template>
<a-float-button />
<a-float-button>
<template #icon>
<CommentOutlined />
</template>
</a-float-button>
</a-float-button-group>
</div>
</a-flex>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/shape.md
+26
View File
@@ -0,0 +1,26 @@
# Shape
## Description (en-US)
Change the shape of the FloatButton with the `shape` property.
## Source
```vue
<script setup lang="ts">
import { CustomerServiceOutlined } from '@antdv-next/icons'
</script>
<template>
<a-float-button shape="circle" type="primary" style="inset-inline-end: 94px">
<template #icon>
<CustomerServiceOutlined />
</template>
</a-float-button>
<a-float-button shape="square" type="primary" style="inset-inline-end: 24px">
<template #icon>
<CustomerServiceOutlined />
</template>
</a-float-button>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/style-class.md
+77
View File
@@ -0,0 +1,77 @@
# Custom semantic dom styling
## Description (en-US)
## Source
```vue
<script setup lang="ts">
import type { FloatButtonProps } from 'antdv-next'
import { QuestionCircleOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'
const { token } = theme.useToken()
const classes: FloatButtonProps['classes'] = {
root: 'demo-float-button-root',
content: 'demo-float-button-content',
}
const stylesObject: FloatButtonProps['styles'] = {
root: {
boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
},
}
const stylesFn: FloatButtonProps['styles'] = (info) => {
if (info?.props?.type === 'primary') {
return {
root: {
backgroundColor: '#171717',
},
content: {
color: '#fff',
},
}
}
return {}
}
</script>
<template>
<a-float-button-group shape="circle" style="inset-inline-end: 94px;">
<a-float-button
type="primary"
:classes="classes"
href="https://ant.design/index-cn"
:styles="stylesFn"
>
<template #tooltip>
<div>custom style class</div>
</template>
</a-float-button>
<a-float-button
type="default"
:classes="classes"
:styles="stylesObject"
>
<template #icon>
<QuestionCircleOutlined />
</template>
</a-float-button>
</a-float-button-group>
</template>
<style>
.demo-float-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-float-button-content {
color: v-bind('token.colorText');
}
</style>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/tooltip.md
+25
View File
@@ -0,0 +1,25 @@
# FloatButton with tooltip
## Description (en-US)
Setting the `tooltip` property shows the FloatButton with a tooltip.
## Source
```vue
<template>
<a-float-button
style="inset-block-end: 108px;"
:tooltip="{
title: 'Since 5.25.0+',
color: 'blue',
placement: 'top',
}"
/>
<a-float-button>
<template #tooltip>
<div>Documents</div>
</template>
</a-float-button>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/demo/type.md
+26
View File
@@ -0,0 +1,26 @@
# Type
## Description (en-US)
Change the type of the FloatButton with the `type` property.
## Source
```vue
<script setup lang="ts">
import { QuestionCircleOutlined } from '@antdv-next/icons'
</script>
<template>
<a-float-button type="primary" style="inset-inline-end: 24px;">
<template #icon>
<QuestionCircleOutlined />
</template>
</a-float-button>
<a-float-button type="default" style="inset-inline-end: 94px;">
<template #icon>
<QuestionCircleOutlined />
</template>
</a-float-button>
</template>
```
code/fms/.claude/skills/antdv-next/references/components/float-button/docs.md
+114
View File
@@ -0,0 +1,114 @@
---
title: FloatButton
description: A button that floats at the top of the page.
---
## When To Use
- For global functionality on the site.
- Buttons that can be seen wherever you browse.
## Examples
## Demos
| Demo | Path |
| --- | --- |
| Basic | demo/basic.md |
| Type | demo/type.md |
| Shape | demo/shape.md |
| Content | demo/content.md |
| FloatButton with tooltip | demo/tooltip.md |
| FloatButton Group | demo/group.md |
| Menu mode | demo/group-menu.md |
| Controlled mode | demo/controlled.md |
| placement | demo/placement.md |
| BackTop | demo/back-top.md |
| badge | demo/badge.md |
| Custom semantic dom styling | demo/style-class.md |
## API
Common props ref：[Common props](../../docs/vue/common-props.md)
### FloatButtonGroup
#### Props
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| shape | Setting button shape of children | `circle` \| `square` | `circle` | - | × |
| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | - | × |
| open | Whether the menu is visible or not, use it with trigger | boolean | - | - | × |
| closeIcon | Customize close button icon | VueNode | `<CloseOutlined />` | - | ✓ |
| placement | Customize menu animation placement | `top` \| `left` \| `right` \| `bottom` | `top` | - | × |
#### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| update:open | Callback executed when active menu is changed, use it with trigger | (open: boolean) =&gt; void | - |
| click | Set the handler to handle `click` event (only work in Menu mode) | (e: MouseEvent) =&gt; void | - |
#### Slots
| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Children buttons content | () =&gt; any | - |
| icon | Icon of trigger button | () =&gt; any | - |
| closeIcon | Customize close button icon | () =&gt; any | - |
### FloatButton
#### Props
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| icon | Set the icon component of button | VueNode | - | - | × |
| content | Text and other | VueNode | - | - | × |
| ~~description~~ | Please use `content` instead | VueNode | - | - | × |
| tooltip | The text shown in the tooltip | VueNode \| TooltipProps | - | - | × |
| type | Setting button type | `default` \| `primary` | `default` | - | × |
| shape | Setting button shape | `circle` \| `square` | `circle` | - | × |
| href | The target of hyperlink | string | - | - | × |
| target | Specifies where to display the linked URL | string | - | - | × |
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | - | × |
| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | [BadgeProps](../badge/docs.md#api) | - | - | × |
#### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | Set the handler to handle `click` event | (e: MouseEvent) =&gt; void | - |
#### Slots
| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Button content | () =&gt; any | - |
| icon | Set the icon component of button | () =&gt; any | - |
| tooltip | The text shown in the tooltip | (props?: TooltipProps) =&gt; any | - |
### FloatBackTop
#### Props
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| duration | Time to return to top（ms） | number | 450 | - |
| target | Specifies the scrollable area dom node | () =&gt; HTMLElement | () =&gt; window | - |
| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | - |
| target | Specifies where to display the linked URL | '_self' \| '_blank' \| '_parent' \| '_top' \| string | - | - |
| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | FloatButtonBadgeProps & &#123; class?: string &#125; | - | 5.4.0 |
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | ButtonHTMLType | `button` | 5.21.0 |
| ariaLabel | - | string | - | - |
| style | - | CSSProperties | - | - |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | FloatButtonClassNamesType | - | - |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | FloatButtonStylesType | - | - |
#### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | A callback function, which can be executed when you click the button | () =&gt; void | - |
## Semantic DOM
### FloatButton
| _semantic | demo/_semantic.md |
### FloatButtonGroup
| _semantic_group | demo/_semantic_group.md |