【WIP】feat(Fab): add magnet and xBounds props

packages/products/tdesign-miniprogram/packages/components/fab/README.en-US.md

@@ -8,12 +8,14 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
-button-props | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
-draggable | String / Boolean | false | Typescript：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
+button-props | Object | - | Typescript: `ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
+draggable | String / Boolean | false | Typescript: `boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
 icon | String | - | \- | N
+magnet | String / Boolean | - | `1.12.3`。Typescript: `boolean \| MagnetEnum ` `type MagnetEnum = 'left' \| 'right'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
 text | String | - | \- | N
 using-custom-navbar | Boolean | false | \- | N
-y-bounds | Array | - | Typescript：`Array<string \| number>` | N
+x-bounds | Array | - | `1.12.3`。Typescript: `Array<string \| number>` | N
+y-bounds | Array | - | Typescript: `Array<string \| number>` | N
 
 ### Fab Events
 

packages/products/tdesign-miniprogram/packages/components/fab/README.md

@@ -11,8 +11,10 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场
 button-props | Object | - | 透传至 Button 组件。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
 draggable | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动。TS 类型：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
 icon | String | - | 图标 | N
+magnet | String / Boolean | - | `1.12.3`。是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附。TS 类型：`boolean \| MagnetEnum ` `type MagnetEnum = 'left' \| 'right'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/fab/type.ts) | N
 text | String | - | 文本内容 | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+x-bounds | Array | - | `1.12.3`。设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16]。TS 类型：`Array<string \| number>` | N
 y-bounds | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]。TS 类型：`Array<string \| number>` | N
 
 ### Fab Events

packages/products/tdesign-miniprogram/packages/components/fab/props.ts

@@ -20,6 +20,10 @@ const props: TdFabProps = {
     type: String,
     value: '',
   },
+  /** 是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附 */
+  magnet: {
+    type: null,
+  },
   /** 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`） */
   style: {
     type: String,
@@ -35,6 +39,10 @@ const props: TdFabProps = {
     type: Boolean,
     value: false,
   },
+  /** 设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16] */
+  xBounds: {
+    type: Array,
+  },
   /** 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80] */
   yBounds: {
     type: Array,

packages/products/tdesign-miniprogram/packages/components/fab/type.ts

@@ -30,6 +30,13 @@ export interface TdFabProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附
+   */
+  magnet?: {
+    type: null;
+    value?: boolean | MagnetEnum;
+  };
   /**
    * 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`）
    * @default right: 16px; bottom: 32px;
@@ -54,6 +61,13 @@ export interface TdFabProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16]
+   */
+  xBounds?: {
+    type: ArrayConstructor;
+    value?: Array<string | number>;
+  };
   /**
    * 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]
    */
@@ -64,3 +78,5 @@ export interface TdFabProps {
 }
 
 export type FabDirectionEnum = 'all' | 'vertical' | 'horizontal';
+
+export type MagnetEnum = 'left' | 'right';

packages/products/tdesign-mobile-react/src/fab/fab.en-US.md

@@ -6,12 +6,14 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
-style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
-buttonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
-draggable | String / Boolean | false | Typescript：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
-icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
+buttonProps | Object | - | Typescript: `ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
+draggable | String / Boolean | false | Typescript: `boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
+icon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+magnet | String / Boolean | - | `0.21.2`。Typescript: `boolean \| MagnetEnum ` `type MagnetEnum = 'left' \| 'right'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
 text | String | - | \- | N
-yBounds | Array | - | Typescript：`Array<string \| number>` | N
-onClick | Function |  | Typescript：`(context: {e: MouseEvent}) => void`<br/> | N
-onDragEnd | Function |  | Typescript：`(context: { e: TouchEvent }) => void`<br/> | N
-onDragStart | Function |  | Typescript：`(context: { e: TouchEvent }) => void`<br/> | N
+xBounds | Array | - | `0.21.2`。Typescript: `Array<string \| number>` | N
+yBounds | Array | - | Typescript: `Array<string \| number>` | N
+onClick | Function |  | Typescript: `(context: {e: MouseEvent}) => void`<br/> | N
+onDragEnd | Function |  | Typescript: `(context: { e: TouchEvent }) => void`<br/> | N
+onDragStart | Function |  | Typescript: `(context: { e: TouchEvent }) => void`<br/> | N

packages/products/tdesign-mobile-react/src/fab/fab.md

@@ -10,7 +10,9 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 buttonProps | Object | - | 透传至 Button 组件。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
 draggable | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动。TS 类型：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
 icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+magnet | String / Boolean | - | `0.21.2`。是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附。TS 类型：`boolean \| MagnetEnum ` `type MagnetEnum = 'left' \| 'right'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/fab/type.ts) | N
 text | String | - | 文本内容 | N
+xBounds | Array | - | `0.21.2`。设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16]。TS 类型：`Array<string \| number>` | N
 yBounds | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]。TS 类型：`Array<string \| number>` | N
 onClick | Function |  | TS 类型：`(context: {e: MouseEvent}) => void`<br/>悬浮按钮点击事件 | N
 onDragEnd | Function |  | TS 类型：`(context: { e: TouchEvent }) => void`<br/>结束拖拽时触发 | N

packages/products/tdesign-mobile-react/src/fab/type.ts

@@ -22,11 +22,19 @@ export interface TdFabProps {
    * 图标
    */
   icon?: TElement;
+  /**
+   * 是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附
+   */
+  magnet?: boolean | MagnetEnum;
   /**
    * 文本内容
    * @default ''
    */
   text?: string;
+  /**
+   * 设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16]
+   */
+  xBounds?: Array<string | number>;
   /**
    * 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]
    */
@@ -46,3 +54,5 @@ export interface TdFabProps {
 }
 
 export type FabDirectionEnum = 'all' | 'vertical' | 'horizontal';
+
+export type MagnetEnum = 'left' | 'right';

packages/products/tdesign-mobile-vue/src/fab/fab.en-US.md

@@ -6,15 +6,17 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-buttonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
-draggable | String / Boolean | false | Typescript：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
-icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-style | String / Object | 'right: 16px; bottom: 32px;' | Typescript：`string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+buttonProps | Object | - | Typescript: `ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
+draggable | String / Boolean | false | Typescript: `boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
+icon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+magnet | String / Boolean | - | `1.13.1`。Typescript: `boolean \| MagnetEnum ` `type MagnetEnum = 'left' \| 'right'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
+style | String / Object | 'right: 16px; bottom: 32px;' | Typescript: `string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 text | String | - | \- | N
-yBounds | Array | - | Typescript：`Array<string \| number>` | N
-onClick | Function |  | Typescript：`(context: {e: MouseEvent}) => void`<br/> | N
-onDragEnd | Function |  | Typescript：`(context: { e: TouchEvent }) => void`<br/> | N
-onDragStart | Function |  | Typescript：`(context: { e: TouchEvent }) => void`<br/> | N
+xBounds | Array | - | `1.13.1`。Typescript: `Array<string \| number>` | N
+yBounds | Array | - | Typescript: `Array<string \| number>` | N
+onClick | Function |  | Typescript: `(context: {e: MouseEvent}) => void`<br/> | N
+onDragEnd | Function |  | Typescript: `(context: { e: TouchEvent }) => void`<br/> | N
+onDragStart | Function |  | Typescript: `(context: { e: TouchEvent }) => void`<br/> | N
 
 ### Fab Events
 

packages/products/tdesign-mobile-vue/src/fab/fab.md

@@ -9,8 +9,10 @@
 buttonProps | Object | - | 透传至 Button 组件。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
 draggable | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动。TS 类型：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+magnet | String / Boolean | - | `1.13.1`。是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附。TS 类型：`boolean \| MagnetEnum ` `type MagnetEnum = 'left' \| 'right'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/fab/type.ts) | N
 style | String / Object | 'right: 16px; bottom: 32px;' | 悬浮按钮的样式，常用于调整位置。TS 类型：`string \| Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 text | String | - | 文本内容 | N
+xBounds | Array | - | `1.13.1`。设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16]。TS 类型：`Array<string \| number>` | N
 yBounds | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]。TS 类型：`Array<string \| number>` | N
 onClick | Function |  | TS 类型：`(context: {e: MouseEvent}) => void`<br/>悬浮按钮点击事件 | N
 onDragEnd | Function |  | TS 类型：`(context: { e: TouchEvent }) => void`<br/>结束拖拽时触发 | N

packages/products/tdesign-mobile-vue/src/fab/props.ts

@@ -15,22 +15,30 @@ export default {
   /** 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动 */
   draggable: {
     type: [String, Boolean] as PropType<TdFabProps['draggable']>,
-    default: false,
+    default: false as TdFabProps['draggable'],
   },
   /** 图标 */
   icon: {
     type: Function as PropType<TdFabProps['icon']>,
   },
+  /** 是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附 */
+  magnet: {
+    type: [String, Boolean] as PropType<TdFabProps['magnet']>,
+  },
   /** 悬浮按钮的样式，常用于调整位置 */
   style: {
     type: [String, Object] as PropType<TdFabProps['style']>,
-    default: 'right: 16px; bottom: 32px;',
+    default: 'right: 16px; bottom: 32px;' as TdFabProps['style'],
   },
   /** 文本内容 */
   text: {
     type: String,
     default: '',
   },
+  /** 设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16] */
+  xBounds: {
+    type: Array as PropType<TdFabProps['xBounds']>,
+  },
   /** 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80] */
   yBounds: {
     type: Array as PropType<TdFabProps['yBounds']>,

packages/products/tdesign-mobile-vue/src/fab/type.ts

@@ -21,6 +21,10 @@ export interface TdFabProps {
    * 图标
    */
   icon?: TNode;
+  /**
+   * 是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附
+   */
+  magnet?: boolean | MagnetEnum;
   /**
    * 悬浮按钮的样式，常用于调整位置
    * @default 'right: 16px; bottom: 32px;'
@@ -31,6 +35,10 @@ export interface TdFabProps {
    * @default ''
    */
   text?: string;
+  /**
+   * 设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16]
+   */
+  xBounds?: Array<string | number>;
   /**
    * 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]
    */
@@ -50,3 +58,5 @@ export interface TdFabProps {
 }
 
 export type FabDirectionEnum = 'all' | 'vertical' | 'horizontal';
+
+export type MagnetEnum = 'left' | 'right';

packages/scripts/api.json

@@ -55713,6 +55713,49 @@
         "String"
       ]
     },
+    {
+      "id": 1769484024,
+      "platform_framework": [
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "Fab",
+      "field_category": 1,
+      "field_name": "magnet",
+      "field_type": [
+        "1",
+        "4"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "是否吸附。`true` 启用左右吸附，`left` 仅吸附到左边，`right` 仅吸附到右边，`false` 不吸附",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2026-01-27 03:20:24",
+      "update_time": "2026-01-27 03:20:24",
+      "event_output": null,
+      "custom_field_type": "boolean | MagnetEnum 【type MagnetEnum = 'left' | 'right'】",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "{\n\"Miniprogram\": \"1.12.3\",\n\"Vue(Mobile)\": \"1.13.1\",\n\"React(Mobile)\": \"0.21.2\"\n\n}",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String",
+        "Boolean"
+      ]
+    },
     {
       "id": 2503,
       "platform_framework": [
@@ -55867,6 +55910,47 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1769481764,
+      "platform_framework": [
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "Fab",
+      "field_category": 1,
+      "field_name": "xBounds",
+      "field_type": [
+        "16"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "设置水平方向边界限制，示例：[16, 16] 或 ['16px', 16]",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2026-01-27 02:42:44",
+      "update_time": "2026-01-27 02:42:44",
+      "event_output": null,
+      "custom_field_type": "Array<string | number>",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "{\n\"Miniprogram\": \"1.12.3\",\n\"Vue(Mobile)\": \"1.13.1\",\n\"React(Mobile)\": \"0.21.2\"\n\n}",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "Array"
+      ]
+    },
     {
       "id": 1739415473,
       "platform_framework": [