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 |