diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ccf50bcf260..36f2f5c7d9c 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,13 @@
# CHANGELOG
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-float-button` adds `direction` prop.
+
## 2.43.1
`2025-09-15`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 7c0e0300828..3b4b18337cc 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,13 @@
# CHANGELOG
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-float-button` 新增 `direction` 属性
+
## 2.43.1
`2025-09-15`
diff --git a/src/float-button-group/src/FloatButtonGroup.tsx b/src/float-button-group/src/FloatButtonGroup.tsx
index 9e7f71c9183..347c73df6de 100644
--- a/src/float-button-group/src/FloatButtonGroup.tsx
+++ b/src/float-button-group/src/FloatButtonGroup.tsx
@@ -2,22 +2,9 @@ import type { CSSProperties, PropType, Ref } from 'vue'
import type { ThemeProps } from '../../_mixins'
import type { ExtractPublicPropTypes } from '../../_utils'
import type { FloatButtonGroupTheme } from '../styles/light'
-import {
- computed,
- defineComponent,
- h,
- provide,
- toRef
-} from 'vue'
-import {
- useConfig,
- useTheme,
- useThemeClass
-} from '../../_mixins'
-import {
- createInjectionKey,
- formatLength
-} from '../../_utils'
+import { computed, defineComponent, h, provide, toRef } from 'vue'
+import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import { createInjectionKey, formatLength } from '../../_utils'
import floatButtonGroupLight from '../styles/light'
import style from './styles/index.cssr'
@@ -35,6 +22,10 @@ export const floatButtonGroupProps = {
type: String as PropType<'square' | 'circle'>,
default: 'circle'
},
+ direction: {
+ type: String as PropType<'vertical' | 'horizontal'>,
+ default: 'vertical'
+ },
position: {
type: String as PropType<'relative' | 'absolute' | 'fixed'>,
default: 'fixed'
@@ -96,12 +87,13 @@ export default defineComponent({
}
},
render() {
- const { mergedClsPrefix, cssVars, shape } = this
+ const { mergedClsPrefix, cssVars, shape, direction } = this
return (
:not(:last-child)', `
- margin-bottom: 16px;
- `)
+ cM('vertical', [
+ c('>:not(:last-child)', `
+ margin-bottom: 16px;
+ margin-right: 0;
+ `)
+ ]),
+ cM('horizontal', [
+ c('>:not(:last-child)', `
+ margin-right: 16px;
+ margin-bottom: 0;
+ `)
+ ])
])
])
diff --git a/src/float-button/demos/enUS/index.demo-entry.md b/src/float-button/demos/enUS/index.demo-entry.md
index 01586f0377e..2857ac21074 100644
--- a/src/float-button/demos/enUS/index.demo-entry.md
+++ b/src/float-button/demos/enUS/index.demo-entry.md
@@ -39,6 +39,7 @@ menu.vue
| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| bottom | `number \| string` | `undefined` | CSS `bottom` property of the button group. | 2.38.0 |
+| direction | `'vertical' \| 'horizontal'` | `'vertical'` | Layout direction of the button group. | NEXT_VERSION |
| left | `number \| string` | `undefined` | CSS `left` property of the button group. | 2.38.0 |
| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | CSS `position` property of the button group. | 2.38.0 |
| right | `number \| string` | `undefined` | CSS `right` property of the button group. | 2.38.0 |
diff --git a/src/float-button/demos/zhCN/group.demo.vue b/src/float-button/demos/zhCN/group.demo.vue
index 4e89ad6cae9..75ef6201c1d 100644
--- a/src/float-button/demos/zhCN/group.demo.vue
+++ b/src/float-button/demos/zhCN/group.demo.vue
@@ -38,5 +38,37 @@ import { CashOutline as CashIcon } from '@vicons/ionicons5'
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/float-button/demos/zhCN/index.demo-entry.md b/src/float-button/demos/zhCN/index.demo-entry.md
index 5859328f422..7b919162a29 100644
--- a/src/float-button/demos/zhCN/index.demo-entry.md
+++ b/src/float-button/demos/zhCN/index.demo-entry.md
@@ -39,6 +39,7 @@ menu.vue
| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- |
| bottom | `number \| string` | `undefined` | 按钮组的 CSS `bottom` 属性 | 2.38.0 |
+| direction | `'vertical' \| 'horizontal'` | `'vertical'` | 按钮组的排列方向 | NEXT_VERSION |
| left | `number \| string` | `undefined` | 按钮组的 CSS `left` 属性 | 2.38.0 |
| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | 2.38.0 |
| right | `number \| string` | `undefined` | 按钮组的 CSS `right` 属性 | 2.38.0 |