feat(n-float-button): add direction prop

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`

CHANGELOG.zh-CN.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-float-button` 新增 `direction` 属性
+
 ## 2.43.1
 
 `2025-09-15`

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 (
       <div
         class={[
           `${mergedClsPrefix}-float-button-group`,
-          `${mergedClsPrefix}-float-button-group--${shape}-shape`
+          `${mergedClsPrefix}-float-button-group--${shape}-shape`,
+          `${mergedClsPrefix}-float-button-group--${direction}`
         ]}
         style={cssVars as CSSProperties}
         role="group"

src/float-button-group/src/styles/index.cssr.ts

@@ -5,6 +5,14 @@ export default cB('float-button-group', [
   cB('float-button', `
     position: relative;
   `),
+  cM('horizontal', `
+    display: inline-flex;
+    flex-direction: row;
+  `),
+  cM('vertical', `
+    display: inline-flex;
+    flex-direction: column;
+  `),
   cM('square-shape', `
     background-color: var(--n-color);
     cursor: pointer;
@@ -13,7 +21,6 @@ export default cB('float-button-group', [
     align-items: center;
     justify-content: center;
     border-radius: var(--n-border-radius-square);
-    flex-direction: column;
     box-shadow: var(--n-box-shadow);
     transition:
       color .3s var(--n-bezier),
@@ -46,9 +53,36 @@ export default cB('float-button-group', [
       `)
     ])
   ]),
+  cM('square-shape', [
+    cM('horizontal', [
+      cB('float-button', [
+        c('&:not(:last-child)', `
+          border-bottom: none;
+          border-right: 1px solid var(--n-button-border-color);
+        `),
+        c('&:first-child', `
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        `),
+        c('&:last-child', `
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+        `)
+      ])
+    ])
+  ]),
   cM('circle-shape', [
-    c('>: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;
+      `)
+    ])
   ])
 ])

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 |

src/float-button/demos/zhCN/group.demo.vue

@@ -38,5 +38,37 @@ import { CashOutline as CashIcon } from '@vicons/ionicons5'
         <n-icon><CashIcon /></n-icon>
       </n-float-button>
     </n-float-button-group>
+    <n-float-button-group
+      shape="square"
+      position="relative"
+      direction="horizontal"
+    >
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+    </n-float-button-group>
+    <n-float-button-group position="relative" direction="horizontal">
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><CashIcon /></n-icon>
+      </n-float-button>
+    </n-float-button-group>
   </n-flex>
 </template>

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 |