| undefined",
+ "default": "8",
+ "description": "Horizontal margin of vertical Divider",
+ "descriptionZh": "纵向分割线的横向外间距"
+ }
+ ],
+ "faq": [],
+ "demos": [
+ {
+ "name": "horizontal",
+ "title": "Horizontal",
+ "titleZh": "水平分割线",
+ "description": "Divider is horizontal by default. You can add text within Divider.",
+ "descriptionZh": "默认为水平分割线,可在中间加入文字。",
+ "code": "\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n"
+ },
+ {
+ "name": "with-text",
+ "title": "Divider with title",
+ "titleZh": "带文字的分割线",
+ "description": "Divider with inner text, use `title-placement` to align it.",
+ "descriptionZh": "分割线中带有文字,可以用 `title-placement` 指定文字位置。",
+ "code": "\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n Text\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Left Text\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Right Text\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Left Text margin with 0\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Right Text margin with 50px\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n"
+ },
+ {
+ "name": "vertical",
+ "title": "Vertical",
+ "titleZh": "垂直分割线",
+ "description": "Use `orientation=\"vertical\"` make it vertical.",
+ "descriptionZh": "使用 `orientation=\"vertical\"` 设置为行内的垂直分割线。",
+ "code": "\n Text\n \n Link\n \n Link\n"
+ },
+ {
+ "name": "plain",
+ "title": "Text without heading style",
+ "titleZh": "分割文字使用正文样式",
+ "description": "You can use `plain` prop to set a lighter style of text.",
+ "descriptionZh": "使用 `plain` 可以设置为更轻量的分割文字样式。",
+ "code": "\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Text\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Left Text\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Right Text\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n"
+ },
+ {
+ "name": "variant",
+ "title": "Variant",
+ "titleZh": "变体",
+ "description": "You can use `variant` to set the style of Divider, options are `solid`, `dashed` and `dotted`.",
+ "descriptionZh": "通过 `variant` 设置分割线的样式,可选 `solid`、`dashed` 和 `dotted`。",
+ "code": "\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Solid\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Dotted\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n Dashed\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n"
+ },
+ {
+ "name": "size",
+ "title": "Set the spacing size of the divider",
+ "titleZh": "设置分割线的间距大小",
+ "description": "Control the size of divider by `size`, only works for horizontal layout.",
+ "descriptionZh": "通过 `size` 控制分割线的间距大小,仅对水平分割线有效。",
+ "code": "\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n"
+ },
+ {
+ "name": "customize-style",
+ "title": "Style Customization",
+ "titleZh": "样式自定义",
+ "description": "Customize the style of the divider.",
+ "descriptionZh": "自定义分割线的样式。",
+ "code": "\n \n \n \n Text\n \n \n \n\n \n"
+ },
+ {
+ "name": "style-calss",
+ "title": "Custom semantic dom styling",
+ "titleZh": "自定义语义结构的样式和类",
+ "description": "You can customize the [semantic dom](#semantic-dom) style of divider by passing objects/functions through `classes` and `styles`.",
+ "descriptionZh": "通过 `classes` 和 `styles` 传入对象/函数可以自定义分割线的[语义化结构](#semantic-dom)样式。",
+ "code": "\n\n\n \n
\n classes Object\n \n
\n classes Function\n \n
\n styles Object\n \n
\n styles Function\n \n
\n"
+ },
+ {
+ "name": "_semantic",
+ "title": "",
+ "titleZh": "",
+ "description": "",
+ "descriptionZh": "",
+ "code": "\n\n\n \n \n \n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi\n ista probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi\n ista probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n
\n Solid\n \n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi\n ista probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n
\n Dotted\n \n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi\n ista probare, quae sunt a te dicta? Refert tamen, quo modo.\n
\n
\n Dashed\n \n These\n
\n are\n
\n vertical\n
\n Dividers\n
\n \n \n"
+ }
+ ]
+ },
+ {
+ "name": "Drawer",
+ "nameZh": "抽屉",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "A panel that slides out from the edge of the screen.",
+ "descriptionZh": "屏幕边缘滑出的浮层面板。",
+ "whenToUse": "",
+ "whenToUseZh": "抽屉从屏幕边缘滑出,覆盖当前页面的内容和操作,用于承载较复杂的任务流程。\n\n- 需要表单编辑或创建信息时使用。\n- 处理子任务时使用,避免跳转页面。\n- 同一表单需要在多个位置复用时使用。\n\n> 说明\n>\n> `loading` 属性会在抽屉中渲染 Skeleton。",
+ "doc": "---\ngroup: Feedback\ncategory: Components\ntitle: Drawer\ndescription: A panel that slides out from the edge of the screen.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n cols: 2\n---\n\n## When To Use\n\nA Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.\n\n- Use a Form to create or edit a set of information.\n- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.\n- When the same Form is needed in multiple places.\n\n> Notes for developers\n>\n> The `loading` prop renders Skeleton in Drawer.\n\n## Examples\n\n\n Basic\n Custom Placement\n Resizable\n Loading\n Extra Actions\n Render in current dom\n Submit form in drawer\n Preview drawer\n Multi-level drawer\n Preset size\n mask\n Closable placement\n Custom semantic dom styling\n\n\n## API\n\n### Props\n\nCommon props ref:[Common props](/docs/vue/common-props)\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| afterOpenChange | Callback after the animation ends when switching drawers | (open: boolean) => void | - | - |\n| classes | Customize class for each semantic structure inside the Drawer component. Supports object or function. | DrawerClassNamesType | - | - |\n| closable | Whether to show a close button. The position can be configured with `placement` | boolean \\| \\{ closeIcon?: VueNode, disabled?: boolean, placement?: 'start' \\| 'end' \\} | true | - |\n| closeIcon | Custom close icon | VueNode | - | - |\n| ~~destroyOnClose~~ | Whether to unmount child components on closing drawer or not | boolean | false | - |\n| destroyOnHidden | Whether to unmount child components on closing drawer or not | boolean | false | - |\n| extra | Extra actions area at corner | VueNode | - | - |\n| footer | The footer for Drawer | VueNode | - | - |\n| forceRender | Pre-render Drawer component forcibly | boolean | false | - |\n| getContainer | Mounted node and display window for Drawer | string \\| HTMLElement \\| (() => HTMLElement) \\| false | document.body | - |\n| keyboard | Whether support press esc to close | boolean | true | - |\n| loading | Show the Skeleton | boolean | false | - |\n| mask | Mask effect | MaskType | true | - |\n| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | - |\n| placement | The placement of the Drawer | `top` \\| `right` \\| `bottom` \\| `left` | `right` | - |\n| push | Nested drawers push behavior | boolean \\| \\{ distance: string \\| number \\} | \\{ distance: 180 \\} | - |\n| resizable | Enable resizable by dragging | boolean \\| [ResizableConfig](#resizableconfig) | - | - |\n| rootClass | Root container class | string | - | - |\n| rootStyle | Style of wrapper element which contains mask | CSSProperties | - | - |\n| size | Preset size of drawer, default `378px` and large `736px`, or a custom number | 'default' \\| 'large' \\| number | 'default' | - |\n| styles | Customize inline style for each semantic structure inside the Drawer component. Supports object or function. | DrawerStylesType | - | - |\n| title | The title for Drawer | VueNode | - | - |\n| open | Whether the Drawer dialog is visible or not, support `v-model:open` | boolean | false | - |\n| zIndex | The `z-index` of the Drawer | number | 1000 | - |\n\n### Events\n\n| Event | Description | Type | Version |\n| --- | --- | --- | --- |\n| afterOpenChange | Callback after the animation ends when switching drawers | (open: boolean) => void | - |\n| close | Callback when drawer is closed | (e: MouseEvent \\| KeyboardEvent) => void | - |\n| keydown | Keyboard keydown event | (e: KeyboardEvent) => void | - |\n| keyup | Keyboard keyup event | (e: KeyboardEvent) => void | - |\n| mouseenter | Mouse enter event | (e: MouseEvent) => void | - |\n| mouseleave | Mouse leave event | (e: MouseEvent) => void | - |\n| mouseover | Mouse over event | (e: MouseEvent) => void | - |\n| click | Click event | (e: MouseEvent) => void | - |\n\n### Slots\n\n| Slot | Description | Type | Version |\n| --- | --- | --- | --- |\n| title | Title | () => any | - |\n| footer | Footer | () => any | - |\n| extra | Extra actions | () => any | - |\n| closeIcon | Custom close icon | () => any | - |\n| default | Drawer content | () => any | - |\n\n## Types\n\n### ResizableConfig\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| onResizeStart | Callback when resize starts | () => void | - | - |\n| onResize | Callback during resizing | (size: number) => void | - | - |\n| onResizeEnd | Callback when resize ends | () => void | - | - |\n\n## Semantic DOM {#semantic-dom}\n\n\n\n## Design Token {#design-token}\n\n\n",
+ "docZh": "---\ngroup: 反馈\ncategory: Components\ntitle: Drawer\nsubtitle: 抽屉\ndescription: 屏幕边缘滑出的浮层面板。\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n cols: 2\n---\n\n## 何时使用 {#when-to-use}\n\n抽屉从屏幕边缘滑出,覆盖当前页面的内容和操作,用于承载较复杂的任务流程。\n\n- 需要表单编辑或创建信息时使用。\n- 处理子任务时使用,避免跳转页面。\n- 同一表单需要在多个位置复用时使用。\n\n> 说明\n>\n> `loading` 属性会在抽屉中渲染 Skeleton。\n\n## 代码演示 {#examples}\n\n\n 基本\n 自定义位置\n 可调整大小\n 加载中\n 额外操作\n 渲染在当前容器\n 抽屉内表单\n 抽屉预览\n 多层抽屉\n 预设尺寸\n 遮罩\n 关闭按钮位置\n 自定义语义结构样式\n\n\n## API\n\n### 属性 {#props}\n\n通用属性参考:[通用属性](/docs/vue/common-props)\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| afterOpenChange | 切换抽屉时动画结束后的回调 | (open: boolean) => void | - | - |\n| classes | 用于自定义 Drawer 组件内部各语义化结构的 class,支持对象或函数 | DrawerClassNamesType | - | - |\n| closable | 是否展示关闭按钮,可通过 `placement` 设置位置 | boolean \\| \\{ closeIcon?: VueNode, disabled?: boolean, placement?: 'start' \\| 'end' \\} | true | - |\n| closeIcon | 自定义关闭图标 | VueNode | - | - |\n| ~~destroyOnClose~~ | 关闭时销毁 Drawer 里的子元素 | boolean | false | - |\n| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | - |\n| extra | 右上角额外操作区域 | VueNode | - | - |\n| footer | 抽屉底部 | VueNode | - | - |\n| forceRender | 强制预渲染 Drawer | boolean | false | - |\n| getContainer | 指定 Drawer 挂载的节点,`false` 为挂载在当前位置 | string \\| HTMLElement \\| (() => HTMLElement) \\| false | document.body | - |\n| keyboard | 是否支持键盘 esc 关闭 | boolean | true | - |\n| loading | 显示 Skeleton | boolean | false | - |\n| mask | 遮罩效果 | MaskType | true | - |\n| maskClosable | 点击遮罩是否允许关闭 | boolean | true | - |\n| placement | 抽屉的方向 | `top` \\| `right` \\| `bottom` \\| `left` | `right` | - |\n| push | 多层抽屉的推开行为 | boolean \\| \\{ distance: string \\| number \\} | \\{ distance: 180 \\} | - |\n| resizable | 是否允许拖拽调整尺寸 | boolean \\| [ResizableConfig](#resizableconfig) | - | - |\n| rootClass | 根容器 class | string | - | - |\n| rootStyle | 根容器样式(包含遮罩) | CSSProperties | - | - |\n| size | 预设尺寸,默认 `378px` 和大号 `736px`,也支持自定义数字 | 'default' \\| 'large' \\| number | 'default' | - |\n| styles | 用于自定义 Drawer 组件内部各语义化结构的行内 style,支持对象或函数 | DrawerStylesType | - | - |\n| title | 标题 | VueNode | - | - |\n| open | 抽屉是否可见,支持 `v-model:open` | boolean | false | - |\n| zIndex | 设置 Drawer 的 `z-index` | number | 1000 | - |\n\n### 事件 {#events}\n\n| 事件 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| afterOpenChange | 切换抽屉时动画结束后的回调 | (open: boolean) => void | - |\n| close | 抽屉关闭回调 | (e: MouseEvent \\| KeyboardEvent) => void | - |\n| keydown | 键盘按下回调 | (e: KeyboardEvent) => void | - |\n| keyup | 键盘抬起回调 | (e: KeyboardEvent) => void | - |\n| mouseenter | 鼠标移入回调 | (e: MouseEvent) => void | - |\n| mouseleave | 鼠标移出回调 | (e: MouseEvent) => void | - |\n| mouseover | 鼠标移入回调 | (e: MouseEvent) => void | - |\n| click | 点击回调 | (e: MouseEvent) => void | - |\n\n### 插槽 {#slots}\n\n| 插槽 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| title | 标题 | () => any | - |\n| footer | 底部 | () => any | - |\n| extra | 右上角额外操作 | () => any | - |\n| closeIcon | 自定义关闭图标 | () => any | - |\n| default | 抽屉内容 | () => any | - |\n\n## 类型 {#types}\n\n### ResizableConfig {#resizableconfig}\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| onResizeStart | 开始拖拽回调 | () => void | - | - |\n| onResize | 拖拽中回调 | (size: number) => void | - | - |\n| onResizeEnd | 结束拖拽回调 | () => void | - | - |\n\n## 语义化 DOM {#semantic-dom}\n\n\n\n## 主题变量(Design Token){#design-token}\n\n\n",
+ "subComponents": {},
+ "props": [
+ {
+ "name": "afterOpenChange",
+ "type": "(open: boolean) => void",
+ "default": "-",
+ "description": "Callback after the animation ends when switching drawers",
+ "descriptionZh": "切换抽屉时动画结束后的回调"
+ },
+ {
+ "name": "classes",
+ "type": "DrawerClassNamesType",
+ "default": "-",
+ "description": "Customize class for each semantic structure inside the Drawer component. Supports object or function.",
+ "descriptionZh": "用于自定义 Drawer 组件内部各语义化结构的 class,支持对象或函数"
+ },
+ {
+ "name": "closable",
+ "type": "boolean \\| \\{ closeIcon?: VueNode, disabled?: boolean, placement?: 'start' \\| 'end' \\}",
+ "default": "true",
+ "description": "Whether to show a close button. The position can be configured with `placement`",
+ "descriptionZh": "是否展示关闭按钮,可通过 `placement` 设置位置"
+ },
+ {
+ "name": "closeIcon",
+ "type": "VueNode",
+ "default": "-",
+ "description": "Custom close icon",
+ "descriptionZh": "自定义关闭图标"
+ },
+ {
+ "name": "~~destroyOnClose~~",
+ "type": "boolean",
+ "default": "false",
+ "description": "Whether to unmount child components on closing drawer or not",
+ "descriptionZh": "关闭时销毁 Drawer 里的子元素"
+ },
+ {
+ "name": "destroyOnHidden",
+ "type": "boolean",
+ "default": "false",
+ "description": "Whether to unmount child components on closing drawer or not",
+ "descriptionZh": "关闭时销毁 Drawer 里的子元素"
+ },
+ {
+ "name": "extra",
+ "type": "VueNode",
+ "default": "-",
+ "description": "Extra actions area at corner",
+ "descriptionZh": "右上角额外操作区域"
+ },
+ {
+ "name": "footer",
+ "type": "VueNode",
+ "default": "-",
+ "description": "The footer for Drawer",
+ "descriptionZh": "抽屉底部"
+ },
+ {
+ "name": "forceRender",
+ "type": "boolean",
+ "default": "false",
+ "description": "Pre-render Drawer component forcibly",
+ "descriptionZh": "强制预渲染 Drawer"
+ },
+ {
+ "name": "getContainer",
+ "type": "string \\| HTMLElement \\| (() => HTMLElement) \\| false",
+ "default": "document.body",
+ "description": "Mounted node and display window for Drawer",
+ "descriptionZh": "指定 Drawer 挂载的节点,`false` 为挂载在当前位置"
+ },
+ {
+ "name": "keyboard",
+ "type": "boolean",
+ "default": "true",
+ "description": "Whether support press esc to close",
+ "descriptionZh": "是否支持键盘 esc 关闭"
+ },
+ {
+ "name": "loading",
+ "type": "boolean",
+ "default": "false",
+ "description": "Show the Skeleton",
+ "descriptionZh": "显示 Skeleton"
+ },
+ {
+ "name": "mask",
+ "type": "MaskType",
+ "default": "true",
+ "description": "Mask effect",
+ "descriptionZh": "遮罩效果"
+ },
+ {
+ "name": "maskClosable",
+ "type": "boolean",
+ "default": "true",
+ "description": "Clicking on the mask (area outside the Drawer) to close the Drawer or not",
+ "descriptionZh": "点击遮罩是否允许关闭"
+ },
+ {
+ "name": "placement",
+ "type": "`top` \\| `right` \\| `bottom` \\| `left`",
+ "default": "`right`",
+ "description": "The placement of the Drawer",
+ "descriptionZh": "抽屉的方向"
+ },
+ {
+ "name": "push",
+ "type": "boolean \\| \\{ distance: string \\| number \\}",
+ "default": "\\{ distance: 180 \\}",
+ "description": "Nested drawers push behavior",
+ "descriptionZh": "多层抽屉的推开行为"
+ },
+ {
+ "name": "resizable",
+ "type": "boolean \\| [ResizableConfig](#resizableconfig)",
+ "default": "-",
+ "description": "Enable resizable by dragging",
+ "descriptionZh": "是否允许拖拽调整尺寸"
+ },
+ {
+ "name": "rootClass",
+ "type": "string",
+ "default": "-",
+ "description": "Root container class",
+ "descriptionZh": "根容器 class"
+ },
+ {
+ "name": "rootStyle",
+ "type": "CSSProperties",
+ "default": "-",
+ "description": "Style of wrapper element which contains mask",
+ "descriptionZh": "根容器样式(包含遮罩)"
+ },
+ {
+ "name": "size",
+ "type": "'default' \\| 'large' \\| number",
+ "default": "'default'",
+ "description": "Preset size of drawer, default `378px` and large `736px`, or a custom number",
+ "descriptionZh": "预设尺寸,默认 `378px` 和大号 `736px`,也支持自定义数字"
+ },
+ {
+ "name": "styles",
+ "type": "DrawerStylesType",
+ "default": "-",
+ "description": "Customize inline style for each semantic structure inside the Drawer component. Supports object or function.",
+ "descriptionZh": "用于自定义 Drawer 组件内部各语义化结构的行内 style,支持对象或函数"
+ },
+ {
+ "name": "title",
+ "type": "VueNode",
+ "default": "-",
+ "description": "The title for Drawer",
+ "descriptionZh": "标题"
+ },
+ {
+ "name": "open",
+ "type": "boolean",
+ "default": "false",
+ "description": "Whether the Drawer dialog is visible or not, support `v-model:open`",
+ "descriptionZh": "抽屉是否可见,支持 `v-model:open`"
+ },
+ {
+ "name": "zIndex",
+ "type": "number",
+ "default": "1000",
+ "description": "The `z-index` of the Drawer",
+ "descriptionZh": "设置 Drawer 的 `z-index`"
+ },
+ {
+ "name": "afterOpenChange",
+ "type": "(open: boolean) => void",
+ "default": "",
+ "description": "Callback after the animation ends when switching drawers",
+ "descriptionZh": "切换抽屉时动画结束后的回调"
+ },
+ {
+ "name": "close",
+ "type": "(e: MouseEvent \\| KeyboardEvent) => void",
+ "default": "",
+ "description": "Callback when drawer is closed",
+ "descriptionZh": "抽屉关闭回调"
+ },
+ {
+ "name": "keydown",
+ "type": "(e: KeyboardEvent) => void",
+ "default": "",
+ "description": "Keyboard keydown event",
+ "descriptionZh": "键盘按下回调"
+ },
+ {
+ "name": "keyup",
+ "type": "(e: KeyboardEvent) => void",
+ "default": "",
+ "description": "Keyboard keyup event",
+ "descriptionZh": "键盘抬起回调"
+ },
+ {
+ "name": "mouseenter",
+ "type": "(e: MouseEvent) => void",
+ "default": "",
+ "description": "Mouse enter event",
+ "descriptionZh": "鼠标移入回调"
+ },
+ {
+ "name": "mouseleave",
+ "type": "(e: MouseEvent) => void",
+ "default": "",
+ "description": "Mouse leave event",
+ "descriptionZh": "鼠标移出回调"
+ },
+ {
+ "name": "mouseover",
+ "type": "(e: MouseEvent) => void",
+ "default": "",
+ "description": "Mouse over event",
+ "descriptionZh": "鼠标移入回调"
+ },
+ {
+ "name": "click",
+ "type": "(e: MouseEvent) => void",
+ "default": "",
+ "description": "Click event",
+ "descriptionZh": "点击回调"
+ }
+ ],
+ "tokens": [
+ {
+ "name": "draggerSize",
+ "type": "number",
+ "default": "4",
+ "description": "Size of resize handle",
+ "descriptionZh": "拖拽手柄大小"
+ },
+ {
+ "name": "footerPaddingBlock",
+ "type": "number",
+ "default": "8",
+ "description": "Vertical padding of footer",
+ "descriptionZh": "底部区域纵向内间距"
+ },
+ {
+ "name": "footerPaddingInline",
+ "type": "number",
+ "default": "16",
+ "description": "Horizontal padding of footer",
+ "descriptionZh": "底部区域横向内间距"
+ },
+ {
+ "name": "zIndexPopup",
+ "type": "number",
+ "default": "1000",
+ "description": "z-index of drawer",
+ "descriptionZh": "弹窗 z-index"
+ }
+ ],
+ "faq": [],
+ "demos": [
+ {
+ "name": "basic-right",
+ "title": "Basic",
+ "titleZh": "基本",
+ "description": "Basic drawer.",
+ "descriptionZh": "基础抽屉,点击触发按钮抽屉从右滑出,点击遮罩区关闭。",
+ "code": "\n\n\n \n Open\n \n \n Some contents...
\n Some contents...
\n Some contents...
\n \n"
+ },
+ {
+ "name": "placement",
+ "title": "Custom Placement",
+ "titleZh": "自定义位置",
+ "description": "The Drawer can appear from any edge of the screen.",
+ "descriptionZh": "自定义位置,点击触发按钮抽屉从相应的位置滑出,点击遮罩区关闭。",
+ "code": "\n\n\n \n \n \n top\n \n \n right\n \n \n bottom\n \n \n left\n \n \n \n Open\n \n \n \n Some contents...
\n Some contents...
\n Some contents...
\n \n"
+ },
+ {
+ "name": "resizable",
+ "title": "Resizable",
+ "titleZh": "可调整大小",
+ "description": "Resizable drawer that allows users to adjust the drawer's width or height by dragging the edge.",
+ "descriptionZh": "可调整大小的抽屉,允许通过拖拽边缘来调整抽屉的宽度或高度。",
+ "code": "\n\n\n \n ({ label: pos, value: pos }))\"\n @change=\"onChange\"\n />\n open = true\">\n Open Drawer\n \n \n Current size: {{ size }}px
\n \n Drag the edge to resize the drawer
\n Current size: {{ size }}px
\n \n"
+ },
+ {
+ "name": "loading",
+ "title": "Loading",
+ "titleZh": "加载中",
+ "description": "Set the loading status of Drawer.",
+ "descriptionZh": "设置抽屉加载状态。",
+ "code": "\n\n\n \n Open Drawer\n \n \n \n \n Loading Drawer\n
\n \n \n Reload\n \n Some contents...
\n Some contents...
\n Some contents...
\n \n"
+ },
+ {
+ "name": "extra",
+ "title": "Extra Actions",
+ "titleZh": "额外操作",
+ "description": "Extra actions should be placed at corner of drawer in Antdv Next, you can use `extra` prop for that.",
+ "descriptionZh": "在 Antdv Next 规范中,操作按钮建议放在抽屉的右上角,可以使用 `extra` 属性来实现。",
+ "code": "\n\n\n \n \n \n top\n \n \n right\n \n \n bottom\n \n \n left\n \n \n \n Open\n \n \n \n \n \n \n Cancel\n \n \n OK\n \n \n \n Some contents...
\n Some contents...
\n Some contents...
\n \n"
+ },
+ {
+ "name": "render-in-current",
+ "title": "Render in current dom",
+ "titleZh": "渲染在当前容器",
+ "description": "Render in current dom. custom container, check `getContainer`.\n\n> Note: `style` and `className` props are moved to Drawer panel in v5 which is aligned with Modal component. Original `style` and `className` props are replaced by `rootStyle` and `rootClass`.\n\n> When `getContainer` returns a DOM node, you need to manually set `rootStyle` to `{ position: 'absolute' }`.",
+ "descriptionZh": "渲染在当前 dom 里。自定义容器,查看 `getContainer`。\n\n> 注意:在 v5 中 `style` 与 `className` 迁移至 Drawer 面板上与 Modal 保持一致,原 `style` 与 `className` 替换为 `rootStyle` 与 `rootClass`。\n\n> 当 `getContainer` 返回 DOM 节点时,需要手动设置 `rootStyle` 为 `{ position: 'absolute' }`。",
+ "code": "\n\n\n \n Render in this\n
\n
\n Some contents...
\n \n
\n"
+ },
+ {
+ "name": "form-in-drawer",
+ "title": "Submit form in drawer",
+ "titleZh": "抽屉内表单",
+ "description": "Use a form in Drawer with a submit button.",
+ "descriptionZh": "在抽屉中使用表单。",
+ "code": "\n\n\n \n \n \n \n New account\n \n \n \n \n \n Cancel\n \n \n Submit\n \n \n \n \n \n \n \n \n \n \n \n \n \n http://\n \n .com\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n trigger.parentElement || document.body\"\n />\n \n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "user-profile",
+ "title": "Preview drawer",
+ "titleZh": "抽屉预览",
+ "description": "Use Drawer to quickly preview details of an object, such as those in a list.",
+ "descriptionZh": "需要快速预览对象概要时使用,点击遮罩区关闭。",
+ "code": "\n\n\n \n - \n \n \n View Profile\n \n
\n
\n\n \n \n User Profile\n
\n \n Personal\n
\n \n \n \n Lily\n \n \n \n \n AntDesign@example.com\n \n \n \n \n \n \n HangZhou\n \n \n \n \n China\n \n \n \n \n \n \n February 2, 1900\n \n \n \n \n -\n \n \n \n \n \n \n Make things as simple as possible but no simpler.\n \n \n \n\n \n\n \n Company\n
\n \n \n \n Programmer\n \n \n \n \n Coding\n \n \n \n \n \n \n XTech\n \n \n \n \n \n Lin\n \n \n \n \n \n \n \n C / C ++, data structures, software engineering, operating systems, computer networks,\n databases, compiler theory, computer architecture, Microcomputer Principle and Interface\n Technology, Computer English, Java, ASP, etc.\n \n \n \n\n \n\n \n Contacts\n
\n \n \n \n AntDesign@example.com\n \n \n \n \n +86 181 0000 0000\n \n \n \n \n \n \n \n github.com/ant-design/ant-design/\n \n \n \n \n \n"
+ },
+ {
+ "name": "multi-level-drawer",
+ "title": "Multi-level drawer",
+ "titleZh": "多层抽屉",
+ "description": "Open a new drawer on top of an existing drawer to handle multi branch tasks.",
+ "descriptionZh": "在抽屉内打开新的抽屉,用以解决多分支任务的复杂状况。",
+ "code": "\n\n\n \n Open drawer\n \n \n \n Two-level drawer\n \n \n This is two-level drawer\n \n \n"
+ },
+ {
+ "name": "size",
+ "title": "Preset size",
+ "titleZh": "预设尺寸",
+ "description": "The default width (or height) of Drawer is `378px`, and there is a preset large size `736px`.",
+ "descriptionZh": "抽屉的默认宽度为 `378px`,另外还提供一个大号抽屉 `736px`,可以用 `size` 属性来设置。",
+ "code": "\n\n\n \n \n Open Default Size (378px)\n \n \n Open Large Size (736px)\n \n \n \n \n \n \n Cancel\n \n \n OK\n \n \n \n Some contents...
\n Some contents...
\n Some contents...
\n \n"
+ },
+ {
+ "name": "mask",
+ "title": "mask",
+ "titleZh": "遮罩",
+ "description": "mask effect, default `blur`.",
+ "descriptionZh": "遮罩效果,默认 `blur`。",
+ "code": "\n\n\n \n \n \n {{ item.title }}\n \n \n Some contents...
\n Some contents...
\n Some contents...
\n \n \n \n"
+ },
+ {
+ "name": "closable-placement",
+ "title": "Closable placement",
+ "titleZh": "关闭按钮位置",
+ "description": "Drawer with closable placement, customize the close placement to the `end`, defaults to `start`.",
+ "descriptionZh": "自定义抽屉的关闭按钮位置,放到右侧,默认为左侧。",
+ "code": "\n\n\n \n Open\n \n \n Some contents...
\n Some contents...
\n Take a look at the top-right corner...
\n \n"
+ },
+ {
+ "name": "style-class",
+ "title": "Custom semantic dom styling",
+ "titleZh": "自定义语义结构样式",
+ "description": "You can customize the [semantic dom](#semantic-dom) style of Drawer by passing objects or functions through `classes` and `styles`.",
+ "descriptionZh": "通过 `classes` 和 `styles` 传入对象或者函数可以自定义 Drawer 组件的 [语义化结构](#semantic-dom) 样式。",
+ "code": "\n\n\n \n \n Object Style\n \n \n Function Style\n \n \n\n \n Some contents...
\n Some contents...
\n Some contents...
\n \n\n \n Some contents...
\n Some contents...
\n Some contents...
\n \n"
+ },
+ {
+ "name": "_semantic",
+ "title": "",
+ "titleZh": "",
+ "description": "",
+ "descriptionZh": "",
+ "code": "\n\n\n \n \n \n \n Footer\n \n \n Cancel\n \n Some contents...
\n \n \n \n"
+ }
+ ]
+ },
+ {
+ "name": "Dropdown",
+ "nameZh": "下拉菜单",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "A dropdown list.",
+ "descriptionZh": "向下弹出的列表。",
+ "whenToUse": "",
+ "whenToUseZh": "当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。\n\n- 用于收罗一组命令操作。\n- Select 用于选择,而 Dropdown 是命令集合。",
+ "doc": "---\ncategory: Components\ngroup: Navigation\ntitle: Dropdown\ndescription: A dropdown list.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gTBySYX11WcAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k619RJ_7bKEAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n cols: 2\n---\n\n## When To Use\n\nWhen there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.\n\n## Examples\n\n\n Basic\n Extra node\n Placement\n Arrow\n Other elements\n Arrow pointing at the center\n Trigger mode\n Click event\n Button with dropdown menu\n Custom dropdown\n Cascading menu\n The way of hiding menu\n Context Menu\n Loading\n Selectable Menu\n Custom semantic dom styling\n\n\n## API\n\n### Props\n\nCommon props ref:[Common props](/docs/vue/common-props)\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| classes | Customize class for each semantic structure inside the Dropdown component. Supports object or function | DropdownClassNamesType | - | - |\n| styles | Customize inline style for each semantic structure inside the Dropdown component. Supports object or function | DropdownStylesType | - | - |\n| menu | The menu props | MenuProps & { activeKey?: VcMenuProps['activeKey'], onClick?: MenuEmits['click'] } | - | - |\n| autoFocus | Focus the first menu item when opened | boolean | - | - |\n| arrow | Whether the dropdown arrow should be visible. Supports `pointAtCenter` | boolean \\| DropdownArrowOptions | false | - |\n| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | ('click' \\| 'hover' \\| 'contextmenu')[] | ['hover'] | - |\n| popupRender | Customize popup content | (menu: VueNode) => VueNode | - | - |\n| open | Whether the dropdown menu is currently open | boolean | - | - |\n| disabled | Whether the dropdown menu is disabled | boolean | - | - |\n| destroyOnHidden | Whether destroy dropdown when hidden | boolean | false | - |\n| align | Popup align config | AlignType | - | - |\n| getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | - |\n| prefixCls | Customize prefix class name | string | - | - |\n| transitionName | Motion name of dropdown | string | - | - |\n| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | Placement | `bottomLeft` | - |\n| forceRender | Force render dropdown overlay | boolean | - | - |\n| mouseEnterDelay | Delay in seconds before showing dropdown | number | 0.15 | - |\n| mouseLeaveDelay | Delay in seconds before hiding dropdown | number | 0.1 | - |\n| openClassName | Class added to trigger when dropdown is open | string | - | - |\n| autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean \\| AdjustOverflow | true | - |\n\n### Events\n\n| Event | Description | Type | Version |\n| --- | --- | --- | --- |\n| openChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean, info: { source: 'trigger' \\| 'menu' }) => void | - |\n| menuClick | Callback when menu item clicked | MenuEmits['click'] | - |\n\n### Slots\n\n| Slot | Description | Type | Version |\n|-------------|-------------------------|---------------------------| --- |\n| popupRender | Customize popup content | (menu: VueNode) => any | - |\n| labelRender | Customize label content | (item: Item) => any | - |\n\nDropdown also supports Menu slots (such as `labelRender`) via the Dropdown slots.\n\n## Note\n\nPlease ensure that the child node of `Dropdown` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.\n\n## Semantic DOM\n\n\n\n## Design Token\n\n\n\nSee [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.\n\n## FAQ\n\n### How to prevent Dropdown from being squeezed when it exceeds the screen horizontally? {#faq-dropdown-squeezed}\n\nYou can use `width: max-content` style to handle this. ref [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135).\n",
+ "docZh": "---\ncategory: Components\ngroup: 导航\ntitle: Dropdown\nsubtitle: 下拉菜单\ndescription: 向下弹出的列表。\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gTBySYX11WcAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k619RJ_7bKEAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n cols: 2\n---\n\n## 何时使用 {#when-to-use}\n\n当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。\n\n- 用于收罗一组命令操作。\n- Select 用于选择,而 Dropdown 是命令集合。\n\n## 代码演示 {#examples}\n\n\n 基本\n 额外节点\n 弹出位置\n 箭头\n 其他元素\n 箭头指向\n 触发方式\n 触发事件\n 带下拉框的按钮\n 扩展菜单\n 多级菜单\n 菜单隐藏方式\n 右键菜单\n 加载中状态\n 菜单可选选择\n 自定义语义结构的样式和类\n\n\n## API\n\n通用属性参考:[通用属性](/docs/vue/common-props)\n\n### 属性 {#props}\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| classes | 用于自定义 Dropdown 组件内部各语义化结构的 class,支持对象或函数 | DropdownClassNamesType | - | - |\n| styles | 用于自定义 Dropdown 组件内部各语义化结构的行内 style,支持对象或函数 | DropdownStylesType | - | - |\n| menu | 菜单配置项 | MenuProps & { activeKey?: VcMenuProps['activeKey'], onClick?: MenuEmits['click'] } | - | - |\n| autoFocus | 打开后自动聚焦首个菜单项 | boolean | - | - |\n| arrow | 下拉框箭头是否显示,可配置 `pointAtCenter` | boolean \\| DropdownArrowOptions | false | - |\n| trigger | 触发下拉的行为,移动端不支持 hover | ('click' \\| 'hover' \\| 'contextmenu')[] | ['hover'] | - |\n| popupRender | 自定义弹出框内容 | (menu: VueNode) => VueNode | - | - |\n| open | 菜单是否显示 | boolean | - | - |\n| disabled | 菜单是否禁用 | boolean | - | - |\n| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | - |\n| align | 对齐配置 | AlignType | - | - |\n| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | - |\n| prefixCls | 自定义前缀类名 | string | - | - |\n| transitionName | 动画名称 | string | - | - |\n| placement | 菜单弹出位置:`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | Placement | `bottomLeft` | - |\n| forceRender | 强制渲染下拉菜单 | boolean | - | - |\n| mouseEnterDelay | 鼠标移入后显示延时,单位秒 | number | 0.15 | - |\n| mouseLeaveDelay | 鼠标移出后隐藏延时,单位秒 | number | 0.1 | - |\n| openClassName | 菜单显示时附加在触发元素上的 class | string | - | - |\n| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean \\| AdjustOverflow | true | - |\n\n### 事件 {#events}\n\n| 事件 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| openChange | 菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发 | (open: boolean, info: { source: 'trigger' \\| 'menu' }) => void | - |\n| menuClick | 点击菜单项的回调 | MenuEmits['click'] | - |\n\n### 插槽 {#slots}\n\n| 插槽 | 说明 | 类型 | 版本 |\n|-------------|------------| --- | --- |\n| popupRender | 自定义弹出框内容 | (menu: VueNode) => any | - |\n| labelRender | 自定义label内容 | (item: Item) => any | - |\n\nDropdown 会透传 Menu 的插槽(例如 `labelRender`)。\n\n## 注意 {#note}\n\n请确保 `Dropdown` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。\n\n## 语义化 DOM {#semantic-dom}\n\n\n\n## 主题变量(Design Token){#design-token}\n\n\n\n参考 [定制主题](/docs/vue/customize-theme) 了解如何使用主题变量。\n\n## FAQ\n\n### Dropdown 在水平方向超出屏幕时会被挤压该怎么办? {#faq-dropdown-squeezed}\n\n你可以通过 `width: max-content` 来解决这个问题,参考 [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135)。\n",
+ "subComponents": {},
+ "props": [
+ {
+ "name": "classes",
+ "type": "DropdownClassNamesType",
+ "default": "-",
+ "description": "Customize class for each semantic structure inside the Dropdown component. Supports object or function",
+ "descriptionZh": "用于自定义 Dropdown 组件内部各语义化结构的 class,支持对象或函数"
+ },
+ {
+ "name": "styles",
+ "type": "DropdownStylesType",
+ "default": "-",
+ "description": "Customize inline style for each semantic structure inside the Dropdown component. Supports object or function",
+ "descriptionZh": "用于自定义 Dropdown 组件内部各语义化结构的行内 style,支持对象或函数"
+ },
+ {
+ "name": "menu",
+ "type": "MenuProps & { activeKey?: VcMenuProps['activeKey'], onClick?: MenuEmits['click'] }",
+ "default": "-",
+ "description": "The menu props",
+ "descriptionZh": "菜单配置项"
+ },
+ {
+ "name": "autoFocus",
+ "type": "boolean",
+ "default": "-",
+ "description": "Focus the first menu item when opened",
+ "descriptionZh": "打开后自动聚焦首个菜单项"
+ },
+ {
+ "name": "arrow",
+ "type": "boolean \\| DropdownArrowOptions",
+ "default": "false",
+ "description": "Whether the dropdown arrow should be visible. Supports `pointAtCenter`",
+ "descriptionZh": "下拉框箭头是否显示,可配置 `pointAtCenter`"
+ },
+ {
+ "name": "trigger",
+ "type": "('click' \\| 'hover' \\| 'contextmenu')[]",
+ "default": "['hover']",
+ "description": "The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens",
+ "descriptionZh": "触发下拉的行为,移动端不支持 hover"
+ },
+ {
+ "name": "popupRender",
+ "type": "(menu: VueNode) => VueNode",
+ "default": "-",
+ "description": "Customize popup content",
+ "descriptionZh": "自定义弹出框内容"
+ },
+ {
+ "name": "open",
+ "type": "boolean",
+ "default": "-",
+ "description": "Whether the dropdown menu is currently open",
+ "descriptionZh": "菜单是否显示"
+ },
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "default": "-",
+ "description": "Whether the dropdown menu is disabled",
+ "descriptionZh": "菜单是否禁用"
+ },
+ {
+ "name": "destroyOnHidden",
+ "type": "boolean",
+ "default": "false",
+ "description": "Whether destroy dropdown when hidden",
+ "descriptionZh": "关闭后是否销毁 Dropdown"
+ },
+ {
+ "name": "align",
+ "type": "AlignType",
+ "default": "-",
+ "description": "Popup align config",
+ "descriptionZh": "对齐配置"
+ },
+ {
+ "name": "getPopupContainer",
+ "type": "(triggerNode: HTMLElement) => HTMLElement",
+ "default": "() => document.body",
+ "description": "To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010)",
+ "descriptionZh": "菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010)"
+ },
+ {
+ "name": "prefixCls",
+ "type": "string",
+ "default": "-",
+ "description": "Customize prefix class name",
+ "descriptionZh": "自定义前缀类名"
+ },
+ {
+ "name": "transitionName",
+ "type": "string",
+ "default": "-",
+ "description": "Motion name of dropdown",
+ "descriptionZh": "动画名称"
+ },
+ {
+ "name": "placement",
+ "type": "Placement",
+ "default": "`bottomLeft`",
+ "description": "Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight`",
+ "descriptionZh": "菜单弹出位置:`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight`"
+ },
+ {
+ "name": "forceRender",
+ "type": "boolean",
+ "default": "-",
+ "description": "Force render dropdown overlay",
+ "descriptionZh": "强制渲染下拉菜单"
+ },
+ {
+ "name": "mouseEnterDelay",
+ "type": "number",
+ "default": "0.15",
+ "description": "Delay in seconds before showing dropdown",
+ "descriptionZh": "鼠标移入后显示延时,单位秒"
+ },
+ {
+ "name": "mouseLeaveDelay",
+ "type": "number",
+ "default": "0.1",
+ "description": "Delay in seconds before hiding dropdown",
+ "descriptionZh": "鼠标移出后隐藏延时,单位秒"
+ },
+ {
+ "name": "openClassName",
+ "type": "string",
+ "default": "-",
+ "description": "Class added to trigger when dropdown is open",
+ "descriptionZh": "菜单显示时附加在触发元素上的 class"
+ },
+ {
+ "name": "autoAdjustOverflow",
+ "type": "boolean \\| AdjustOverflow",
+ "default": "true",
+ "description": "Whether to adjust dropdown placement automatically when dropdown is off screen",
+ "descriptionZh": "下拉框被遮挡时自动调整位置"
+ },
+ {
+ "name": "openChange",
+ "type": "(open: boolean, info: { source: 'trigger' \\| 'menu' }) => void",
+ "default": "",
+ "description": "Called when the open state is changed. Not trigger when hidden by click item",
+ "descriptionZh": "菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发"
+ },
+ {
+ "name": "menuClick",
+ "type": "MenuEmits['click']",
+ "default": "",
+ "description": "Callback when menu item clicked",
+ "descriptionZh": "点击菜单项的回调"
+ }
+ ],
+ "tokens": [
+ {
+ "name": "arrowOffsetHorizontal",
+ "type": "number",
+ "default": "12",
+ "description": "",
+ "descriptionZh": ""
+ },
+ {
+ "name": "arrowOffsetVertical",
+ "type": "number",
+ "default": "8",
+ "description": "",
+ "descriptionZh": ""
+ },
+ {
+ "name": "arrowPath",
+ "type": "string",
+ "default": "path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z')",
+ "description": "",
+ "descriptionZh": ""
+ },
+ {
+ "name": "arrowPolygon",
+ "type": "string",
+ "default": "polygon(1.6568542494923806px 100%, 50% 1.6568542494923806px, 14.34314575050762px 100%, 1.6568542494923806px 100%)",
+ "description": "",
+ "descriptionZh": ""
+ },
+ {
+ "name": "arrowShadowWidth",
+ "type": "number",
+ "default": "8.970562748477143",
+ "description": "",
+ "descriptionZh": ""
+ },
+ {
+ "name": "paddingBlock",
+ "type": "PaddingBlock | undefined",
+ "default": "5",
+ "description": "Vertical padding of dropdown",
+ "descriptionZh": "下拉菜单纵向内边距"
+ },
+ {
+ "name": "zIndexPopup",
+ "type": "number",
+ "default": "1050",
+ "description": "z-index of dropdown",
+ "descriptionZh": "下拉菜单 z-index"
+ }
+ ],
+ "faq": [
+ {
+ "question": "How to prevent Dropdown from being squeezed when it exceeds the screen horizontally?",
+ "answer": "You can use `width: max-content` style to handle this. ref [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135)."
+ }
+ ],
+ "demos": [
+ {
+ "name": "basic",
+ "title": "Basic",
+ "titleZh": "基本",
+ "description": "The most basic dropdown menu.",
+ "descriptionZh": "最简单的下拉菜单。",
+ "code": "\n\n\n \n \n \n Hover me\n \n \n \n \n \n \n {{ item?.label }}\n \n \n \n \n"
+ },
+ {
+ "name": "extra",
+ "title": "Extra node",
+ "titleZh": "额外节点",
+ "description": "The dropdown menu with shortcut.",
+ "descriptionZh": "带有快捷方式的下拉菜单。",
+ "code": "\n\n\n \n \n \n Hover me\n \n \n \n \n"
+ },
+ {
+ "name": "placement",
+ "title": "Placement",
+ "titleZh": "弹出位置",
+ "description": "Support 6 placements.",
+ "descriptionZh": "支持 6 个弹出位置。",
+ "code": "\n\n\n \n \n \n bottomLeft\n \n \n {{ item?.label }}\n \n \n \n \n bottom\n \n \n {{ item?.label }}\n \n \n \n \n bottomRight\n \n \n {{ item?.label }}\n \n \n \n \n \n \n topLeft\n \n \n {{ item?.label }}\n \n \n \n \n top\n \n \n {{ item?.label }}\n \n \n \n \n topRight\n \n \n {{ item?.label }}\n \n \n \n \n \n"
+ },
+ {
+ "name": "arrow",
+ "title": "Arrow",
+ "titleZh": "箭头",
+ "description": "You could display an arrow.",
+ "descriptionZh": "可以展示一个箭头。",
+ "code": "\n\n\n \n \n \n bottomLeft\n \n \n {{ item?.label }}\n \n \n \n \n bottom\n \n \n {{ item?.label }}\n \n \n \n \n bottomRight\n \n \n {{ item?.label }}\n \n \n \n \n \n \n topLeft\n \n \n {{ item?.label }}\n \n \n \n \n top\n \n \n {{ item?.label }}\n \n \n \n \n topRight\n \n \n {{ item?.label }}\n \n \n \n \n \n"
+ },
+ {
+ "name": "item",
+ "title": "Other elements",
+ "titleZh": "其他元素",
+ "description": "Divider and disabled menu item.",
+ "descriptionZh": "分割线和不可用菜单项。",
+ "code": "\n\n\n \n \n \n Hover me\n \n \n \n \n \n {{ item?.label }}\n \n \n \n"
+ },
+ {
+ "name": "arrow-center",
+ "title": "Arrow pointing at the center",
+ "titleZh": "箭头指向",
+ "description": "Set `arrow` with `pointAtCenter: true`, the arrow will point to the center of the target element.",
+ "descriptionZh": "设置 `arrow` 并指定 `pointAtCenter: true` 后,箭头将指向目标元素的中心。",
+ "code": "\n\n\n \n \n \n bottomLeft\n \n \n {{ item?.label }}\n \n \n \n \n bottom\n \n \n {{ item?.label }}\n \n \n \n \n bottomRight\n \n \n {{ item?.label }}\n \n \n \n \n \n \n topLeft\n \n \n {{ item?.label }}\n \n \n \n \n top\n \n \n {{ item?.label }}\n \n \n \n \n topRight\n \n \n {{ item?.label }}\n \n \n \n \n \n"
+ },
+ {
+ "name": "trigger",
+ "title": "Trigger mode",
+ "titleZh": "触发方式",
+ "description": "The default trigger mode is `hover`, you can change it to `click`.",
+ "descriptionZh": "默认是移入触发菜单,可以点击触发。",
+ "code": "\n\n\n \n \n \n Click me\n \n \n \n \n \n {{ item?.label }}\n \n \n \n"
+ },
+ {
+ "name": "event",
+ "title": "Click event",
+ "titleZh": "触发事件",
+ "description": "An event will be triggered when you click menu items, in which you can make different operations according to item's key.",
+ "descriptionZh": "点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作。",
+ "code": "\n\n\n \n \n \n \n Hover me, Click menu item\n \n \n \n \n"
+ },
+ {
+ "name": "dropdown-button",
+ "title": "Button with dropdown menu",
+ "titleZh": "带下拉框的按钮",
+ "description": "A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.",
+ "descriptionZh": "左边是按钮,右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。",
+ "code": "\n\n\n \n \n \n \n Dropdown\n \n \n \n \n \n \n \n \n \n\n \n \n Dropdown\n \n \n \n \n \n \n \n \n \n\n \n \n Dropdown\n \n \n \n \n \n \n \n \n \n\n \n \n \n With Tooltip\n \n \n \n \n \n \n\n \n \n \n \n \n Button\n \n \n\n \n \n Danger\n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "custom-dropdown",
+ "title": "Custom dropdown",
+ "titleZh": "扩展菜单",
+ "description": "Customize the dropdown menu via `popupRender`. If you don't need the Menu content, use the Popover component directly.",
+ "descriptionZh": "使用 `popupRender` 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容,请直接使用 Popover 组件。",
+ "code": "\n\n\n \n \n \n
\n
\n
\n \n Click me!\n \n \n
\n \n \n \n Hover me\n \n \n \n \n \n \n {{ item?.label }}\n \n \n \n \n"
+ },
+ {
+ "name": "sub-menu",
+ "title": "Cascading menu",
+ "titleZh": "多级菜单",
+ "description": "The menu has multiple levels.",
+ "descriptionZh": "传入的菜单里有多个层级。",
+ "code": "\n\n\n \n \n \n Cascading menu\n \n \n \n \n"
+ },
+ {
+ "name": "overlay-open",
+ "title": "The way of hiding menu",
+ "titleZh": "菜单隐藏方式",
+ "description": "The default is to close the menu when you click on menu items, this feature can be turned off.",
+ "descriptionZh": "默认是点击关闭菜单,可以关闭此功能。",
+ "code": "\n\n\n \n \n \n Hover me\n \n \n \n \n"
+ },
+ {
+ "name": "context-menu",
+ "title": "Context Menu",
+ "titleZh": "右键菜单",
+ "description": "The default trigger mode is `hover`, you can change it to `contextMenu`. The pop-up menu position will follow the right-click position.",
+ "descriptionZh": "默认是移入触发菜单,可以点击鼠标右键触发。弹出菜单位置会跟随右键点击位置变动。",
+ "code": "\n\n\n \n \n Right Click on here\n
\n \n"
+ },
+ {
+ "name": "loading",
+ "title": "Loading",
+ "titleZh": "加载中状态",
+ "description": "A loading indicator can be added to a button by setting the `loading` property.",
+ "descriptionZh": "添加 `loading` 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。",
+ "code": "\n\n\n \n \n \n Submit\n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "selectable",
+ "title": "Selectable Menu",
+ "titleZh": "菜单可选选择",
+ "description": "Configure the `selectable` property in `menu` to enable selectable ability.",
+ "descriptionZh": "添加 `menu` 中的 `selectable` 属性可以开启选择能力。",
+ "code": "\n\n\n \n \n \n Selectable\n \n \n \n \n"
+ },
+ {
+ "name": "style-class",
+ "title": "Custom semantic dom styling",
+ "titleZh": "自定义语义结构的样式和类",
+ "description": "You can customize the [semantic dom](#semantic-dom) style of the Dropdown by passing objects/functions through `classes` and `styles`.",
+ "descriptionZh": "通过 `classes` 和 `styles` 传入对象/函数可以自定义 Dropdown 的[语义化结构](#semantic-dom)样式。",
+ "code": "\n\n\n \n \n \n \n \n Object Style\n \n \n \n \n\n \n \n \n Function Style\n \n \n \n \n \n \n"
+ },
+ {
+ "name": "_semantic",
+ "title": "",
+ "titleZh": "",
+ "description": "",
+ "descriptionZh": "",
+ "code": "\n\n\n \n \n \n \n \n"
+ }
+ ]
+ },
+ {
+ "name": "Empty",
+ "nameZh": "空状态",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "Empty state placeholder.",
+ "descriptionZh": "空状态时的展示占位图。",
+ "whenToUse": "",
+ "whenToUseZh": "- 当目前没有数据时,用于显式的用户提示。\n- 初始化场景时的引导创建。",
+ "doc": "---\ncategory: Components\ngroup: Data Display\ntitle: Empty\ndescription: Empty state placeholder.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original\n---\n\n## When To Use\n\n- When there is no data provided, display for friendly tips.\n- User tutorial to create something in a fresh new situation.\n\n## Examples\n\n\n Basic\n Choose image\n Customize\n ConfigProvider\n Custom semantic dom styling\n No description\n\n\n## API\n\nCommon props ref:[Common props](/docs/vue/common-props)\n\n### Props\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| classes | Customize class for each semantic structure inside the component. Supports object or function. | EmptyClassNamesType | - | - |\n| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | EmptyStylesType | - | - |\n| image | Customize image. Will treat as image url when string provided | VueNode | `Empty.PRESENTED_IMAGE_DEFAULT` | - |\n| description | Customize description | VueNode | - | - |\n| rootClass | Root container class | string | - | - |\n| prefixCls | Prefix class name | string | - | - |\n\n### Slots\n\n| Slot | Description | Type | Version |\n| --- | --- | --- | --- |\n| image | Customize image. Will treat as image url when string provided | () => any | - |\n| description | Customize description | () => any | - |\n| default | Footer content | () => any | - |\n\n## Built-in images {#built-in-images}\n\n- Empty.PRESENTED_IMAGE_SIMPLE\n\n \n\n- Empty.PRESENTED_IMAGE_DEFAULT\n\n \n\n\n\n## Semantic DOM\n\n\n\n## Design Token {#design-token}\n\n\n\nSee [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.\n",
+ "docZh": "---\ncategory: Components\ngroup: 数据展示\ntitle: Empty\nsubtitle: 空状态\ndescription: 空状态时的展示占位图。\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original\n---\n\n## 何时使用 {#when-to-use}\n\n- 当目前没有数据时,用于显式的用户提示。\n- 初始化场景时的引导创建。\n\n## 代码演示 {#examples}\n\n\n 基础用法\n 选择图片\n 自定义\n ConfigProvider\n 自定义语义化结构样式\n 无描述\n\n\n## API\n\n### 属性 {#props}\n\n通用属性参考:[通用属性](/docs/vue/common-props)\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| classes | 用于自定义组件内部各语义化结构的 class,支持对象或函数 | EmptyClassNamesType | - | - |\n| styles | 用于自定义组件内部各语义化结构的行内 style,支持对象或函数 | EmptyStylesType | - | - |\n| image | 设置显示图片,为 string 时表示自定义图片地址。 | VueNode | `Empty.PRESENTED_IMAGE_DEFAULT` | - |\n| description | 自定义描述内容 | VueNode | - | - |\n| rootClass | 根元素 class | string | - | - |\n| prefixCls | 类名前缀 | string | - | - |\n\n### 插槽 {#slots}\n\n| 插槽 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| image | 设置显示图片,为 string 时表示自定义图片地址。 | () => any | - |\n| description | 自定义描述内容 | () => any | - |\n| default | 底部操作区域内容 | () => any | - |\n\n## 内置图片 {#built-in-images}\n\n- Empty.PRESENTED_IMAGE_SIMPLE\n\n \n\n- Empty.PRESENTED_IMAGE_DEFAULT\n\n \n\n\n\n## 语义化结构 {#semantic-dom}\n\n\n\n## 设计变量 {#design-token}\n\n\n\n查看 [定制主题](/docs/vue/customize-theme) 了解如何使用 Design Token。\n",
+ "subComponents": {},
+ "props": [
+ {
+ "name": "classes",
+ "type": "EmptyClassNamesType",
+ "default": "-",
+ "description": "Customize class for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的 class,支持对象或函数"
+ },
+ {
+ "name": "styles",
+ "type": "EmptyStylesType",
+ "default": "-",
+ "description": "Customize inline style for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的行内 style,支持对象或函数"
+ },
+ {
+ "name": "image",
+ "type": "VueNode",
+ "default": "`Empty.PRESENTED_IMAGE_DEFAULT`",
+ "description": "Customize image. Will treat as image url when string provided",
+ "descriptionZh": "设置显示图片,为 string 时表示自定义图片地址。"
+ },
+ {
+ "name": "description",
+ "type": "VueNode",
+ "default": "-",
+ "description": "Customize description",
+ "descriptionZh": "自定义描述内容"
+ },
+ {
+ "name": "rootClass",
+ "type": "string",
+ "default": "-",
+ "description": "Root container class",
+ "descriptionZh": "根元素 class"
+ },
+ {
+ "name": "prefixCls",
+ "type": "string",
+ "default": "-",
+ "description": "Prefix class name",
+ "descriptionZh": "类名前缀"
+ }
+ ],
+ "tokens": [],
+ "faq": [],
+ "demos": [
+ {
+ "name": "basic",
+ "title": "Basic",
+ "titleZh": "基础用法",
+ "description": "Basic empty state.",
+ "descriptionZh": "基础空状态。",
+ "code": "\n \n"
+ },
+ {
+ "name": "simple",
+ "title": "Choose image",
+ "titleZh": "选择图片",
+ "description": "Choose built-in image.",
+ "descriptionZh": "选择内置图片。",
+ "code": "\n\n\n \n"
+ },
+ {
+ "name": "customize",
+ "title": "Customize",
+ "titleZh": "自定义",
+ "description": "Customize description and extra content.",
+ "descriptionZh": "自定义描述与操作区域。",
+ "code": "\n \n \n Customize Description\n \n \n Create Now\n \n \n"
+ },
+ {
+ "name": "config-provider",
+ "title": "ConfigProvider",
+ "titleZh": "ConfigProvider",
+ "description": "Use ConfigProvider to customize empty content.",
+ "descriptionZh": "通过 ConfigProvider 统一设置空状态。",
+ "code": "\n\n\n \n \n \n \n Select
\n \n TreeSelect
\n \n Cascader
\n \n Transfer
\n \n Table
\n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "style-class",
+ "title": "Custom semantic dom styling",
+ "titleZh": "自定义语义化结构样式",
+ "description": "Custom semantic dom styling.",
+ "descriptionZh": "自定义语义化结构的样式和类。",
+ "code": "\n\n\n \n \n Create\n \n \n"
+ },
+ {
+ "name": "description",
+ "title": "No description",
+ "titleZh": "无描述",
+ "description": "Hide default description.",
+ "descriptionZh": "隐藏默认描述。",
+ "code": "\n \n"
+ },
+ {
+ "name": "_semantic",
+ "title": "",
+ "titleZh": "",
+ "description": "",
+ "descriptionZh": "",
+ "code": "\n\n\n \n \n \n \n \n Customize Description\n \n \n \n Create Now\n \n \n \n \n"
+ }
+ ]
+ },
+ {
+ "name": "Empty",
+ "nameZh": "弹性布局",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "Empty state placeholder.",
+ "descriptionZh": "用于对齐的弹性布局容器。",
+ "whenToUse": "",
+ "whenToUseZh": "- 适合设置元素之间的间距。\n- 适合设置各种水平、垂直对齐方式。\n\n### 与 Space 组件的区别 {#difference-with-space}\n\n- Space 为内联元素提供间距,其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。\n- Flex 为块级元素提供间距,其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局,并提供了更多的灵活性和控制能力。",
+ "doc": "---\ncategory: Components\ngroup: Data Display\ntitle: Empty\ndescription: Empty state placeholder.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original\n---\n\n## When To Use\n\n- Good for setting spacing between elements.\n- Suitable for setting various horizontal and vertical alignments.\n\n### Difference with Space component\n\n- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.\n- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.\n\n## Examples\n\n\n basic\n align\n gap\n wrap\n combination\n\n\n## API\n\n### Props\n\nCommon props ref:[Common props](/docs/vue/common-props)\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` | - |\n| wrap | Set whether the element is displayed in a single line or in multiple lines | boolean \\| CSSProperties['flexWrap'] | nowrap | boolean: 5.17.0 |\n| justify | Sets the alignment of elements in the direction of the main axis | CSSProperties['justifyContent'] | normal | - |\n| align | Sets the alignment of elements in the direction of the cross axis | CSSProperties['alignItems'] | normal | - |\n| flex | flex CSS shorthand properties | CSSProperties['flex'] | normal | - |\n| gap | Sets the gap between grids | CSSProperties['gap'] \\| SizeType | - | - |\n| component | custom element type | any | `div` | - |\n\n## Design Token\n\n\n\nSee [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.\n",
+ "docZh": "---\ncategory: Components\ngroup: 布局\ntitle: Flex\nsubtitle: 弹性布局\ndescription: 用于对齐的弹性布局容器。\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original\n---\n\n## 何时使用 {#when-to-use}\n\n- 适合设置元素之间的间距。\n- 适合设置各种水平、垂直对齐方式。\n\n### 与 Space 组件的区别 {#difference-with-space}\n\n- Space 为内联元素提供间距,其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。\n- Flex 为块级元素提供间距,其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局,并提供了更多的灵活性和控制能力。\n\n## 代码演示 {#examples}\n\n\n 基本布局\n 对齐方式\n 设置间隙\n 自动换行\n 组合使用\n\n\n## API\n\n### 属性 {#props}\n\n通用属性参考:[通用属性](/docs/vue/common-props)\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| vertical | flex 主轴的方向是否垂直,使用 `flex-direction: column` | boolean | `false` | - |\n| wrap | 设置元素单行显示还是多行显示 | boolean \\| CSSProperties['flexWrap'] | nowrap | boolean: 5.17.0 |\n| justify | 设置元素在主轴方向上的对齐方式 | CSSProperties['justifyContent'] | normal | - |\n| align | 设置元素在交叉轴方向上的对齐方式 | CSSProperties['alignItems'] | normal | - |\n| flex | flex CSS 简写属性 | CSSProperties['flex'] | normal | - |\n| gap | 设置网格之间的间隙 | CSSProperties['gap'] \\| SizeType | - | - |\n| component | 自定义元素类型 | any | `div` | - |\n\n## 主题变量(Design Token)\n\n\n\n查看 [定制主题](/docs/vue/customize-theme) 了解如何使用主题变量。\n",
+ "subComponents": {},
+ "props": [
+ {
+ "name": "vertical",
+ "type": "boolean",
+ "default": "`false`",
+ "description": "Is direction of the flex vertical, use `flex-direction: column`",
+ "descriptionZh": "flex 主轴的方向是否垂直,使用 `flex-direction: column`"
+ },
+ {
+ "name": "wrap",
+ "type": "boolean \\| CSSProperties['flexWrap']",
+ "default": "nowrap",
+ "description": "Set whether the element is displayed in a single line or in multiple lines",
+ "descriptionZh": "设置元素单行显示还是多行显示"
+ },
+ {
+ "name": "justify",
+ "type": "CSSProperties['justifyContent']",
+ "default": "normal",
+ "description": "Sets the alignment of elements in the direction of the main axis",
+ "descriptionZh": "设置元素在主轴方向上的对齐方式"
+ },
+ {
+ "name": "align",
+ "type": "CSSProperties['alignItems']",
+ "default": "normal",
+ "description": "Sets the alignment of elements in the direction of the cross axis",
+ "descriptionZh": "设置元素在交叉轴方向上的对齐方式"
+ },
+ {
+ "name": "flex",
+ "type": "CSSProperties['flex']",
+ "default": "normal",
+ "description": "flex CSS shorthand properties",
+ "descriptionZh": "flex CSS 简写属性"
+ },
+ {
+ "name": "gap",
+ "type": "CSSProperties['gap'] \\| SizeType",
+ "default": "-",
+ "description": "Sets the gap between grids",
+ "descriptionZh": "设置网格之间的间隙"
+ },
+ {
+ "name": "component",
+ "type": "any",
+ "default": "`div`",
+ "description": "custom element type",
+ "descriptionZh": "自定义元素类型"
+ }
+ ],
+ "tokens": [],
+ "faq": [],
+ "demos": [
+ {
+ "name": "basic",
+ "title": "basic",
+ "titleZh": "基本布局",
+ "description": "The basic usage.",
+ "descriptionZh": "最基本的用法。",
+ "code": "\n\n\n \n \n \n horizontal\n \n \n vertical\n \n \n \n \n \n \n"
+ },
+ {
+ "name": "align",
+ "title": "align",
+ "titleZh": "对齐方式",
+ "description": "Set align.",
+ "descriptionZh": "设置对齐方式。",
+ "code": "\n\n\n \n Select justify :
\n \n Select align :
\n \n \n \n Primary\n \n \n Primary\n \n \n Primary\n \n \n Primary\n \n \n \n"
+ },
+ {
+ "name": "gap",
+ "title": "gap",
+ "titleZh": "设置间隙",
+ "description": "Set the `gap` between elements, which has three preset sizes: `small`, `middle`, `large`, You can also customize the gap size.",
+ "descriptionZh": "使用 `gap` 设置元素之间的间距,预设了 `small`、`middle`、`large` 三种尺寸,也可以自定义间距。",
+ "code": "\n\n\n \n \n \n small\n \n \n middle\n \n \n large\n \n \n customize\n \n \n \n \n \n \n \n Primary\n \n Default\n \n Dashed\n \n \n Link\n \n \n \n"
+ },
+ {
+ "name": "wrap",
+ "title": "wrap",
+ "titleZh": "自动换行",
+ "description": "Auto wrap line.",
+ "descriptionZh": "自动换行。",
+ "code": "\n \n \n Button\n \n \n"
+ },
+ {
+ "name": "combination",
+ "title": "combination",
+ "titleZh": "组合使用",
+ "description": "Nesting can achieve more complex layouts.",
+ "descriptionZh": "嵌套使用,可以实现更复杂的布局。",
+ "code": "\n\n\n \n \n
\n \n \n \n “antd is an enterprise-class UI design language and Vue UI library.”\n \n \n \n Get Start\n \n \n \n \n"
+ }
+ ]
+ },
+ {
+ "name": "FloatButton",
+ "nameZh": "悬浮按钮",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "A button that floats at the top of the page.",
+ "descriptionZh": "悬浮于页面上方的按钮。",
+ "whenToUse": "",
+ "whenToUseZh": "- 用于网站上的全局功能;\n- 无论浏览到何处都可以看见的按钮。",
+ "doc": "---\ncategory: Components\ngroup: General\ntitle: FloatButton\ndescription: A button that floats at the top of the page.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n cols: 2\n---\n\n## When To Use\n\n- For global functionality on the site.\n- Buttons that can be seen wherever you browse.\n\n## Examples\n\n\n Basic\n Type\n Shape\n Content\n FloatButton with tooltip\n FloatButton Group\n Menu mode\n Controlled mode\n placement\n BackTop\n badge\n Custom semantic dom styling\n\n\n## API\n\nCommon props ref:[Common props](/docs/vue/common-props)\n\n### FloatButtonGroup\n\n#### Props {#floatbuttongroup-props}\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| shape | Setting button shape of children | `circle` \\| `square` | `circle` | - |\n| trigger | Which action can trigger menu open/close | `click` \\| `hover` | - | - |\n| open | Whether the menu is visible or not, use it with trigger | boolean | - | - |\n| closeIcon | Customize close button icon | VueNode | `` | - |\n| placement | Customize menu animation placement | `top` \\| `left` \\| `right` \\| `bottom` | `top` | - |\n| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - |\n| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - |\n\n#### Events {#floatbuttongroup-events}\n\n| Event | Description | Type | Version |\n| --- | --- | --- | --- |\n| update:open | Callback executed when active menu is changed, use it with trigger | (open: boolean) => void | - |\n| click | Set the handler to handle `click` event (only work in Menu mode) | (e: MouseEvent) => void | - |\n\n#### Slots {#floatbuttongroup-slots}\n\n| Slot | Description | Type | Version |\n| --- | --- | --- | --- |\n| default | Children buttons content | () => any | - |\n| icon | Icon of trigger button | () => any | - |\n| closeIcon | Customize close button icon | () => any | - |\n\n### FloatButton\n\n#### Props {#floatbutton-props}\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| icon | Set the icon component of button | VueNode | - | - |\n| content | Text and other | VueNode | - | - |\n| ~~description~~ | Please use `content` instead | VueNode | - | - |\n| tooltip | The text shown in the tooltip | VueNode \\| TooltipProps | - | - |\n| type | Setting button type | `default` \\| `primary` | `default` | - |\n| shape | Setting button shape | `circle` \\| `square` | `circle` | - |\n| href | The target of hyperlink | string | - | - |\n| target | Specifies where to display the linked URL | string | - | - |\n| 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` | - |\n| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | [BadgeProps](/components/badge#api) | - | - |\n| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - |\n| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - |\n\n#### Events {#floatbutton-events}\n\n| Event | Description | Type | Version |\n| --- | --- | --- | --- |\n| click | Set the handler to handle `click` event | (e: MouseEvent) => void | - |\n\n#### Slots {#floatbutton-slots}\n\n| Slot | Description | Type | Version |\n| --- | --- | --- | --- |\n| default | Button content | () => any | - |\n| icon | Set the icon component of button | () => any | - |\n| tooltip | The text shown in the tooltip | (props?: TooltipProps) => any | - |\n\n### FloatBackTop {#floatbacktop}\n\n#### Props {#floatbacktop-props}\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| duration | Time to return to top(ms) | number | 450 | - |\n| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | - |\n| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | - |\n| target | Specifies where to display the linked URL | '_self' \\| '_blank' \\| '_parent' \\| '_top' \\| string | - | - |\n| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | FloatButtonBadgeProps & { class?: string } | - | 5.4.0 |\n| 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 |\n| ariaLabel | - | string | - | - |\n| style | - | CSSProperties | - | - |\n| classes | Customize class for each semantic structure inside the component. Supports object or function. | FloatButtonClassNamesType | - | - |\n| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | FloatButtonStylesType | - | - |\n\n#### Events {#floatbacktop-events}\n\n| Event | Description | Type | Version |\n| --- | --- | --- | --- |\n| click | A callback function, which can be executed when you click the button | () => void | - |\n\n## Semantic DOM\n\n### FloatButton\n\n\n\n\n### FloatButtonGroup\n\n\n\nRefer to [Semantic DOM](#semantic-dom) for detailed semantic structure information.\n\n## Design Token\n\n\n\nSee [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.\n",
+ "docZh": "---\ncategory: Components\ngroup: 通用\ntitle: FloatButton\nsubtitle: 悬浮按钮\ndescription: 悬浮于页面上方的按钮。\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n cols: 2\n---\n\n## 何时使用 {#when-to-use}\n\n- 用于网站上的全局功能;\n- 无论浏览到何处都可以看见的按钮。\n\n## 代码演示 {#examples}\n\n\n 基本\n 类型\n 形状\n 描述\n 含有气泡卡片的悬浮按钮\n 浮动按钮组\n 菜单模式\n 受控模式\n 弹出方向\n 回到顶部\n 徽标数\n 自定义语义结构的样式和类\n\n\n## API\n\n通用属性参考:[通用属性](/docs/vue/common-props)\n\n### FloatButtonGroup\n\n#### 属性 {#floatbuttongroup-props}\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| shape | 设置包含的 FloatButton 按钮形状 | `circle` \\| `square` | `circle` | - |\n| trigger | 触发方式(有触发方式为菜单模式) | `click` \\| `hover` | - | - |\n| open | 受控展开,需配合 trigger 一起使用 | boolean | - | - |\n| closeIcon | 自定义关闭按钮 | VueNode | `` | - |\n| placement | 自定义菜单弹出位置 | `top` \\| `left` \\| `right` \\| `bottom` | `top` | - |\n| classes | 用于自定义组件内部各语义化结构的 class,支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - |\n| styles | 用于自定义组件内部各语义化结构的行内 style,支持对象或函数 | Record<[SemanticDOM](#semantic-dom), CSSProperties> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - |\n\n#### 事件 {#floatbuttongroup-events}\n\n| 事件 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| update:open | 展开收起时的回调,需配合 trigger 一起使用 | (open: boolean) => void | - |\n| click | 点击按钮时的回调(仅在菜单模式中有效) | (e: MouseEvent) => void | - |\n\n#### 插槽 {#floatbuttongroup-slots}\n\n| 插槽 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| default | 子按钮内容 | () => any | - |\n| icon | 触发按钮的图标 | () => any | - |\n| closeIcon | 自定义关闭按钮 | () => any | - |\n\n### FloatButton\n\n#### 属性 {#floatbutton-props}\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| icon | 自定义图标 | VueNode | - | - |\n| content | 文字及其它内容 | VueNode | - | - |\n| ~~description~~ | 请使用 `content` 代替 | VueNode | - | - |\n| tooltip | 气泡卡片的内容 | VueNode \\| TooltipProps | - | - |\n| type | 设置按钮类型 | `default` \\| `primary` | `default` | - |\n| shape | 设置按钮形状 | `circle` \\| `square` | `circle` | - |\n| href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | - |\n| target | 相当于 a 标签的 target 属性,href 存在时生效 | string | - | - |\n| htmlType | 设置 `button` 原生的 `type` 值,可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type) | `submit` \\| `reset` \\| `button` | `button` | - |\n| badge | 带徽标数字的悬浮按钮(不支持 `status` 以及相关属性) | [BadgeProps](/components/badge-cn#api) | - | - |\n| classes | 用于自定义组件内部各语义化结构的 class,支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - |\n| styles | 用于自定义组件内部各语义化结构的行内 style,支持对象或函数 | Record<[SemanticDOM](#semantic-dom), CSSProperties> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - |\n\n#### 事件 {#floatbutton-events}\n\n| 事件 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| click | 点击按钮时的回调 | (e: MouseEvent) => void | - |\n\n#### 插槽 {#floatbutton-slots}\n\n| 插槽 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| default | 按钮内容 | () => any | - |\n| icon | 自定义图标 | () => any | - |\n| tooltip | 气泡卡片的内容 | (props?: TooltipProps) => any | - |\n\n### FloatBackTop {#floatbacktop}\n\n#### 属性 {#floatbacktop-props}\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| duration | 回到顶部所需时间(ms) | number | 450 | - |\n| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | - |\n| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | - |\n| target | 相当于 a 标签的 target 属性,href 存在时生效 | '_self' \\| '_blank' \\| '_parent' \\| '_top' \\| string | - | - |\n| badge | 带徽标数字的悬浮按钮(不支持 `status` 以及相关属性) | FloatButtonBadgeProps & { class?: string } | - | 5.4.0 |\n| htmlType | 设置 `button` 原生的 `type` 值,可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type) | ButtonHTMLType | `button` | 5.21.0 |\n| ariaLabel | - | string | - | - |\n| style | - | CSSProperties | - | - |\n| classes | 用于自定义组件内部各语义化结构的 class,支持对象或函数 | FloatButtonClassNamesType | - | - |\n| styles | 用于自定义组件内部各语义化结构的行内 style,支持对象或函数 | FloatButtonStylesType | - | - |\n\n#### 事件 {#floatbacktop-events}\n\n| 事件 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| click | 点击按钮的回调函数 | () => void | - |\n\n\n## 语义化 DOM {#semantic-dom}\n\n### FloatButton\n\n\n\n\n### FloatButtonGroup\n\n\n\n查看 [Semantic DOM](#semantic-dom) 说明以了解语义化结构的详细信息。\n\n\n## 主题变量(Design Token){#design-token}\n\n\n\n查看 [定制主题](/docs/vue/customize-theme) 了解如何使用主题变量。\n",
+ "subComponents": {
+ "FloatButtonGroup-shape": [
+ {
+ "name": "shape",
+ "type": "`circle` \\| `square`",
+ "default": "`circle`",
+ "description": "Setting button shape of children",
+ "descriptionZh": "设置包含的 FloatButton 按钮形状"
+ }
+ ],
+ "FloatButtonGroup-trigger": [
+ {
+ "name": "trigger",
+ "type": "`click` \\| `hover`",
+ "default": "-",
+ "description": "Which action can trigger menu open/close",
+ "descriptionZh": "触发方式(有触发方式为菜单模式)"
+ }
+ ],
+ "FloatButtonGroup-open": [
+ {
+ "name": "open",
+ "type": "boolean",
+ "default": "-",
+ "description": "Whether the menu is visible or not, use it with trigger",
+ "descriptionZh": "受控展开,需配合 trigger 一起使用"
+ }
+ ],
+ "FloatButtonGroup-closeIcon": [
+ {
+ "name": "closeIcon",
+ "type": "VueNode",
+ "default": "``",
+ "description": "Customize close button icon",
+ "descriptionZh": "自定义关闭按钮"
+ }
+ ],
+ "FloatButtonGroup-placement": [
+ {
+ "name": "placement",
+ "type": "`top` \\| `left` \\| `right` \\| `bottom`",
+ "default": "`top`",
+ "description": "Customize menu animation placement",
+ "descriptionZh": "自定义菜单弹出位置"
+ }
+ ],
+ "FloatButtonGroup-classes": [
+ {
+ "name": "classes",
+ "type": "Record<[SemanticDOM](#semantic-dom), string> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string>",
+ "default": "-",
+ "description": "Customize class for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的 class,支持对象或函数"
+ }
+ ],
+ "FloatButtonGroup-styles": [
+ {
+ "name": "styles",
+ "type": "Record<[SemanticDOM](#semantic-dom), CSSProperties> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties>",
+ "default": "-",
+ "description": "Customize inline style for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的行内 style,支持对象或函数"
+ }
+ ],
+ "FloatButtonGroup-update:open": [
+ {
+ "name": "update:open",
+ "type": "(open: boolean) => void",
+ "default": "",
+ "description": "Callback executed when active menu is changed, use it with trigger",
+ "descriptionZh": "展开收起时的回调,需配合 trigger 一起使用"
+ }
+ ],
+ "FloatButtonGroup-click": [
+ {
+ "name": "click",
+ "type": "(e: MouseEvent) => void",
+ "default": "",
+ "description": "Set the handler to handle `click` event (only work in Menu mode)",
+ "descriptionZh": "点击按钮时的回调(仅在菜单模式中有效)"
+ }
+ ],
+ "FloatButton-icon": [
+ {
+ "name": "icon",
+ "type": "VueNode",
+ "default": "-",
+ "description": "Set the icon component of button",
+ "descriptionZh": "自定义图标"
+ }
+ ],
+ "FloatButton-content": [
+ {
+ "name": "content",
+ "type": "VueNode",
+ "default": "-",
+ "description": "Text and other",
+ "descriptionZh": "文字及其它内容"
+ }
+ ],
+ "FloatButton-~~description~~": [
+ {
+ "name": "~~description~~",
+ "type": "VueNode",
+ "default": "-",
+ "description": "Please use `content` instead",
+ "descriptionZh": "请使用 `content` 代替"
+ }
+ ],
+ "FloatButton-tooltip": [
+ {
+ "name": "tooltip",
+ "type": "VueNode \\| TooltipProps",
+ "default": "-",
+ "description": "The text shown in the tooltip",
+ "descriptionZh": "气泡卡片的内容"
+ }
+ ],
+ "FloatButton-type": [
+ {
+ "name": "type",
+ "type": "`default` \\| `primary`",
+ "default": "`default`",
+ "description": "Setting button type",
+ "descriptionZh": "设置按钮类型"
+ }
+ ],
+ "FloatButton-shape": [
+ {
+ "name": "shape",
+ "type": "`circle` \\| `square`",
+ "default": "`circle`",
+ "description": "Setting button shape",
+ "descriptionZh": "设置按钮形状"
+ }
+ ],
+ "FloatButton-href": [
+ {
+ "name": "href",
+ "type": "string",
+ "default": "-",
+ "description": "The target of hyperlink",
+ "descriptionZh": "点击跳转的地址,指定此属性 button 的行为和 a 链接一致"
+ }
+ ],
+ "FloatButton-target": [
+ {
+ "name": "target",
+ "type": "string",
+ "default": "-",
+ "description": "Specifies where to display the linked URL",
+ "descriptionZh": "相当于 a 标签的 target 属性,href 存在时生效"
+ }
+ ],
+ "FloatButton-htmlType": [
+ {
+ "name": "htmlType",
+ "type": "`submit` \\| `reset` \\| `button`",
+ "default": "`button`",
+ "description": "Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type)",
+ "descriptionZh": "设置 `button` 原生的 `type` 值,可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type)"
+ }
+ ],
+ "FloatButton-badge": [
+ {
+ "name": "badge",
+ "type": "[BadgeProps](/components/badge#api)",
+ "default": "-",
+ "description": "Attach Badge to FloatButton. `status` and other props related are not supported.",
+ "descriptionZh": "带徽标数字的悬浮按钮(不支持 `status` 以及相关属性)"
+ }
+ ],
+ "FloatButton-classes": [
+ {
+ "name": "classes",
+ "type": "Record<[SemanticDOM](#semantic-dom), string> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string>",
+ "default": "-",
+ "description": "Customize class for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的 class,支持对象或函数"
+ }
+ ],
+ "FloatButton-styles": [
+ {
+ "name": "styles",
+ "type": "Record<[SemanticDOM](#semantic-dom), CSSProperties> \\| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties>",
+ "default": "-",
+ "description": "Customize inline style for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的行内 style,支持对象或函数"
+ }
+ ],
+ "FloatButton-click": [
+ {
+ "name": "click",
+ "type": "(e: MouseEvent) => void",
+ "default": "",
+ "description": "Set the handler to handle `click` event",
+ "descriptionZh": "点击按钮时的回调"
+ }
+ ],
+ "FloatBackTop-duration": [
+ {
+ "name": "duration",
+ "type": "number",
+ "default": "450",
+ "description": "Time to return to top(ms)",
+ "descriptionZh": "回到顶部所需时间(ms)"
+ }
+ ],
+ "FloatBackTop-target": [
+ {
+ "name": "target",
+ "type": "() => HTMLElement",
+ "default": "() => window",
+ "description": "Specifies the scrollable area dom node",
+ "descriptionZh": "设置需要监听其滚动事件的元素"
+ },
+ {
+ "name": "target",
+ "type": "'_self' \\| '_blank' \\| '_parent' \\| '_top' \\| string",
+ "default": "-",
+ "description": "Specifies where to display the linked URL",
+ "descriptionZh": "相当于 a 标签的 target 属性,href 存在时生效"
+ }
+ ],
+ "FloatBackTop-visibilityHeight": [
+ {
+ "name": "visibilityHeight",
+ "type": "number",
+ "default": "400",
+ "description": "The BackTop button will not show until the scroll height reaches this value",
+ "descriptionZh": "滚动高度达到此参数值才出现 BackTop"
+ }
+ ],
+ "FloatBackTop-badge": [
+ {
+ "name": "badge",
+ "type": "FloatButtonBadgeProps & { class?: string }",
+ "default": "-",
+ "description": "Attach Badge to FloatButton. `status` and other props related are not supported.",
+ "descriptionZh": "带徽标数字的悬浮按钮(不支持 `status` 以及相关属性)"
+ }
+ ],
+ "FloatBackTop-htmlType": [
+ {
+ "name": "htmlType",
+ "type": "ButtonHTMLType",
+ "default": "`button`",
+ "description": "Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type)",
+ "descriptionZh": "设置 `button` 原生的 `type` 值,可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type)"
+ }
+ ],
+ "FloatBackTop-ariaLabel": [
+ {
+ "name": "ariaLabel",
+ "type": "string",
+ "default": "-",
+ "description": "-",
+ "descriptionZh": "-"
+ }
+ ],
+ "FloatBackTop-style": [
+ {
+ "name": "style",
+ "type": "CSSProperties",
+ "default": "-",
+ "description": "-",
+ "descriptionZh": "-"
+ }
+ ],
+ "FloatBackTop-classes": [
+ {
+ "name": "classes",
+ "type": "FloatButtonClassNamesType",
+ "default": "-",
+ "description": "Customize class for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的 class,支持对象或函数"
+ }
+ ],
+ "FloatBackTop-styles": [
+ {
+ "name": "styles",
+ "type": "FloatButtonStylesType",
+ "default": "-",
+ "description": "Customize inline style for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的行内 style,支持对象或函数"
+ }
+ ],
+ "FloatBackTop-click": [
+ {
+ "name": "click",
+ "type": "() => void",
+ "default": "",
+ "description": "A callback function, which can be executed when you click the button",
+ "descriptionZh": "点击按钮的回调函数"
+ }
+ ]
+ },
+ "props": [],
+ "tokens": [],
+ "faq": [],
+ "demos": [
+ {
+ "name": "basic",
+ "title": "Basic",
+ "titleZh": "基本",
+ "description": "The most basic usage.",
+ "descriptionZh": "最简单的用法。",
+ "code": "\n console.log('onClick')\" />\n"
+ },
+ {
+ "name": "type",
+ "title": "Type",
+ "titleZh": "类型",
+ "description": "Change the type of the FloatButton with the `type` property.",
+ "descriptionZh": "通过 `type` 改变悬浮按钮的类型。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "shape",
+ "title": "Shape",
+ "titleZh": "形状",
+ "description": "Change the shape of the FloatButton with the `shape` property.",
+ "descriptionZh": "通过 `shape` 设置不同的形状。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "content",
+ "title": "Content",
+ "titleZh": "描述",
+ "description": "Setting the `content` property allows you to show a FloatButton with a description.\n\n> supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.",
+ "descriptionZh": "可以通过 `content` 设置文字内容。\n\n> 仅当 `shape` 属性为 `square` 时支持。由于空间较小,推荐使用比较精简的双数文字。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "tooltip",
+ "title": "FloatButton with tooltip",
+ "titleZh": "含有气泡卡片的悬浮按钮",
+ "description": "Setting the `tooltip` property shows the FloatButton with a tooltip.",
+ "descriptionZh": "设置 tooltip 属性,即可开启气泡卡片。",
+ "code": "\n \n \n \n Documents
\n \n \n"
+ },
+ {
+ "name": "group",
+ "title": "FloatButton Group",
+ "titleZh": "浮动按钮组",
+ "description": "When multiple buttons are used together, `` 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.",
+ "descriptionZh": "按钮组合使用时,推荐使用 ``,并通过设置 `shape` 属性改变悬浮按钮组的形状。悬浮按钮组的 `shape` 会覆盖内部 FloatButton 的 `shape` 属性。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "group-menu",
+ "title": "Menu mode",
+ "titleZh": "菜单模式",
+ "description": "Open menu mode with `trigger`, which could be `hover` or `click`.",
+ "descriptionZh": "设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "controlled",
+ "title": "Controlled mode",
+ "titleZh": "受控模式",
+ "description": "Set the component to controlled mode through `open`, which need to be used together with `trigger`.",
+ "descriptionZh": "通过 `open` 设置组件为受控模式,需要配合 `trigger` 一起使用。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "placement",
+ "title": "placement",
+ "titleZh": "弹出方向",
+ "description": "Customize animation placement, providing four preset placement: `top`, `right`, `bottom`, `left`, the `top` position by default.",
+ "descriptionZh": "自定义弹出位置,提供了四个预设值:`top`、`right`、`bottom`、`left`,默认值为 `top`。",
+ "code": "\n\n\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n"
+ },
+ {
+ "name": "back-top",
+ "title": "BackTop",
+ "titleZh": "回到顶部",
+ "description": "`BackTop` makes it easy to go back to the top of the page.",
+ "descriptionZh": "返回页面顶部的操作按钮。",
+ "code": "\n \n
Scroll to bottom
\n
Scroll to bottom
\n
Scroll to bottom
\n
Scroll to bottom
\n
Scroll to bottom
\n
Scroll to bottom
\n
Scroll to bottom
\n
\n
\n"
+ },
+ {
+ "name": "badge",
+ "title": "badge",
+ "titleZh": "徽标数",
+ "description": "FloatButton with Badge.",
+ "descriptionZh": "右上角附带圆形徽标数字的悬浮按钮。",
+ "code": "\n\n\n \n \n \n \n Custom badge color
\n \n \n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "style-class",
+ "title": "Custom semantic dom styling",
+ "titleZh": "自定义语义结构的样式和类",
+ "description": "You can customize the [semantic dom](#semantic-dom) style of FloatButton by passing objects/functions through `classes` and `styles`.",
+ "descriptionZh": "通过 `classes` 和 `styles` 传入对象/函数可以自定义 FloatButton 的[语义化结构](#semantic-dom)样式。",
+ "code": "\n\n\n \n \n \n custom style class
\n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "_semantic",
+ "title": "",
+ "titleZh": "",
+ "description": "",
+ "descriptionZh": "",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "_semantic_group",
+ "title": "",
+ "titleZh": "",
+ "description": "",
+ "descriptionZh": "",
+ "code": "\n\n\n \n \n \n \n \n"
+ }
+ ]
+ },
+ {
+ "name": "Form",
+ "nameZh": "表单",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "High-performance form component with data domain management. Includes data entry, validation, and corresponding styles.",
+ "descriptionZh": "高性能表单控件,自带数据域管理。包含数据录入、校验以及对应样式。",
+ "whenToUse": "- When you need to create an instance or collect information.\n- When you need to validate fields in certain rules.",
+ "whenToUseZh": "- 需要创建实例或收集信息时。\n- 需要对字段进行规则校验时。",
+ "doc": "---\ncategory: Components\ngroup: Data Entry\ntitle: Form\ndescription: High-performance form component with data domain management. Includes data entry, validation, and corresponding styles.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original\n---\n\n## When To Use {#when-to-use}\n\n- When you need to create an instance or collect information.\n- When you need to validate fields in certain rules.\n\n## Examples {#examples}\n\n\n Basic Usage\n Form methods\n Form Layout\n Form mix layout\n Form disabled\n Form variants\n Required style\n Form size\n label can wrap\n No block rule\n Watch Hooks\n Validate Trigger\n Validate Only\n Path Prefix\n Dynamic Form Item\n Dynamic Form nest Items\n Complex Dynamic Form Item\n Nest\n complex form control\n Customized Form Controls\n Store Form Data into Upper Component\n Control between forms\n Inline Login Form\n Login Form\n Registration\n Advanced search\n Form in Modal to Create\n Time-related Controls\n Handle Form Data Manually\n Customized Validation\n Dynamic Rules\n Dependencies\n getValueProps + normalize\n Slide to error field\n Other Form Controls\n Custom semantic dom styling\n\n\n## API\n\nCommon props ref:[Common props](/docs/vue/common-props)\n\n### Form\n\n### Props {#form-props}\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| classes | Customize class for each semantic structure inside the component. Supports object or function. | FormClassNamesType | - | - |\n| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | FormStylesType | - | - |\n| colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | - |\n| name | Form name. Will be the prefix of Field `id` | string | - | - |\n| layout | Form layout | FormLayout | `horizontal` | - |\n| labelAlign | The text align of label of all items | FormLabelAlign | `right` | - |\n| labelWrap | whether label can be wrap | boolean | false | - |\n| labelCol | Label layout, like `Col` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | ColProps | - | - |\n| wrapperCol | The layout for input controls, same as `labelCol` | ColProps | - | - |\n| feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | FeedbackIcons | - | - |\n| size | Set field component size (antd components only) | SizeType | - | - |\n| disabled | Set form component disable, only available for antd components | boolean | false | - |\n| scrollToFirstError | Auto scroll to first failed field when submit | ScrollFocusOptions \\| boolean | false | - |\n| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | RequiredMark | true | - |\n| variant | Variant of components inside form | Variant | `outlined` | - |\n| validateMessages | Validation prompt template, description [see below](#validatemessages) | ValidateMessages | - | - |\n| model | Form model | Record<string, any> | - | - |\n| rules | Form rules | Record<string, Rule[]> | - | - |\n| validateTrigger | Config field validate trigger. When set to `false`, all interaction-driven validation is disabled even if a rule declares `trigger` or `validateTrigger`; `validateFields` and submit validation still run | string \\| string[] \\| false | `change` | - |\n| preserve | Keep field value even when field removed. You can get the preserve field value by `getFieldsValue(true)` | boolean | true | - |\n| clearOnDestroy | Clear form values when the form is uninstalled | boolean | false | - |\n| validateOnRuleChange | Automatically revalidates the form when `Form.rules` changes | boolean | false | - |\n| rootClass | Root container class | string | - | - |\n| prefixCls | Prefix class name | string | - | - |\n\n### Events {#form-events}\n\nVue event names omit the React `on` prefix. For example, React `onValuesChange` maps to Vue `@valuesChange`.\n\n| Event | Description | Type | Version |\n| --- | --- | --- | --- |\n| finish | Trigger after submitting the form and verifying data successfully | (values: Record<string, any>) => void | - |\n| finishFailed | Trigger after submitting the form and verifying data failed | (errorInfo: ValidateErrorEntity) => void | - |\n| submit | Triggered on native form submit before internal validation starts | (e: Event) => void | - |\n| reset | Triggered on native form reset | (e: Event) => void | - |\n| validate | Triggered when a single field finishes validation. Returns the field path, pass status, and error messages | (name: InternalNamePath, status: boolean, errors: any[] \\| null) => void | - |\n| valuesChange | Trigger when value updated | (changedValues: Record<string, any>, values: Record<string, any>) => void | - |\n| fieldsChange | Trigger when field updated | (changedFields: FieldData[], allFields: FieldData[]) => void | - |\n\n### Methods {#form-methods}\n\n```ts\nimport { FormInstance } from 'antdv-next'\n\nconst formRef = ref()\n```\n\n| Method | Description | Type | Version |\n| --- | --- | --- | --- |\n| getFieldValue | Get the value of a single field | (name: NamePath) => StoreValue | - |\n| getFieldsValue | Get values of a group of fields. Pass `true` to return values of all currently collected fields | (nameList?: NamePath[] \\| true) => Record<string, any> | - |\n| getFieldError | Get error messages of a single field | (name: NamePath) => string[] | - |\n| getFieldsError | Get field error info list, including `errors` and `warnings` | (nameList?: NamePath[]) => FieldError[] | - |\n| getFieldWarning | Get warning messages of a single field | (name: NamePath) => string[] | - |\n| isFieldsTouched | Check whether fields have been operated on. When `allFieldsTouched` is `true`, all fields must be touched | (nameList?: NamePath[] \\| boolean, allFieldsTouched?: boolean) => boolean | - |\n| isFieldTouched | Check whether a single field has been operated on | (name: NamePath) => boolean | - |\n| isFieldsValidating | Check whether fields are validating | (nameList?: NamePath[]) => boolean | - |\n| isFieldValidating | Check whether a single field is validating | (name: NamePath) => boolean | - |\n| resetFields | Reset field values, status, and validation results. Resets all fields when omitted | (nameList?: NamePath[]) => void | - |\n| clearValidate | Clear validation results without changing field values | (nameList?: NamePath[]) => void | - |\n| setFields | Set field state and values directly. Useful for writing `errors`, `warnings`, `touched`, and similar meta manually | (data: FieldData[]) => void | - |\n| setFieldValue | Set the value of a single field | (name: NamePath, value: any) => void | - |\n| setFieldsValue | Set values of multiple fields in batch | (values: Record<string, any>) => void | - |\n| validateFields | Validate fields and return the corresponding field values | (nameList?: NamePath[], options?: ValidateOptions) => Promise<Record<string, any>> | - |\n| validate | Alias of `validateFields()` for validating the whole form | () => Promise<Record<string, any>> | - |\n| submit | Submit the form. Equivalent to triggering form `submit` | () => void | - |\n| nativeElement | Root `form` element | HTMLFormElement \\| undefined | - |\n| scrollToField | Scroll to the specified field. By default it will also try to focus the field | (name: NamePath, options?: ScrollFocusOptions \\| boolean) => void | - |\n| focusField | Focus the DOM element of the specified field | (name: NamePath) => void | - |\n| getFieldInstance | Get the registered field instance | (name: NamePath) => any | - |\n\n### FormItem {#form-item}\n\n#### Props {#form-item-props}\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| name | Field name | NamePath | - | - |\n| label | Label text | VueNode | - | - |\n| labelAlign | The text align of label | FormLabelAlign | `right` | - |\n| labelCol | The layout of label. If both Form and Form.Item exists, use Item first | ColProps | - | - |\n| wrapperCol | The layout for input controls, same as `labelCol` | ColProps | - | - |\n| colon | Used with `label`, whether to display `:` after label text | boolean | true | - |\n| extra | The extra prompt message | VueNode | - | - |\n| help | The prompt message. If not provided, the prompt message will be generated by the validation rule | VueNode | - | - |\n| hasFeedback | Display validation status icon | boolean \\| \\{ icons: FeedbackIcons \\} | false | - |\n| validateStatus | The validation status | ValidateStatus | - | - |\n| required | Display required style. It will be generated by the validation rule | boolean | false | - |\n| rules | Rules for field validation | Rule[] | - | - |\n| validateTrigger | When to validate the value of children node. When set to `false`, all interaction-driven validation for the field is disabled even if a rule declares `trigger` or `validateTrigger`; explicit `validateFields` and submit validation still run | string \\| string[] \\| false | `change` | - |\n| validateDebounce | Delay milliseconds to start validation | number | - | - |\n| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \\| `parallel` | false | - |\n| noStyle | No style for `true`, used as a pure field control | boolean | false | - |\n| id | Set sub label `htmlFor` | string | - | - |\n| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | - |\n| messageVariables | The default validate field info | Record<string, string> | - | - |\n| tooltip | Config tooltip info | VueNode \\| TooltipProps & \\{ icon: VueNode \\} | - | - |\n| layout | Form item layout | `horizontal` \\| `vertical` | - | - |\n| rootClass | Root container class | string | - | - |\n| prefixCls | Prefix class name | string | - | - |\n\n#### Slots {#form-item-slots}\n\n| Slot | Description | Type | Version |\n| --- | --- | --- | --- |\n| default | Form control content | () => any | - |\n| label | Custom label content (higher priority than `label` prop) | () => any | - |\n| tooltip | Custom label tooltip content. The slot arg is the current `tooltip` config; when `tooltip` is an options object, returning an object from slot will be merged into it | (tooltip?: VueNode \\| TooltipProps & { icon: VueNode }) => any | - |\n| extra | Custom extra message (higher priority than `extra` prop) | () => any | - |\n| help | Custom help/error message (higher priority than `help` prop) | () => any | - |\n\n## Types\n\n### Rule {#rule}\n\n`rules` can be declared on `Form` for multiple fields or on `Form.Item` for a single field. The main supported types are:\n\n```ts\ntype RuleType =\n | 'string'\n | 'number'\n | 'boolean'\n | 'method'\n | 'regexp'\n | 'integer'\n | 'float'\n | 'object'\n | 'enum'\n | 'date'\n | 'url'\n | 'hex'\n | 'email'\n | 'tel'\n\ntype TriggerType = 'change' | 'blur' | 'focus'\n\ntype Validator = (\n rule: RuleObject,\n value: any,\n callback: (error?: string) => void,\n) => Promise | void\n\ninterface RuleObject {\n warningOnly?: boolean\n enum?: any[]\n len?: number\n max?: number\n message?: string | Component\n min?: number\n pattern?: RegExp\n required?: boolean\n transform?: (value: any) => any\n type?: RuleType | 'array'\n whitespace?: boolean\n trigger?: TriggerType | TriggerType[]\n validateTrigger?: TriggerType | TriggerType[]\n validator?: Validator\n defaultField?: RuleObject\n}\n\ntype RuleRender = (form: FormInstance) => RuleObject\ntype Rule = RuleObject | RuleRender\n```\n\nNotes:\n\n- `Form.rules` is typed as `Record`\n- `Form.Item.rules` is typed as `Rule[]`\n- `validateTrigger` has higher priority than `trigger`\n- When `type: 'array'` is used, `defaultField` can define rules for array items\n\n### validateMessages\n\nForm provides default validation error messages. You can modify the template by configuring `validateMessages` property:\n\n```ts\nconst validateMessages = {\n required: '\\'${name}\\' is required!',\n}\n```\n\n```vue\n\n \n ...\n \n\n```\n\nConfigProvider also provides a global configuration scheme that allows for uniform configuration error notification templates.\n\n```vue\n\n \n \n \n\n```\n\n> Note: Vue version does not provide `Form.List`. You can use `v-for` with reactive arrays to build dynamic form items.\n\n## Semantic DOM {#semantic-dom}\n\n\n\n\n## Design Token {#design-token}\n\n\n\nSee [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.\n",
+ "docZh": "---\ncategory: Components\ngroup: 数据录入\ntitle: Form\nsubtitle: 表单\ndescription: 高性能表单控件,自带数据域管理。包含数据录入、校验以及对应样式。\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original\n---\n\n## 何时使用 {#when-to-use}\n\n- 需要创建实例或收集信息时。\n- 需要对字段进行规则校验时。\n\n## 示例 {#examples}\n\n\n 基础用法\n 表单方法\n 表单布局\n 混合布局\n 禁用表单\n 表单变体\n 必选样式\n 表单尺寸\n label 换行\n 非阻塞规则\n 监听字段\n 校验触发时机\n 仅校验\n 路径前缀\n 动态表单项\n 动态嵌套表单项\n 复杂动态表单项\n 嵌套字段\n 复杂表单控件\n 自定义表单控件\n 外层状态联动\n 多表单协作\n 内联登录\n 登录表单\n 注册表单\n 高级搜索\n 弹窗表单\n 时间相关控件\n 手动处理表单数据\n 自定义校验展示\n 动态规则\n 字段依赖\n 值转换\n 滑动到错误字段\n 其他表单控件\n 自定义语义结构样式\n\n\n## API\n\n通用属性参考:[通用属性](/docs/vue/common-props)\n\n### Form\n\n### 属性 {#form-props}\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| classes | 用于自定义组件内部各语义化结构的 class,支持对象或函数 | FormClassNamesType | - | - |\n| styles | 用于自定义组件内部各语义化结构的行内 style,支持对象或函数 | FormStylesType | - | - |\n| colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true | - |\n| name | 表单名称,会作为表单字段 `id` 前缀使用 | string | - | - |\n| layout | 表单布局 | FormLayout | `horizontal` | - |\n| labelAlign | label 标签的文本对齐方式 | FormLabelAlign | `right` | - |\n| labelWrap | label 标签的文本换行方式 | boolean | false | - |\n| labelCol | label 标签布局,同 `Col` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | ColProps | - | - |\n| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | ColProps | - | - |\n| feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | FeedbackIcons | - | - |\n| size | 设置字段组件的尺寸(仅限 antd 组件) | SizeType | - | - |\n| disabled | 设置表单组件禁用,仅对 antd 组件有效 | boolean | false | - |\n| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | ScrollFocusOptions \\| boolean | false | - |\n| requiredMark | 必选样式,可以切换为必选或者可选展示样式。此为 Form 配置,Form.Item 无法单独配置 | RequiredMark | true | - |\n| variant | 表单内控件变体 | Variant | `outlined` | - |\n| validateMessages | 验证提示模板,说明[见下](#validatemessages) | ValidateMessages | - | - |\n| model | 表单数据 | Record<string, any> | - | - |\n| rules | 表单规则 | Record<string, Rule[]> | - | - |\n| validateTrigger | 统一设置字段触发验证的时机。设为 `false` 时禁用所有交互事件触发的校验,即使规则单独声明了 `trigger` 或 `validateTrigger`;`validateFields` 和提交校验仍会执行 | string \\| string[] \\| false | `change` | - |\n| preserve | 当字段被删除时保留字段值。你可以通过 `getFieldsValue(true)` 来获取保留字段值 | boolean | true | - |\n| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | - |\n| validateOnRuleChange | 当 `Form.rules` 发生变化时,自动重新触发表单校验 | boolean | false | - |\n| rootClass | 根容器类名 | string | - | - |\n| prefixCls | 组件前缀类名 | string | - | - |\n\n### 事件 {#form-events}\n\nVue 版本事件名省略 React 版本的 `on` 前缀,例如 React 的 `onValuesChange` 对应 Vue 的 `@valuesChange`。\n\n| 事件 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| finish | 提交表单且数据验证成功后回调事件 | (values: Record<string, any>) => void | - |\n| finishFailed | 提交表单且数据验证失败后回调事件 | (errorInfo: ValidateErrorEntity) => void | - |\n| submit | 原生表单提交时触发,在内部校验开始前执行 | (e: Event) => void | - |\n| reset | 原生表单重置时触发 | (e: Event) => void | - |\n| validate | 单个字段校验完成时触发,返回字段路径、是否通过以及错误信息 | (name: InternalNamePath, status: boolean, errors: any[] \\| null) => void | - |\n| valuesChange | 字段值更新时触发回调事件 | (changedValues: Record<string, any>, values: Record<string, any>) => void | - |\n| fieldsChange | 字段更新时触发回调事件 | (changedFields: FieldData[], allFields: FieldData[]) => void | - |\n\n### 方法 {#form-methods}\n\n```ts\nimport { FormInstance } from 'antdv-next'\n\nconst formRef = ref()\n```\n\n| 方法 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| getFieldValue | 获取单个字段值 | (name: NamePath) => StoreValue | - |\n| getFieldsValue | 获取一组字段值;传 `true` 时返回当前已收集字段的值 | (nameList?: NamePath[] \\| true) => Record<string, any> | - |\n| getFieldError | 获取单个字段的错误信息 | (name: NamePath) => string[] | - |\n| getFieldsError | 获取字段错误信息列表,包含 `errors` 和 `warnings` | (nameList?: NamePath[]) => FieldError[] | - |\n| getFieldWarning | 获取单个字段的警告信息 | (name: NamePath) => string[] | - |\n| isFieldsTouched | 检查字段是否已被操作;当 `allFieldsTouched` 为 `true` 时要求全部字段都已被操作 | (nameList?: NamePath[] \\| boolean, allFieldsTouched?: boolean) => boolean | - |\n| isFieldTouched | 检查单个字段是否已被操作 | (name: NamePath) => boolean | - |\n| isFieldsValidating | 检查字段是否处于校验中 | (nameList?: NamePath[]) => boolean | - |\n| isFieldValidating | 检查单个字段是否处于校验中 | (name: NamePath) => boolean | - |\n| resetFields | 重置字段值、状态和校验结果;不传时重置全部字段 | (nameList?: NamePath[]) => void | - |\n| clearValidate | 清空字段校验结果,不修改字段值 | (nameList?: NamePath[]) => void | - |\n| setFields | 直接设置字段状态和字段值,可手动写入 `errors`、`warnings`、`touched` 等 | (data: FieldData[]) => void | - |\n| setFieldValue | 设置单个字段值 | (name: NamePath, value: any) => void | - |\n| setFieldsValue | 批量设置多个字段值 | (values: Record<string, any>) => void | - |\n| validateFields | 触发字段校验并返回对应字段值 | (nameList?: NamePath[], options?: ValidateOptions) => Promise<Record<string, any>> | - |\n| validate | `validateFields()` 的别名,用于校验整个表单 | () => Promise<Record<string, any>> | - |\n| submit | 提交表单,效果等同于触发表单 `submit` | () => void | - |\n| nativeElement | 表单根 `form` 元素 | HTMLFormElement \\| undefined | - |\n| scrollToField | 滚动到指定字段位置,默认会尝试聚焦该字段 | (name: NamePath, options?: ScrollFocusOptions \\| boolean) => void | - |\n| focusField | 聚焦指定字段对应的 DOM 元素 | (name: NamePath) => void | - |\n| getFieldInstance | 获取已注册字段实例 | (name: NamePath) => any | - |\n\n### FormItem {#form-item}\n\n#### 属性 {#form-item-props}\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| name | 字段名 | NamePath | - | - |\n| label | 标签文本 | VueNode | - | - |\n| labelAlign | label 标签的文本对齐方式 | FormLabelAlign | `right` | - |\n| labelCol | label 标签布局,同 `Col` 组件 | ColProps | - | - |\n| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | ColProps | - | - |\n| colon | 配合 `label` 使用,是否显示 `:` | boolean | true | - |\n| extra | 额外提示信息 | VueNode | - | - |\n| help | 提示信息,不配置则按校验规则生成 | VueNode | - | - |\n| hasFeedback | 配合 `validateStatus` 展示状态图标 | boolean \\| \\{ icons: FeedbackIcons \\} | false | - |\n| validateStatus | 校验状态 | ValidateStatus | - | - |\n| required | 是否显示必选样式 | boolean | false | - |\n| rules | 校验规则 | Rule[] | - | - |\n| validateTrigger | 触发校验的时机。设为 `false` 时禁用当前字段的所有交互事件校验,即使规则单独声明了 `trigger` 或 `validateTrigger`;显式调用 `validateFields` 或提交时仍会校验 | string \\| string[] \\| false | `change` | - |\n| validateDebounce | 延迟校验时间(毫秒) | number | - | - |\n| validateFirst | 是否在第一个规则失败后停止 | boolean \\| `parallel` | false | - |\n| noStyle | 为 `true` 时不带样式,仅作为字段控制 | boolean | false | - |\n| id | 设置 `label` 的 `htmlFor` | string | - | - |\n| hidden | 是否隐藏 Form.Item(依然收集与校验) | boolean | false | - |\n| messageVariables | 校验文案变量 | Record<string, string> | - | - |\n| tooltip | 配置提示信息 | VueNode \\| TooltipProps & \\{ icon: VueNode \\} | - | - |\n| layout | 表单项布局 | `horizontal` \\| `vertical` | - | - |\n| rootClass | 根容器类名 | string | - | - |\n| prefixCls | 组件前缀类名 | string | - | - |\n\n#### 插槽 {#form-item-slots}\n\n| 插槽 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| default | 表单控件内容 | () => any | - |\n| label | 自定义标签内容(优先于 `label` 属性) | () => any | - |\n| tooltip | 自定义标签提示内容。插槽参数为当前 `tooltip` 配置;当 `tooltip` 为对象配置时,插槽返回对象会与原配置合并 | (tooltip?: VueNode \\| TooltipProps & { icon: VueNode }) => any | - |\n| extra | 自定义额外提示信息(优先于 `extra` 属性) | () => any | - |\n| help | 自定义帮助/错误提示(优先于 `help` 属性) | () => any | - |\n\n### 类型\n\n#### Rule {#rule}\n\n`rules` 支持在 `Form` 上按字段批量声明,也支持在 `Form.Item` 上为单个字段声明。当前实现的主要类型如下:\n\n```ts\ntype RuleType =\n | 'string'\n | 'number'\n | 'boolean'\n | 'method'\n | 'regexp'\n | 'integer'\n | 'float'\n | 'object'\n | 'enum'\n | 'date'\n | 'url'\n | 'hex'\n | 'email'\n | 'tel'\n\ntype TriggerType = 'change' | 'blur' | 'focus'\n\ntype Validator = (\n rule: RuleObject,\n value: any,\n callback: (error?: string) => void,\n) => Promise | void\n\ninterface RuleObject {\n warningOnly?: boolean\n enum?: any[]\n len?: number\n max?: number\n message?: string | Component\n min?: number\n pattern?: RegExp\n required?: boolean\n transform?: (value: any) => any\n type?: RuleType | 'array'\n whitespace?: boolean\n trigger?: TriggerType | TriggerType[]\n validateTrigger?: TriggerType | TriggerType[]\n validator?: Validator\n defaultField?: RuleObject\n}\n\ntype RuleRender = (form: FormInstance) => RuleObject\ntype Rule = RuleObject | RuleRender\n```\n\n说明:\n\n- `Form.rules` 的类型为 `Record`\n- `Form.Item.rules` 的类型为 `Rule[]`\n- `validateTrigger` 优先级高于 `trigger`\n- `type: 'array'` 时可通过 `defaultField` 为数组元素继续声明规则\n\n#### validateMessages {#validatemessages}\n\nForm 提供默认校验提示文案,你可以通过 `validateMessages` 自定义模板:\n\n```ts\nconst validateMessages = {\n required: '\\'${name}\\' is required!',\n}\n```\n\n```vue\n\n \n ...\n \n\n```\n\nConfigProvider 也支持统一配置校验文案:\n\n```vue\n\n \n \n \n\n```\n\n> 注意:Vue 版本没有 `Form.List`,可以使用 `v-for` + 响应式数组实现动态表单项。\n\n## 语义化 DOM {#semantic-dom}\n\n\n\n\n## 主题变量(Design Token){#design-token}\n\n\n\n查看 [定制主题](/docs/vue/customize-theme) 了解如何使用主题变量。\n",
+ "subComponents": {
+ "FormItem-name": [
+ {
+ "name": "name",
+ "type": "NamePath",
+ "default": "-",
+ "description": "Field name",
+ "descriptionZh": "字段名"
+ }
+ ],
+ "FormItem-label": [
+ {
+ "name": "label",
+ "type": "VueNode",
+ "default": "-",
+ "description": "Label text",
+ "descriptionZh": "标签文本"
+ }
+ ],
+ "FormItem-labelAlign": [
+ {
+ "name": "labelAlign",
+ "type": "FormLabelAlign",
+ "default": "`right`",
+ "description": "The text align of label",
+ "descriptionZh": "label 标签的文本对齐方式"
+ }
+ ],
+ "FormItem-labelCol": [
+ {
+ "name": "labelCol",
+ "type": "ColProps",
+ "default": "-",
+ "description": "The layout of label. If both Form and Form.Item exists, use Item first",
+ "descriptionZh": "label 标签布局,同 `Col` 组件"
+ }
+ ],
+ "FormItem-wrapperCol": [
+ {
+ "name": "wrapperCol",
+ "type": "ColProps",
+ "default": "-",
+ "description": "The layout for input controls, same as `labelCol`",
+ "descriptionZh": "需要为输入控件设置布局样式时,使用该属性,用法同 labelCol"
+ }
+ ],
+ "FormItem-colon": [
+ {
+ "name": "colon",
+ "type": "boolean",
+ "default": "true",
+ "description": "Used with `label`, whether to display `:` after label text",
+ "descriptionZh": "配合 `label` 使用,是否显示 `:`"
+ }
+ ],
+ "FormItem-extra": [
+ {
+ "name": "extra",
+ "type": "VueNode",
+ "default": "-",
+ "description": "The extra prompt message",
+ "descriptionZh": "额外提示信息"
+ }
+ ],
+ "FormItem-help": [
+ {
+ "name": "help",
+ "type": "VueNode",
+ "default": "-",
+ "description": "The prompt message. If not provided, the prompt message will be generated by the validation rule",
+ "descriptionZh": "提示信息,不配置则按校验规则生成"
+ }
+ ],
+ "FormItem-hasFeedback": [
+ {
+ "name": "hasFeedback",
+ "type": "boolean \\| \\{ icons: FeedbackIcons \\}",
+ "default": "false",
+ "description": "Display validation status icon",
+ "descriptionZh": "配合 `validateStatus` 展示状态图标"
+ }
+ ],
+ "FormItem-validateStatus": [
+ {
+ "name": "validateStatus",
+ "type": "ValidateStatus",
+ "default": "-",
+ "description": "The validation status",
+ "descriptionZh": "校验状态"
+ }
+ ],
+ "FormItem-required": [
+ {
+ "name": "required",
+ "type": "boolean",
+ "default": "false",
+ "description": "Display required style. It will be generated by the validation rule",
+ "descriptionZh": "是否显示必选样式"
+ }
+ ],
+ "FormItem-rules": [
+ {
+ "name": "rules",
+ "type": "Rule[]",
+ "default": "-",
+ "description": "Rules for field validation",
+ "descriptionZh": "校验规则"
+ }
+ ],
+ "FormItem-validateTrigger": [
+ {
+ "name": "validateTrigger",
+ "type": "string \\| string[] \\| false",
+ "default": "`change`",
+ "description": "When to validate the value of children node. When set to `false`, all interaction-driven validation for the field is disabled even if a rule declares `trigger` or `validateTrigger`; explicit `validateFields` and submit validation still run",
+ "descriptionZh": "触发校验的时机。设为 `false` 时禁用当前字段的所有交互事件校验,即使规则单独声明了 `trigger` 或 `validateTrigger`;显式调用 `validateFields` 或提交时仍会校验"
+ }
+ ],
+ "FormItem-validateDebounce": [
+ {
+ "name": "validateDebounce",
+ "type": "number",
+ "default": "-",
+ "description": "Delay milliseconds to start validation",
+ "descriptionZh": "延迟校验时间(毫秒)"
+ }
+ ],
+ "FormItem-validateFirst": [
+ {
+ "name": "validateFirst",
+ "type": "boolean \\| `parallel`",
+ "default": "false",
+ "description": "Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured",
+ "descriptionZh": "是否在第一个规则失败后停止"
+ }
+ ],
+ "FormItem-noStyle": [
+ {
+ "name": "noStyle",
+ "type": "boolean",
+ "default": "false",
+ "description": "No style for `true`, used as a pure field control",
+ "descriptionZh": "为 `true` 时不带样式,仅作为字段控制"
+ }
+ ],
+ "FormItem-id": [
+ {
+ "name": "id",
+ "type": "string",
+ "default": "-",
+ "description": "Set sub label `htmlFor`",
+ "descriptionZh": "设置 `label` 的 `htmlFor`"
+ }
+ ],
+ "FormItem-hidden": [
+ {
+ "name": "hidden",
+ "type": "boolean",
+ "default": "false",
+ "description": "Whether to hide Form.Item (still collect and validate value)",
+ "descriptionZh": "是否隐藏 Form.Item(依然收集与校验)"
+ }
+ ],
+ "FormItem-messageVariables": [
+ {
+ "name": "messageVariables",
+ "type": "Record<string, string>",
+ "default": "-",
+ "description": "The default validate field info",
+ "descriptionZh": "校验文案变量"
+ }
+ ],
+ "FormItem-tooltip": [
+ {
+ "name": "tooltip",
+ "type": "VueNode \\| TooltipProps & \\{ icon: VueNode \\}",
+ "default": "-",
+ "description": "Config tooltip info",
+ "descriptionZh": "配置提示信息"
+ }
+ ],
+ "FormItem-layout": [
+ {
+ "name": "layout",
+ "type": "`horizontal` \\| `vertical`",
+ "default": "-",
+ "description": "Form item layout",
+ "descriptionZh": "表单项布局"
+ }
+ ],
+ "FormItem-rootClass": [
+ {
+ "name": "rootClass",
+ "type": "string",
+ "default": "-",
+ "description": "Root container class",
+ "descriptionZh": "根容器类名"
+ }
+ ],
+ "FormItem-prefixCls": [
+ {
+ "name": "prefixCls",
+ "type": "string",
+ "default": "-",
+ "description": "Prefix class name",
+ "descriptionZh": "组件前缀类名"
+ }
+ ]
+ },
+ "props": [
+ {
+ "name": "classes",
+ "type": "FormClassNamesType",
+ "default": "-",
+ "description": "Customize class for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的 class,支持对象或函数"
+ },
+ {
+ "name": "styles",
+ "type": "FormStylesType",
+ "default": "-",
+ "description": "Customize inline style for each semantic structure inside the component. Supports object or function.",
+ "descriptionZh": "用于自定义组件内部各语义化结构的行内 style,支持对象或函数"
+ },
+ {
+ "name": "colon",
+ "type": "boolean",
+ "default": "true",
+ "description": "Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal)",
+ "descriptionZh": "配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效)"
+ },
+ {
+ "name": "name",
+ "type": "string",
+ "default": "-",
+ "description": "Form name. Will be the prefix of Field `id`",
+ "descriptionZh": "表单名称,会作为表单字段 `id` 前缀使用"
+ },
+ {
+ "name": "layout",
+ "type": "FormLayout",
+ "default": "`horizontal`",
+ "description": "Form layout",
+ "descriptionZh": "表单布局"
+ },
+ {
+ "name": "labelAlign",
+ "type": "FormLabelAlign",
+ "default": "`right`",
+ "description": "The text align of label of all items",
+ "descriptionZh": "label 标签的文本对齐方式"
+ },
+ {
+ "name": "labelWrap",
+ "type": "boolean",
+ "default": "false",
+ "description": "whether label can be wrap",
+ "descriptionZh": "label 标签的文本换行方式"
+ },
+ {
+ "name": "labelCol",
+ "type": "ColProps",
+ "default": "-",
+ "description": "Label layout, like `Col` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}`",
+ "descriptionZh": "label 标签布局,同 `Col` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`"
+ },
+ {
+ "name": "wrapperCol",
+ "type": "ColProps",
+ "default": "-",
+ "description": "The layout for input controls, same as `labelCol`",
+ "descriptionZh": "需要为输入控件设置布局样式时,使用该属性,用法同 labelCol"
+ },
+ {
+ "name": "feedbackIcons",
+ "type": "FeedbackIcons",
+ "default": "-",
+ "description": "Can be passed custom icons while `Form.Item` element has `hasFeedback`",
+ "descriptionZh": "当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标"
+ },
+ {
+ "name": "size",
+ "type": "SizeType",
+ "default": "-",
+ "description": "Set field component size (antd components only)",
+ "descriptionZh": "设置字段组件的尺寸(仅限 antd 组件)"
+ },
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "default": "false",
+ "description": "Set form component disable, only available for antd components",
+ "descriptionZh": "设置表单组件禁用,仅对 antd 组件有效"
+ },
+ {
+ "name": "scrollToFirstError",
+ "type": "ScrollFocusOptions \\| boolean",
+ "default": "false",
+ "description": "Auto scroll to first failed field when submit",
+ "descriptionZh": "提交失败自动滚动到第一个错误字段"
+ },
+ {
+ "name": "requiredMark",
+ "type": "RequiredMark",
+ "default": "true",
+ "description": "Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config",
+ "descriptionZh": "必选样式,可以切换为必选或者可选展示样式。此为 Form 配置,Form.Item 无法单独配置"
+ },
+ {
+ "name": "variant",
+ "type": "Variant",
+ "default": "`outlined`",
+ "description": "Variant of components inside form",
+ "descriptionZh": "表单内控件变体"
+ },
+ {
+ "name": "validateMessages",
+ "type": "ValidateMessages",
+ "default": "-",
+ "description": "Validation prompt template, description [see below](#validatemessages)",
+ "descriptionZh": "验证提示模板,说明[见下](#validatemessages)"
+ },
+ {
+ "name": "model",
+ "type": "Record<string, any>",
+ "default": "-",
+ "description": "Form model",
+ "descriptionZh": "表单数据"
+ },
+ {
+ "name": "rules",
+ "type": "Record<string, Rule[]>",
+ "default": "-",
+ "description": "Form rules",
+ "descriptionZh": "表单规则"
+ },
+ {
+ "name": "validateTrigger",
+ "type": "string \\| string[] \\| false",
+ "default": "`change`",
+ "description": "Config field validate trigger. When set to `false`, all interaction-driven validation is disabled even if a rule declares `trigger` or `validateTrigger`; `validateFields` and submit validation still run",
+ "descriptionZh": "统一设置字段触发验证的时机。设为 `false` 时禁用所有交互事件触发的校验,即使规则单独声明了 `trigger` 或 `validateTrigger`;`validateFields` 和提交校验仍会执行"
+ },
+ {
+ "name": "preserve",
+ "type": "boolean",
+ "default": "true",
+ "description": "Keep field value even when field removed. You can get the preserve field value by `getFieldsValue(true)`",
+ "descriptionZh": "当字段被删除时保留字段值。你可以通过 `getFieldsValue(true)` 来获取保留字段值"
+ },
+ {
+ "name": "clearOnDestroy",
+ "type": "boolean",
+ "default": "false",
+ "description": "Clear form values when the form is uninstalled",
+ "descriptionZh": "当表单被卸载时清空表单值"
+ },
+ {
+ "name": "validateOnRuleChange",
+ "type": "boolean",
+ "default": "false",
+ "description": "Automatically revalidates the form when `Form.rules` changes",
+ "descriptionZh": "当 `Form.rules` 发生变化时,自动重新触发表单校验"
+ },
+ {
+ "name": "rootClass",
+ "type": "string",
+ "default": "-",
+ "description": "Root container class",
+ "descriptionZh": "根容器类名"
+ },
+ {
+ "name": "prefixCls",
+ "type": "string",
+ "default": "-",
+ "description": "Prefix class name",
+ "descriptionZh": "组件前缀类名"
+ },
+ {
+ "name": "finish",
+ "type": "(values: Record<string, any>) => void",
+ "default": "",
+ "description": "Trigger after submitting the form and verifying data successfully",
+ "descriptionZh": "提交表单且数据验证成功后回调事件"
+ },
+ {
+ "name": "finishFailed",
+ "type": "(errorInfo: ValidateErrorEntity) => void",
+ "default": "",
+ "description": "Trigger after submitting the form and verifying data failed",
+ "descriptionZh": "提交表单且数据验证失败后回调事件"
+ },
+ {
+ "name": "submit",
+ "type": "(e: Event) => void",
+ "default": "",
+ "description": "Triggered on native form submit before internal validation starts",
+ "descriptionZh": "原生表单提交时触发,在内部校验开始前执行"
+ },
+ {
+ "name": "reset",
+ "type": "(e: Event) => void",
+ "default": "",
+ "description": "Triggered on native form reset",
+ "descriptionZh": "原生表单重置时触发"
+ },
+ {
+ "name": "validate",
+ "type": "(name: InternalNamePath, status: boolean, errors: any[] \\| null) => void",
+ "default": "",
+ "description": "Triggered when a single field finishes validation. Returns the field path, pass status, and error messages",
+ "descriptionZh": "单个字段校验完成时触发,返回字段路径、是否通过以及错误信息"
+ },
+ {
+ "name": "valuesChange",
+ "type": "(changedValues: Record<string, any>, values: Record<string, any>) => void",
+ "default": "",
+ "description": "Trigger when value updated",
+ "descriptionZh": "字段值更新时触发回调事件"
+ },
+ {
+ "name": "fieldsChange",
+ "type": "(changedFields: FieldData[], allFields: FieldData[]) => void",
+ "default": "",
+ "description": "Trigger when field updated",
+ "descriptionZh": "字段更新时触发回调事件"
+ },
+ {
+ "name": "getFieldValue",
+ "type": "(name: NamePath) => StoreValue",
+ "default": "",
+ "description": "Get the value of a single field",
+ "descriptionZh": "获取单个字段值"
+ },
+ {
+ "name": "getFieldsValue",
+ "type": "(nameList?: NamePath[] \\| true) => Record<string, any>",
+ "default": "",
+ "description": "Get values of a group of fields. Pass `true` to return values of all currently collected fields",
+ "descriptionZh": "获取一组字段值;传 `true` 时返回当前已收集字段的值"
+ },
+ {
+ "name": "getFieldError",
+ "type": "(name: NamePath) => string[]",
+ "default": "",
+ "description": "Get error messages of a single field",
+ "descriptionZh": "获取单个字段的错误信息"
+ },
+ {
+ "name": "getFieldsError",
+ "type": "(nameList?: NamePath[]) => FieldError[]",
+ "default": "",
+ "description": "Get field error info list, including `errors` and `warnings`",
+ "descriptionZh": "获取字段错误信息列表,包含 `errors` 和 `warnings`"
+ },
+ {
+ "name": "getFieldWarning",
+ "type": "(name: NamePath) => string[]",
+ "default": "",
+ "description": "Get warning messages of a single field",
+ "descriptionZh": "获取单个字段的警告信息"
+ },
+ {
+ "name": "isFieldsTouched",
+ "type": "(nameList?: NamePath[] \\| boolean, allFieldsTouched?: boolean) => boolean",
+ "default": "",
+ "description": "Check whether fields have been operated on. When `allFieldsTouched` is `true`, all fields must be touched",
+ "descriptionZh": "检查字段是否已被操作;当 `allFieldsTouched` 为 `true` 时要求全部字段都已被操作"
+ },
+ {
+ "name": "isFieldTouched",
+ "type": "(name: NamePath) => boolean",
+ "default": "",
+ "description": "Check whether a single field has been operated on",
+ "descriptionZh": "检查单个字段是否已被操作"
+ },
+ {
+ "name": "isFieldsValidating",
+ "type": "(nameList?: NamePath[]) => boolean",
+ "default": "",
+ "description": "Check whether fields are validating",
+ "descriptionZh": "检查字段是否处于校验中"
+ },
+ {
+ "name": "isFieldValidating",
+ "type": "(name: NamePath) => boolean",
+ "default": "",
+ "description": "Check whether a single field is validating",
+ "descriptionZh": "检查单个字段是否处于校验中"
+ },
+ {
+ "name": "resetFields",
+ "type": "(nameList?: NamePath[]) => void",
+ "default": "",
+ "description": "Reset field values, status, and validation results. Resets all fields when omitted",
+ "descriptionZh": "重置字段值、状态和校验结果;不传时重置全部字段"
+ },
+ {
+ "name": "clearValidate",
+ "type": "(nameList?: NamePath[]) => void",
+ "default": "",
+ "description": "Clear validation results without changing field values",
+ "descriptionZh": "清空字段校验结果,不修改字段值"
+ },
+ {
+ "name": "setFields",
+ "type": "(data: FieldData[]) => void",
+ "default": "",
+ "description": "Set field state and values directly. Useful for writing `errors`, `warnings`, `touched`, and similar meta manually",
+ "descriptionZh": "直接设置字段状态和字段值,可手动写入 `errors`、`warnings`、`touched` 等"
+ },
+ {
+ "name": "setFieldValue",
+ "type": "(name: NamePath, value: any) => void",
+ "default": "",
+ "description": "Set the value of a single field",
+ "descriptionZh": "设置单个字段值"
+ },
+ {
+ "name": "setFieldsValue",
+ "type": "(values: Record<string, any>) => void",
+ "default": "",
+ "description": "Set values of multiple fields in batch",
+ "descriptionZh": "批量设置多个字段值"
+ },
+ {
+ "name": "validateFields",
+ "type": "(nameList?: NamePath[], options?: ValidateOptions) => Promise<Record<string, any>>",
+ "default": "",
+ "description": "Validate fields and return the corresponding field values",
+ "descriptionZh": "触发字段校验并返回对应字段值"
+ },
+ {
+ "name": "validate",
+ "type": "() => Promise<Record<string, any>>",
+ "default": "",
+ "description": "Alias of `validateFields()` for validating the whole form",
+ "descriptionZh": "`validateFields()` 的别名,用于校验整个表单"
+ },
+ {
+ "name": "submit",
+ "type": "() => void",
+ "default": "",
+ "description": "Submit the form. Equivalent to triggering form `submit`",
+ "descriptionZh": "提交表单,效果等同于触发表单 `submit`"
+ },
+ {
+ "name": "nativeElement",
+ "type": "HTMLFormElement \\| undefined",
+ "default": "",
+ "description": "Root `form` element",
+ "descriptionZh": "表单根 `form` 元素"
+ },
+ {
+ "name": "scrollToField",
+ "type": "(name: NamePath, options?: ScrollFocusOptions \\| boolean) => void",
+ "default": "",
+ "description": "Scroll to the specified field. By default it will also try to focus the field",
+ "descriptionZh": "滚动到指定字段位置,默认会尝试聚焦该字段"
+ },
+ {
+ "name": "focusField",
+ "type": "(name: NamePath) => void",
+ "default": "",
+ "description": "Focus the DOM element of the specified field",
+ "descriptionZh": "聚焦指定字段对应的 DOM 元素"
+ },
+ {
+ "name": "getFieldInstance",
+ "type": "(name: NamePath) => any",
+ "default": "",
+ "description": "Get the registered field instance",
+ "descriptionZh": "获取已注册字段实例"
+ }
+ ],
+ "tokens": [
+ {
+ "name": "inlineItemMarginBottom",
+ "type": "number",
+ "default": "0",
+ "description": "Inline layout form item margin bottom",
+ "descriptionZh": "行内布局表单项间距"
+ },
+ {
+ "name": "itemMarginBottom",
+ "type": "number",
+ "default": "24",
+ "description": "Form item margin bottom",
+ "descriptionZh": "表单项间距"
+ },
+ {
+ "name": "labelColonMarginInlineEnd",
+ "type": "number",
+ "default": "8",
+ "description": "Label colon margin-inline-end",
+ "descriptionZh": "标签冒号后间距"
+ },
+ {
+ "name": "labelColonMarginInlineStart",
+ "type": "number",
+ "default": "2",
+ "description": "Label colon margin-inline-start",
+ "descriptionZh": "标签冒号前间距"
+ },
+ {
+ "name": "labelColor",
+ "type": "string",
+ "default": "rgba(0,0,0,0.88)",
+ "description": "Label color",
+ "descriptionZh": "标签颜色"
+ },
+ {
+ "name": "labelFontSize",
+ "type": "number",
+ "default": "14",
+ "description": "Label font size",
+ "descriptionZh": "标签字体大小"
+ },
+ {
+ "name": "labelHeight",
+ "type": "string | number",
+ "default": "32",
+ "description": "Label height",
+ "descriptionZh": "标签高度"
+ },
+ {
+ "name": "labelRequiredMarkColor",
+ "type": "string",
+ "default": "#ff4d4f",
+ "description": "Required mark color",
+ "descriptionZh": "必填项标记颜色"
+ },
+ {
+ "name": "verticalLabelMargin",
+ "type": "Margin | undefined",
+ "default": "0",
+ "description": "Vertical layout label margin",
+ "descriptionZh": "垂直布局标签外边距"
+ },
+ {
+ "name": "verticalLabelPadding",
+ "type": "Padding | undefined",
+ "default": "0 0 8px",
+ "description": "Vertical layout label padding",
+ "descriptionZh": "垂直布局标签内边距"
+ }
+ ],
+ "faq": [],
+ "demos": [
+ {
+ "name": "basic",
+ "title": "Basic Usage",
+ "titleZh": "基础用法",
+ "description": "Basic form usage.",
+ "descriptionZh": "基础表单用法。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n Remember me!\n \n \n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "control-hooks",
+ "title": "Form methods",
+ "titleZh": "表单方法",
+ "description": "Interact with form fields through form instance methods.",
+ "descriptionZh": "通过表单实例方法与数据域交互。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n Reset\n \n \n Fill form\n \n \n \n \n"
+ },
+ {
+ "name": "layout",
+ "title": "Form Layout",
+ "titleZh": "表单布局",
+ "description": "Switch between horizontal, vertical, and inline layouts.",
+ "descriptionZh": "通过切换布局展示表单的三种排列方式。",
+ "code": "\n\n\n \n \n \n \n Horizontal\n \n \n Vertical\n \n \n Inline\n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "layout-multiple",
+ "title": "Form mix layout",
+ "titleZh": "混合布局",
+ "description": "Mix horizontal and vertical layouts in one page.",
+ "descriptionZh": "混合使用水平与垂直布局。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "disabled",
+ "title": "Form disabled",
+ "titleZh": "禁用表单",
+ "description": "Disable all controls in a form.",
+ "descriptionZh": "表单整体禁用。",
+ "code": "\n\n\n \n \n Form disabled\n \n \n \n \n Checkbox\n \n \n \n \n \n Apple\n \n \n Pear\n \n \n \n \n \n \n \n \n \n \n \n \n \n Button\n \n \n \n"
+ },
+ {
+ "name": "variant",
+ "title": "Form variants",
+ "titleZh": "表单变体",
+ "description": "Switch variants for inputs inside form.",
+ "descriptionZh": "表单控件变体切换。",
+ "code": "\n\n\n \n \n \n \n {{ item.label }}\n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "required-mark",
+ "title": "Required style",
+ "titleZh": "必选样式",
+ "description": "Display required mark styles.",
+ "descriptionZh": "必选样式展示。",
+ "code": "\n\n\n \n \n \n \n {{ item.label }}\n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "size",
+ "title": "Form size",
+ "titleZh": "表单尺寸",
+ "description": "Change form size for built-in controls.",
+ "descriptionZh": "表单尺寸联动展示。",
+ "code": "\n\n\n \n \n \n \n Small\n \n \n Middle\n \n \n Large\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Button\n \n \n"
+ },
+ {
+ "name": "layout-can-wrap",
+ "title": "label can wrap",
+ "titleZh": "label 换行",
+ "description": "Allow label text to wrap.",
+ "descriptionZh": "label 可换行展示。",
+ "code": "\n\n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "warning-only",
+ "title": "No block rule",
+ "titleZh": "非阻塞规则",
+ "description": "Use warningOnly rules without blocking submit.",
+ "descriptionZh": "使用 warningOnly 规则展示非阻塞提示。",
+ "code": "\n\n\n \n \n \n \n \n \n \n Submit\n \n \n Fill\n \n \n \n \n"
+ },
+ {
+ "name": "useWatch",
+ "title": "Watch Hooks",
+ "titleZh": "监听字段",
+ "description": "Watch form values with Vue reactivity.",
+ "descriptionZh": "使用响应式监听表单字段。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n {{ JSON.stringify(watched, null, 2) }}\n \n \n"
+ },
+ {
+ "name": "validate-trigger",
+ "title": "Validate Trigger",
+ "titleZh": "校验触发时机",
+ "description": "Configure validate trigger timing for fields.",
+ "descriptionZh": "配置字段触发校验的时机。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "validate-only",
+ "title": "Validate Only",
+ "titleZh": "仅校验",
+ "description": "Validate only without triggering UI status updates.",
+ "descriptionZh": "仅校验,不更新校验状态。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n Validate Only\n \n \n \n \n"
+ },
+ {
+ "name": "form-item-path",
+ "title": "Path Prefix",
+ "titleZh": "路径前缀",
+ "description": "Use nested paths for field names.",
+ "descriptionZh": "使用嵌套路径为字段命名。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "dynamic-form-item",
+ "title": "Dynamic Form Item",
+ "titleZh": "动态表单项",
+ "description": "Add and remove form items dynamically.",
+ "descriptionZh": "动态增减表单项。",
+ "code": "\n\n\n \n \n \n \n 1\"\n class=\"dynamic-delete-button\"\n style=\"margin-left: 8px\"\n @click=\"removeField(index)\"\n />\n \n \n\n \n \n \n \n \n \n Add field\n \n \n \n \n \n Add field at head\n \n \n \n\n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "dynamic-form-items",
+ "title": "Dynamic Form nest Items",
+ "titleZh": "动态嵌套表单项",
+ "description": "Dynamic nested form items.",
+ "descriptionZh": "动态嵌套表单项。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n Add field\n \n \n\n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "dynamic-form-items-complex",
+ "title": "Complex Dynamic Form Item",
+ "titleZh": "复杂动态表单项",
+ "description": "Complex nested dynamic form items.",
+ "descriptionZh": "复杂动态嵌套表单项。",
+ "code": "\n\n\n \n \n
\n \n \n \n\n \n \n \n\n \n \n
\n \n \n \n \n \n \n \n \n
\n + Add Sub Item\n \n
\n \n \n\n
\n + Add Item\n \n
\n\n \n \n {{ JSON.stringify(model, null, 2) }}\n \n \n \n"
+ },
+ {
+ "name": "nest-messages",
+ "title": "Nest",
+ "titleZh": "嵌套字段",
+ "description": "Nested fields with custom validation messages.",
+ "descriptionZh": "嵌套字段与自定义校验提示。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "complex-form-control",
+ "title": "complex form control",
+ "titleZh": "复杂表单控件",
+ "description": "Combine multiple controls in one line.",
+ "descriptionZh": "在同一行组合多个控件。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n Need Help?\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "customized-form-controls",
+ "title": "Customized Form Controls",
+ "titleZh": "自定义表单控件",
+ "description": "Customized form controls.",
+ "descriptionZh": "自定义表单控件。",
+ "code": "\n\n\n \n \n \n \n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "global-state",
+ "title": "Store Form Data into Upper Component",
+ "titleZh": "外层状态联动",
+ "description": "Store form data in outer reactive state.",
+ "descriptionZh": "将表单数据同步到外层状态。",
+ "code": "\n\n\n \n \n \n \n \n \n {{ JSON.stringify(model, null, 2) }}\n \n"
+ },
+ {
+ "name": "form-context",
+ "title": "Control between forms",
+ "titleZh": "多表单协作",
+ "description": "Coordinate data between multiple forms.",
+ "descriptionZh": "多表单协作示例。",
+ "code": "\n\n\n \n \n \n \n\n \n \n \n \n \n \n {{ `${user.name} - ${user.age}` }}\n \n \n \n ( No user yet.)\n \n \n\n \n \n Submit\n \n \n Add User\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n"
+ },
+ {
+ "name": "inline-login",
+ "title": "Inline Login Form",
+ "titleZh": "内联登录",
+ "description": "Inline login form.",
+ "descriptionZh": "内联登录表单。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Log in\n \n \n \n"
+ },
+ {
+ "name": "login",
+ "title": "Login Form",
+ "titleZh": "登录表单",
+ "description": "Login form example.",
+ "descriptionZh": "登录表单示例。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Remember me\n \n \n \n Forgot password\n \n \n \n\n \n \n Log in\n \n or Register now!\n \n \n"
+ },
+ {
+ "name": "register",
+ "title": "Registration",
+ "titleZh": "注册表单",
+ "description": "Registration form example.",
+ "descriptionZh": "注册表单示例。",
+ "code": "\n\n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n I have read the agreement\n \n \n\n \n \n Register\n \n \n \n"
+ },
+ {
+ "name": "advanced-search",
+ "title": "Advanced search",
+ "titleZh": "高级搜索",
+ "description": "Advanced search form with expand/collapse.",
+ "descriptionZh": "可展开的高级搜索表单。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n\n \n
\n \n Search\n \n \n Clear\n \n \n \n {{ expand ? 'Collapse' : 'Expand' }}\n \n \n
\n \n\n \n Search Result List\n
\n"
+ },
+ {
+ "name": "form-in-modal",
+ "title": "Form in Modal to Create",
+ "titleZh": "弹窗表单",
+ "description": "Use form inside modal.",
+ "descriptionZh": "在弹窗中使用表单。",
+ "code": "\n\n\n \n \n New Collection\n \n {{ JSON.stringify(formValues, null, 2) }}\n \n\n \n \n \n \n \n \n \n \n \n \n \n Public\n \n \n Private\n \n \n \n \n \n"
+ },
+ {
+ "name": "time-related-controls",
+ "title": "Time-related Controls",
+ "titleZh": "时间相关控件",
+ "description": "Time-related controls with validation and submit.",
+ "descriptionZh": "时间相关控件校验与提交。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "without-form-create",
+ "title": "Handle Form Data Manually",
+ "titleZh": "手动处理表单数据",
+ "description": "Handle validation manually without form binding.",
+ "descriptionZh": "手动控制校验状态。",
+ "code": "\n\n\n \n \n \n \n \n"
+ },
+ {
+ "name": "validate-static",
+ "title": "Customized Validation",
+ "titleZh": "自定义校验展示",
+ "description": "Custom validation status display.",
+ "descriptionZh": "自定义校验状态展示。",
+ "code": "\n\n\n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n"
+ },
+ {
+ "name": "dynamic-rule",
+ "title": "Dynamic Rules",
+ "titleZh": "动态规则",
+ "description": "Toggle validation rules dynamically.",
+ "descriptionZh": "根据状态动态切换校验规则。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n Nickname is required\n \n \n \n \n Check\n \n \n \n"
+ },
+ {
+ "name": "form-dependencies",
+ "title": "Dependencies",
+ "titleZh": "字段依赖",
+ "description": "Validate fields based on other field values.",
+ "descriptionZh": "字段之间的依赖校验。",
+ "code": "\n\n\n \n \n\n \n \n \n\n \n \n \n\n \n \n Only update when password2 changed:\n
\n {{ JSON.stringify(model, null, 2) }}\n \n \n"
+ },
+ {
+ "name": "getValueProps-normalize",
+ "title": "getValueProps + normalize",
+ "titleZh": "值转换",
+ "description": "Transform values with computed getters/setters.",
+ "descriptionZh": "使用计算属性进行值转换。",
+ "code": "\n\n\n \n \n \n \n\n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "validate-scroll-to-field",
+ "title": "Slide to error field",
+ "titleZh": "滑动到错误字段",
+ "description": "When validation fails or manually scroll to the error field.",
+ "descriptionZh": "校验失败时/手动滚动到错误字段。",
+ "code": "\n\n\n \n \n formRef?.scrollToField?.('bio')\">\n Scroll to Bio\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n formRef?.resetFields?.()\">\n Reset\n \n \n \n \n"
+ },
+ {
+ "name": "validate-other",
+ "title": "Other Form Controls",
+ "titleZh": "其他表单控件",
+ "description": "Validation with other form controls.",
+ "descriptionZh": "其他类型控件的校验示例。",
+ "code": "\n\n\n \n \n China\n \n \n \n \n\n \n \n \n\n \n \n \n \n machines\n \n\n \n \n \n\n \n \n \n\n \n \n \n item 1\n \n \n item 2\n \n \n item 3\n \n \n \n\n \n \n \n item 1\n \n \n item 2\n \n \n item 3\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "style-class",
+ "title": "Custom semantic dom styling",
+ "titleZh": "自定义语义结构样式",
+ "description": "Custom semantic dom styling.",
+ "descriptionZh": "自定义语义化结构的样式和类。",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n Submit\n \n \n \n"
+ },
+ {
+ "name": "_semantic",
+ "title": "",
+ "titleZh": "",
+ "description": "",
+ "descriptionZh": "",
+ "code": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n"
+ }
+ ]
+ },
+ {
+ "name": "Grid",
+ "nameZh": "栅格",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "24 Grids System.",
+ "descriptionZh": "24 栅格系统。",
+ "whenToUse": "",
+ "whenToUseZh": "",
+ "doc": "---\ncategory: Components\ngroup: Layout\ntitle: Grid\ndescription: 24 Grids System.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n class: grid-demo-box\n---\n\n## Design concept\n\n\n

\n
\n\nIn most business situations, Antdv Next needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.\n\nWe name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.\n\n## Outline\n\nIn the grid system, we define the frame outside the information area based on `row` and `column`, to ensure that every area can have stable arrangement.\n\nFollowing is a brief look at how it works:\n\n- Establish a set of `column` in the horizontal space defined by `row` (abbreviated col).\n- Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`.\n- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by ``.\n- If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.\n\nOur grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`.\n\nLayout uses a 24 grid layout to define the width of each \"box\", but does not rigidly adhere to the grid layout.\n\n## Examples\n\n\n Basic Grid\n Grid Gutter\n Column offset\n Grid sort\n Typesetting\n Alignment\n Order\n Flex Stretch\n Responsive\n Flex Responsive\n More responsive\n Playground\n useBreakpoint Hook\n\n\n## API\n\nCommon props ref:[Common props](/docs/vue/common-props)\n\n### Row\n\n#### Props {#row-props}\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| align | Vertical alignment | `top` \\| `middle` \\| `bottom` \\| `stretch` \\| `{[key in 'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| 'xxl' \\| 'xxxl']: 'top' \\| 'middle' \\| 'bottom' \\| 'stretch'}` | `top` | object: 4.24.0 |\n| gutter | Spacing between grids, could be a [string CSS units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units) or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \\| string \\| object \\| array | 0 | string: 5.28.0 |\n| justify | Horizontal arrangement | `start` \\| `end` \\| `center` \\| `space-around` \\| `space-between` \\| `space-evenly` \\| `{[key in 'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| 'xxl' \\| 'xxxl']: 'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'}` | `start` | object: 4.24.0 |\n| wrap | Auto wrap line | boolean | true | 4.8.0 |\n\n### Col\n\n#### Props {#col-props}\n\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| flex | Flex layout style | string \\| number | - | |\n| offset | The number of cells to offset Col from the left | number | 0 | |\n| order | Raster order | number | 0 | |\n| pull | The number of cells that raster is moved to the left | number | 0 | |\n| push | The number of cells that raster is moved to the right | number | 0 | |\n| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | none | |\n| xs | `screen < 576px` and also default setting, could be a `span` value or an object containing above props | number \\| object | - | |\n| sm | `screen ≥ 576px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| md | `screen ≥ 768px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| xxxl | `screen ≥ 1920px`, could be a `span` value or an object containing above props | number \\| object | - | 1.0.3 |\n\n## Design Token\n\n\n\nSee [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.\n",
+ "docZh": "---\ncategory: Components\ngroup: 布局\ntitle: Grid\nsubtitle: 栅格\ndescription: 24 栅格系统。\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAAAAAAAAAAAADrJ8AQ/original\ndemo:\n class: grid-demo-box\n---\n\n## 设计理念 {#design-concept}\n\n\n

\n
\n\n在多数业务情况下,Antdv Next 需要在设计区域内解决大量信息收纳的问题,因此在 12 栅格系统的基础上,我们将整个设计建议区域按照 24 等分的原则进行划分。\n\n划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个,最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则,以保证视觉层面的舒适感。\n\n## 概述 {#overview}\n\n布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:\n\n- 通过 `row` 在水平方向建立一组 `column`(简写 col)。\n- 你的内容应当放置于 `col` 内,并且,只有 `col` 可以作为 `row` 的直接元素。\n- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如,三个等宽的列可以使用 `` 来创建。\n- 如果一个 `row` 中的 `col` 总和超过 24,那么多余的 `col` 会作为一个整体另起一行排列。\n\n我们的栅格化系统基于 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。\n\n布局是基于 24 栅格来定义每一个『盒子』的宽度,但不拘泥于栅格。\n\n## 示例 {#examples}\n\n\n 基础栅格\n 区块间隔\n 左右偏移\n 栅格排序\n 排版\n 对齐\n 排序\n Flex 填充\n 响应式布局\n Flex 响应式布局\n 其他属性的响应式\n 栅格配置器\n useBreakpoint Hook\n\n\n## API\n\n通用属性参考:[通用属性](/docs/vue/common-props)\n\n### Row\n\n#### 属性 {#row-props}\n\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| align | 垂直对齐方式 | `top` \\| `middle` \\| `bottom` \\| `stretch` \\| `{[key in 'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| 'xxl' \\| 'xxxl']: 'top' \\| 'middle' \\| 'bottom' \\| 'stretch'}` | `top` | |\n| gutter | 栅格间隔,可以写成[字符串CSS单位](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Values_and_Units)或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \\| string \\| object \\| array | 0 | |\n| justify | 水平排列方式 | `start` \\| `end` \\| `center` \\| `space-around` \\| `space-between` \\| `space-evenly` \\| `{[key in 'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| 'xxl' \\| 'xxxl']: 'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'}` | `start` | |\n| wrap | 是否自动换行 | boolean | true | |\n\n### Col\n\n#### 属性 {#col-props}\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| flex | flex 布局属性 | string \\| number | - | |\n| offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 | |\n| order | 栅格顺序 | number | 0 | |\n| pull | 栅格向左移动格数 | number | 0 | |\n| push | 栅格向右移动格数 | number | 0 | |\n| span | 栅格占位格数,为 0 时相当于 `display: none` | number | - | |\n| xs | `窗口宽度 < 576px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| sm | `窗口宽度 ≥ 576px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| md | `窗口宽度 ≥ 768px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| lg | `窗口宽度 ≥ 992px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| xl | `窗口宽度 ≥ 1200px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| xxl | `窗口宽度 ≥ 1600px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| xxxl | `窗口宽度 ≥ 1920px` 响应式栈格,可为栈格数或一个包含其他属性的对象 | number \\| object | - | 1.0.3 |\n\n## 主题变量(Design Token)\n\n\n\n查看 [定制主题](/docs/vue/customize-theme) 了解如何使用主题变量。\n",
+ "subComponents": {
+ "Row-align": [
+ {
+ "name": "align",
+ "type": "`top` \\| `middle` \\| `bottom` \\| `stretch` \\| `{[key in 'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| 'xxl' \\| 'xxxl']: 'top' \\| 'middle' \\| 'bottom' \\| 'stretch'}`",
+ "default": "`top`",
+ "description": "Vertical alignment",
+ "descriptionZh": "垂直对齐方式"
+ }
+ ],
+ "Row-gutter": [
+ {
+ "name": "gutter",
+ "type": "number \\| string \\| object \\| array",
+ "default": "0",
+ "description": "Spacing between grids, could be a [string CSS units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units) or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]`",
+ "descriptionZh": "栅格间隔,可以写成[字符串CSS单位](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Values_and_Units)或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]`"
+ }
+ ],
+ "Row-justify": [
+ {
+ "name": "justify",
+ "type": "`start` \\| `end` \\| `center` \\| `space-around` \\| `space-between` \\| `space-evenly` \\| `{[key in 'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| 'xxl' \\| 'xxxl']: 'start' \\| 'end' \\| 'center' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'}`",
+ "default": "`start`",
+ "description": "Horizontal arrangement",
+ "descriptionZh": "水平排列方式"
+ }
+ ],
+ "Row-wrap": [
+ {
+ "name": "wrap",
+ "type": "boolean",
+ "default": "true",
+ "description": "Auto wrap line",
+ "descriptionZh": "是否自动换行"
+ }
+ ],
+ "Col-flex": [
+ {
+ "name": "flex",
+ "type": "string \\| number",
+ "default": "-",
+ "description": "Flex layout style",
+ "descriptionZh": "flex 布局属性"
+ }
+ ],
+ "Col-offset": [
+ {
+ "name": "offset",
+ "type": "number",
+ "default": "0",
+ "description": "The number of cells to offset Col from the left",
+ "descriptionZh": "栅格左侧的间隔格数,间隔内不可以有栅格"
+ }
+ ],
+ "Col-order": [
+ {
+ "name": "order",
+ "type": "number",
+ "default": "0",
+ "description": "Raster order",
+ "descriptionZh": "栅格顺序"
+ }
+ ],
+ "Col-pull": [
+ {
+ "name": "pull",
+ "type": "number",
+ "default": "0",
+ "description": "The number of cells that raster is moved to the left",
+ "descriptionZh": "栅格向左移动格数"
+ }
+ ],
+ "Col-push": [
+ {
+ "name": "push",
+ "type": "number",
+ "default": "0",
+ "description": "The number of cells that raster is moved to the right",
+ "descriptionZh": "栅格向右移动格数"
+ }
+ ],
+ "Col-span": [
+ {
+ "name": "span",
+ "type": "number",
+ "default": "none",
+ "description": "Raster number of cells to occupy, 0 corresponds to `display: none`",
+ "descriptionZh": "栅格占位格数,为 0 时相当于 `display: none`"
+ }
+ ],
+ "Col-xs": [
+ {
+ "name": "xs",
+ "type": "number \\| object",
+ "default": "-",
+ "description": "`screen < 576px` and also default setting, could be a `span` value or an object containing above props",
+ "descriptionZh": "`窗口宽度 < 576px` 响应式栅格,可为栅格数或一个包含其他属性的对象"
+ }
+ ],
+ "Col-sm": [
+ {
+ "name": "sm",
+ "type": "number \\| object",
+ "default": "-",
+ "description": "`screen ≥ 576px`, could be a `span` value or an object containing above props",
+ "descriptionZh": "`窗口宽度 ≥ 576px` 响应式栅格,可为栅格数或一个包含其他属性的对象"
+ }
+ ],
+ "Col-md": [
+ {
+ "name": "md",
+ "type": "number \\| object",
+ "default": "-",
+ "description": "`screen ≥ 768px`, could be a `span` value or an object containing above props",
+ "descriptionZh": "`窗口宽度 ≥ 768px` 响应式栅格,可为栅格数或一个包含其他属性的对象"
+ }
+ ],
+ "Col-lg": [
+ {
+ "name": "lg",
+ "type": "number \\| object",
+ "default": "-",
+ "description": "`screen ≥ 992px`, could be a `span` value or an object containing above props",
+ "descriptionZh": "`窗口宽度 ≥ 992px` 响应式栅格,可为栅格数或一个包含其他属性的对象"
+ }
+ ],
+ "Col-xl": [
+ {
+ "name": "xl",
+ "type": "number \\| object",
+ "default": "-",
+ "description": "`screen ≥ 1200px`, could be a `span` value or an object containing above props",
+ "descriptionZh": "`窗口宽度 ≥ 1200px` 响应式栅格,可为栅格数或一个包含其他属性的对象"
+ }
+ ],
+ "Col-xxl": [
+ {
+ "name": "xxl",
+ "type": "number \\| object",
+ "default": "-",
+ "description": "`screen ≥ 1600px`, could be a `span` value or an object containing above props",
+ "descriptionZh": "`窗口宽度 ≥ 1600px` 响应式栅格,可为栅格数或一个包含其他属性的对象"
+ }
+ ],
+ "Col-xxxl": [
+ {
+ "name": "xxxl",
+ "type": "number \\| object",
+ "default": "-",
+ "description": "`screen ≥ 1920px`, could be a `span` value or an object containing above props",
+ "descriptionZh": "`窗口宽度 ≥ 1920px` 响应式栈格,可为栈格数或一个包含其他属性的对象"
+ }
+ ]
+ },
+ "props": [],
+ "tokens": [],
+ "faq": [],
+ "demos": [
+ {
+ "name": "basic",
+ "title": "Basic Grid",
+ "titleZh": "基础栅格",
+ "description": "From the stack to the horizontal arrangement.\n\nCreate a basic grid using a single set of `Row` and `Col`. All `Col` must be placed inside a `Row`.",
+ "descriptionZh": "从堆叠到水平排列。\n\n使用一组 `Row` 和 `Col` 创建基础栅格,所有列(Col)必须放在 `Row` 内。",
+ "code": "\n \n \n col\n \n \n\n \n \n col-12\n \n \n col-12\n \n \n \n \n col-8\n \n \n col-8\n \n \n col-8\n \n \n \n \n col-6\n \n \n col-6\n \n \n col-6\n \n \n col-6\n \n \n"
+ },
+ {
+ "name": "gutter",
+ "title": "Grid Gutter",
+ "titleZh": "区块间隔",
+ "description": "You can use the `gutter` property of `Row` as grid spacing. We recommend `(16 + 8n)px` (`n` stands for natural number).\n\nFor responsive spacing, set it as an object like `{ xs: 8, sm: 16, md: 24, lg: 32 }`.\n\nFor vertical spacing, use an array `[horizontal, vertical]`.",
+ "descriptionZh": "栅格常常需要和间隔进行配合,你可以使用 `Row` 的 `gutter` 属性,我们推荐使用 `(16 + 8n)px` 作为栅格间隔(n 是自然数)。\n\n如果要支持响应式,可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。\n\n如果需要垂直间距,可以写成数组形式 `[水平间距, 垂直间距]`。",
+ "code": "\n \n Horizontal\n \n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n\n \n Responsive\n \n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n\n \n Vertical\n \n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n \n col-6\n
\n \n \n"
+ },
+ {
+ "name": "offset",
+ "title": "Column offset",
+ "titleZh": "左右偏移",
+ "description": "`offset` can set the column to the right side. For example, `offset={4}` shifts the element to the right by four columns.",
+ "descriptionZh": "列偏移。\n\n使用 `offset` 可以将列向右侧偏。例如,`offset={4}` 将元素向右侧偏移 4 个列宽。",
+ "code": "\n \n \n col-8\n \n \n col-8\n \n \n \n \n col-6 col-offset-6\n \n \n col-6 col-offset-6\n \n \n \n \n col-12 col-offset-6\n \n \n"
+ },
+ {
+ "name": "sort",
+ "title": "Grid sort",
+ "titleZh": "栅格排序",
+ "description": "By using `push` and `pull`, you can easily change column order.",
+ "descriptionZh": "列排序。\n\n通过使用 `push` 和 `pull` 可以很容易地改变列的顺序。",
+ "code": "\n \n \n col-18 col-push-6\n \n \n col-6 col-pull-18\n \n \n"
+ },
+ {
+ "name": "flex",
+ "title": "Typesetting",
+ "titleZh": "排版",
+ "description": "Basic layout.\n\nChild elements are aligned in the parent by `start`, `center`, `end`, `space-between`, `space-around`, and `space-evenly`.",
+ "descriptionZh": "布局基础。\n\n子元素根据 `start`、`center`、`end`、`space-between`、`space-around` 和 `space-evenly` 在父节点内进行排版。",
+ "code": "\n \n sub-element align left\n \n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n\n \n sub-element align center\n \n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n\n \n sub-element align right\n \n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n\n \n sub-element monospaced arrangement\n \n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n\n \n sub-element align full\n \n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n\n \n sub-element align evenly\n \n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n col-4\n \n \n"
+ },
+ {
+ "name": "flex-align",
+ "title": "Alignment",
+ "titleZh": "对齐",
+ "description": "Child elements vertically aligned.",
+ "descriptionZh": "子元素垂直对齐。",
+ "code": "\n \n Align Top\n \n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n\n \n Align Middle\n \n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n\n \n Align Bottom\n \n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n \n col-4\n
\n \n \n"
+ },
+ {
+ "name": "flex-order",
+ "title": "Order",
+ "titleZh": "排序",
+ "description": "To change the element order by `order`.",
+ "descriptionZh": "通过 `order` 来改变元素的排序。",
+ "code": "\n \n Normal\n \n \n \n 1 col-order-4\n \n \n 2 col-order-3\n \n \n 3 col-order-2\n \n \n 4 col-order-1\n \n \n\n \n Responsive\n \n \n \n 1 col-order-responsive\n \n \n 2 col-order-responsive\n \n \n 3 col-order-responsive\n \n \n 4 col-order-responsive\n \n \n"
+ },
+ {
+ "name": "flex-stretch",
+ "title": "Flex Stretch",
+ "titleZh": "Flex 填充",
+ "description": "Col provides `flex` to support filling the rest space.",
+ "descriptionZh": "Col 提供 `flex` 属性以支持填充。",
+ "code": "\n \n Percentage columns\n \n \n \n 2 / 5\n \n \n 3 / 5\n \n \n\n \n Fill rest\n \n \n \n 100px\n \n \n Fill Rest\n \n \n\n \n Raw flex style\n \n \n \n 1 1 200px\n \n \n 0 1 300px\n \n \n\n \n \n \n none\n
\n \n \n auto with no-wrap\n \n \n"
+ },
+ {
+ "name": "responsive",
+ "title": "Responsive",
+ "titleZh": "响应式布局",
+ "description": "Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset seven dimensions: `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`.",
+ "descriptionZh": "参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries),预设七个响应尺寸:`xs` `sm` `md` `lg` `xl` `xxl` `xxxl`。",
+ "code": "\n \n \n Col\n \n \n Col\n \n \n Col\n \n \n"
+ },
+ {
+ "name": "responsive-flex",
+ "title": "Flex Responsive",
+ "titleZh": "Flex 响应式布局",
+ "description": "Support flexible responsive flex ratios, which require CSS Variables support in the browser.",
+ "descriptionZh": "支持更灵活的响应式下的任意 flex 比例,该功能需要浏览器支持 CSS Variables。",
+ "code": "\n\n\n \n \n Col\n \n \n"
+ },
+ {
+ "name": "responsive-more",
+ "title": "More responsive",
+ "titleZh": "其他属性的响应式",
+ "description": "`span` `pull` `push` `offset` `order` can be embedded into `xs` `sm` `md` `lg` `xl` `xxl` properties to use, where `xs={6}` equals to `xs={{ span: 6 }}`.",
+ "descriptionZh": "`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` `xxl` 属性中来使用。\n\n其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。",
+ "code": "\n \n \n Col\n \n \n Col\n \n \n Col\n \n \n"
+ },
+ {
+ "name": "playground",
+ "title": "Playground",
+ "titleZh": "栅格配置器",
+ "description": "A simple playground for column count and gutter.",
+ "descriptionZh": "可以简单配置几种等分栅格和间距。",
+ "code": "\n\n\n \n
Horizontal Gutter (px):\n
\n\n
Vertical Gutter (px):\n
\n\n
Column Count:\n
\n\n
\n \n \n Column
\n \n \n \n \n Column
\n \n \n \n\n
\n Another Row:\n
\n
\n \n \n Column
\n \n \n \n\n
{{ rowCode }}\n
{{ rowCodeSingle }}\n
\n"
+ },
+ {
+ "name": "useBreakpoint",
+ "title": "useBreakpoint Hook",
+ "titleZh": "useBreakpoint Hook",
+ "description": "Use the `useBreakpoint` hook to build personalized layouts. `xs` only takes effect when the screen matches the minimum width.",
+ "descriptionZh": "使用 `useBreakpoint` Hook 实现个性化布局,其中 `xs` 仅当满足最小宽度时生效。",
+ "code": "\n\n\n Current break point:\n \n
\n \n {{ item[0] }}\n \n \n
\n"
+ }
+ ]
+ },
+ {
+ "name": "Icon",
+ "nameZh": "图标",
+ "category": "Components",
+ "categoryZh": "Components",
+ "description": "Semantic vector graphics.",
+ "descriptionZh": "语义化的矢量图形。",
+ "whenToUse": "",
+ "whenToUseZh": "",
+ "doc": "---\ncategory: Components\ngroup: General\ntitle: Icon\ndescription: Semantic vector graphics.\ncover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original\ncoverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original\n---\n\n## How to use\n\nBefore using icons, you need to install the [@antdv-next/icons](https://www.npmjs.com/package/@antdv-next/icons) package:\n\n\n\n## List of icons\n\n\n\n## Examples\n\n\n Basic\n Two-tone icon and colorful icon\n Custom Icon\n Use iconfont.cn\n Multiple resources from iconfont.cn\n\n\n## API\n\n### Common Icon\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| className | The className of Icon | string | - | |\n| rotate | Rotate by n degrees (not working in IE9) | number | - | |\n| spin | Rotate icon with animation | boolean | false | |\n| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |\n| twoToneColor | Only supports the two-tone icon. Specify the primary color | string (hex color) | - | |\n\nWe still have three different themes for icons, icon component name is the icon name suffixed by the theme name.\n\n```vue\n\n\n\n \n \n \n\n```\n\n### Custom Icon\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| component | The component used for the root node | ComponentType<CustomIconComponentProps> | - | |\n| rotate | Rotate degrees (not working in IE9) | number | - | |\n| spin | Rotate icon with animation | boolean | false | |\n| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |\n\n### About SVG icons\n\n- Complete offline usage of icons, without dependency on a CDN-hosted font icon file (No more empty square during downloading and no need to deploy icon font files locally either!)\n- Much more display accuracy on lower-resolution screens\n- The ability to choose icon color\n- No need to change built-in icons with overriding styles by providing more props in component\n\nMore discussion of SVG icon reference at [#10353](https://github.com/ant-design/ant-design/issues/10353).\n\nAll the icons will render to `