@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/dialog/api.md

@@ -0,0 +1,192 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|弹窗标题|ReactNode|-|
+|footer|底部按钮配置|FooterButtonOptions\[\]|[]|
+|footerType|底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效|"grid" \| "button"|"grid"|
+|renderFooter|自定义渲染footer|() =\> ReactNode|-|
+|footerCollapseCount|底部按钮大于等于多少个时竖向排布|number|3|
+|titleAlign|标题对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|contentAlign|内容对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|platform|当前所在操作系统，对应不同样式|"ios" \| "android"|跟随当前所在系统|
+|extra|弹窗中的其他元素，比如关闭按钮等|ReactNode|-|
+|contentTransitionType|内容过渡动画类名|string|platform=android 时为"fade"，否则为"fade-scale"|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|弹窗内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|450|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|close|关闭菜单方法|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|必填|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|mask|蒙层 DOM|HTMLDivElement|
+|content|内容 DOM|HTMLDivElement|
+|setCloseScene|在关闭弹窗前修改 onClose 的 scene 参数值|(scene: string) =\> void|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|alert|打开确认框(含一个确认按钮)|(config: AlertOptions & DialogProps) =\> \{ close: () =\> void; update: (newConfig: AlertOptions & DialogProps) =\> void; \}|
+|confirm|打开提示框(含一个确认按钮和一个取消按钮)|(config: ConfirmOptions & AlertOptions) =\> \{ close: () =\> void; update: (newConfig: ConfirmOptions & AlertOptions) =\> void; \}|
+|open|打开常规对话框|(config: DialogProps) =\> \{ close: () =\> void; update: (newConfig: DialogProps) =\> void; \}|
+
+> FooterButtonOptions
+
+|参数|描述|类型|
+|----------|-------------|------|
+|content|按钮内容|ReactNode \| ((locale: ILocale) =\> ReactNode)|
+|className|按钮类名|string|
+|disabled|是否禁用按钮|boolean|
+|onClick|点击按钮事件，返回值为true时可以阻止dialog关闭|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|
+
+> AlertOptions
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|key|组件挂载容器id区分|string|-|
+|onOk|点击确认按钮回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|-|
+|okText|确认按钮文字|ReactNode|-|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|title|弹窗标题|ReactNode|-|
+|footer|底部按钮配置|FooterButtonOptions\[\]|[]|
+|footerType|底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效|"grid" \| "button"|"grid"|
+|renderFooter|自定义渲染footer|() =\> ReactNode|-|
+|footerCollapseCount|底部按钮大于等于多少个时竖向排布|number|3|
+|titleAlign|标题对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|contentAlign|内容对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|platform|当前所在操作系统，对应不同样式|"ios" \| "android"|跟随当前所在系统|
+|extra|弹窗中的其他元素，比如关闭按钮等|ReactNode|-|
+|contentTransitionType|内容过渡动画类名|string|platform=android 时为"fade"，否则为"fade-scale"|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|弹窗内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|450|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "ios" \| "android" \| "pc"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ConfirmOptions
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|onCancel|点击取消按钮回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|-|
+|cancelText|取消按钮文字|ReactNode|-|
+|key|组件挂载容器id区分|string|-|
+|onOk|点击确认按钮回调|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|-|
+|okText|确认按钮文字|ReactNode|-|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|title|弹窗标题|ReactNode|-|
+|footer|底部按钮配置|FooterButtonOptions\[\]|[]|
+|footerType|底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效|"grid" \| "button"|"grid"|
+|renderFooter|自定义渲染footer|() =\> ReactNode|-|
+|footerCollapseCount|底部按钮大于等于多少个时竖向排布|number|3|
+|titleAlign|标题对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|contentAlign|内容对齐方向|"left" \| "center" \| "right"|platform=android 时为"left"，否则为"center"|
+|platform|当前所在操作系统，对应不同样式|"ios" \| "android"|跟随当前所在系统|
+|extra|弹窗中的其他元素，比如关闭按钮等|ReactNode|-|
+|contentTransitionType|内容过渡动画类名|string|platform=android 时为"fade"，否则为"fade-scale"|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|弹窗内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|450|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|

package/metaData/components/dialog/style.md

@@ -0,0 +1,271 @@
+@import "../../../style/mixin.less";
+
+@keyframes fade-scale-on {
+
+    0% {
+        opacity: 0; transform: scale(.5); }
+
+    100% {
+        opacity: 1; transform: scale(1); }
+}
+
+@keyframes fade-scale-off {
+
+    0% {
+        opacity: 1; transform: scale(1); }
+
+    100% {
+        opacity: 0; transform: scale(.5); }
+}
+
+.@{prefix}-fade-scale-enter-active {
+    animation: fade-scale-on cubic-bezier(.2, 1.23, .25, 1) forwards;
+    animation-duration: var(--builtin-transition-fade-scale-enter-duration, .45s);
+}
+
+.@{prefix}-fade-scale-exit-active {
+    animation: fade-scale-off cubic-bezier(.48, .04, .52, .96) forwards;
+    animation-duration: var(--builtin-transition-fade-scale-exit-duration, .15s);
+}
+
+.@{prefix}-dialog {
+
+    &-mask,
+    &-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    &-mask {
+        z-index: @full-screen-z-index;
+        .use-var(background, dialog-mask-background);
+    }
+
+    &-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: @full-screen-z-index + 1;
+        pointer-events: none;
+    }
+
+    &-content {
+        position: relative;
+        .use-var(width, dialog-content-width);
+        pointer-events: visible;
+
+        &.android {
+            .use-var(width, dialog-content-android-width);
+        }
+    }
+
+    &-container.pre-mount &-content,
+    &-container[class*="-exit-done"] &-content {
+        pointer-events: none;
+    }
+
+    &-part {
+        .use-var(background, dialog-content-background);
+
+        &.android {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-android-border-radius);
+                .use-var(border-top-right-radius, dialog-content-android-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-android-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-android-border-radius);
+            }
+        }
+
+        &.ios {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-border-radius);
+                .use-var(border-top-right-radius, dialog-content-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-border-radius);
+            }
+        }
+    }
+
+    &-header {
+        position: relative;
+
+        &.ios {
+            text-align: center;
+            .use-var(padding-top, dialog-ios-vertical-padding);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(font-size, dialog-header-ios-font-size);
+            .use-var(line-height, dialog-header-ios-line-height);
+            .text-medium();
+
+            &.only-title {
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(color, dialog-header-android-color);
+        }
+    }
+
+    &-body {
+
+        &.ios {
+            .use-var(padding-top, dialog-ios-header-body-gutter);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(padding-bottom, dialog-ios-vertical-padding);
+            .use-var(color, dialog-body-ios-color);
+            .use-var(font-size, dialog-body-ios-font-size);
+            .use-var(line-height, dialog-body-ios-line-height);
+
+            &.sub-title {
+                .use-var(padding-top, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(padding-top, dialog-android-header-body-gutter);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(color, dialog-body-android-color);
+            .use-var(font-size, dialog-body-android-font-size);
+            .use-var(line-height, dialog-body-android-line-height);
+        }
+    }
+
+    &-header,
+    &-body {
+
+        &.left {
+            .set-value-with-rtl(text-align, left);
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            .set-value-with-rtl(text-align, right);
+        }
+    }
+
+    &-header,
+    &-body.sub-title {
+
+        &.android {
+            .use-var(padding-top, dialog-android-vertical-padding);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(font-size, dialog-header-android-font-size);
+            .use-var(line-height, dialog-header-android-line-height);
+        }
+
+        &.ios {
+            .use-var(color, dialog-header-ios-color);
+        }
+    }
+
+    &-footer {
+        display: flex;
+        align-items: center;
+
+        &.android {
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(padding-top, dialog-android-body-footer-gutter);
+            .use-var(padding-bottom, dialog-android-vertical-padding);
+            justify-content: flex-end;
+            .set-value-with-rtl(text-align, right);
+
+            .dialog-footer-button {
+                .use-var(color, dialog-footer-android-color);
+                .use-var(font-size, dialog-footer-android-font-size);
+                .use-var(line-height, dialog-footer-android-line-height);
+
+                &:not(:last-child) {
+                    .use-var-with-rtl(margin-right, dialog-footer-android-button-gutter);
+                }
+            }
+        }
+
+        &.ios {
+            overflow: hidden;
+
+            .dialog-footer-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .use-var(height, dialog-footer-ios-height);
+                .use-var(font-size, dialog-footer-ios-font-size);
+                .use-var(color, dialog-footer-ios-color);
+            }
+
+            &:not(.collapsed):not(.type-button) {
+                .onepx-border-var(top, line-color);
+
+                .dialog-footer-button {
+                    flex: 1;
+
+                    &:not(:last-child) {
+                        .onepx-border-var(right, line-color);
+
+                        [dir='rtl'] & {
+                            .onepx-border-var(left, line-color);
+                            &::after {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.collapsed {
+                flex-direction: column;
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .onepx-border-var(top, line-color);
+                }
+            }
+
+            &.type-button {
+                flex-direction: column;
+                .use-var(padding-left, dialog-ios-horizontal-padding);
+                .use-var(padding-right, dialog-ios-horizontal-padding);
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .use-var(border-radius, dialog-button-footer-border-radius);
+                    .use-var(height, dialog-button-footer-height);
+
+                    &:first-child {
+                        .use-var(color, dialog-button-footer-primary-color);
+                        .use-var(background, dialog-button-footer-primary-background);
+                    }
+
+                    &:not(:first-child) {
+                        .use-var(color, dialog-button-footer-color);
+                        .use-var(margin-top, dialog-button-footer-gutter);
+                    }
+
+                    &:last-child {
+                        .rem(margin-bottom, -7);
+                    }
+                }
+            }
+        }
+    }
+}

package/metaData/components/divider/api.md

@@ -0,0 +1,17 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|hairline|是否使用 0\.5px 线|boolean|true|
+|content|文字|ReactNode|-|
+|align|文字位置|"left" \| "center" \| "right"|'center'|
+|width|分割线宽度（单边），仅在\`align\`为\`center\`时生效|ReactText|-|
+|children|子元素，同 content，优先级低于 content|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|

package/metaData/components/divider/style.md

@@ -0,0 +1,68 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .use-var(padding, divider-padding, '', 0);
+    .use-var(border-color, divider-line-color);
+    border-width: 0;
+    border-style: solid;
+
+    &::before,
+    &::after {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: inherit;
+        border-width: 0;
+        border-color: inherit;
+        border-style: inherit;
+        .use-var(border-top-width, divider-line-thickness);
+    }
+
+    &::before {
+        content: '';
+    }
+
+    &--hairline {
+        &::before,
+        &::after {
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
+
+            @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+                transform: scaleY(0.33333333);
+            }
+        }
+    }
+
+    &--with-text {
+        .use-var(font-size, divider-content-font-size);
+        .use-var(color, divider-content-font-color);
+
+        &::before {
+            .use-var-with-rtl(margin-right, divider-content-padding);
+        }
+
+        &::after {
+            content: '';
+            .use-var-with-rtl(margin-left, divider-content-padding);
+        }
+    }
+
+    &--with-width {
+        &::before,
+        &::after {
+            flex-shrink: 0;
+            flex-grow: 0;
+        }
+    }
+
+    &--text-left::before {
+        .use-var(max-width, divider-left-width);
+    }
+    &--text-right::after {
+        .use-var(max-width, divider-right-width);
+    }
+}

package/metaData/components/dropdown/api.md

@@ -0,0 +1,72 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|showDropdown|是否展开下拉框|boolean|必填|
+|options|展示的选项,优先级低于dropdownNode|OptionsItem\[\]|[]|
+|children|自定义下拉框元素|ReactNode|-|
+|onCancel|取消选择|() =\> void|必填|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|extraNode|下拉框底部元素|ReactNode|-|
+|top|定位下拉框出现的位置|number|-|
+|bottom|向上展开时下拉框出现的位置|number|-|
+|direction|展开方向|"up" \| "down"|"down"|
+|height|受控模式，下拉框高度|number|-|
+|maxHeight|下拉框最大的高度|number|500|
+|clickOtherToClose|点击其他区域是否取消选择|boolean|true|
+|touchToClose|是否在触发touchstart时就取消选择，否则在click之后再取消选择|boolean|true|
+|dropdownAnimationTimeout|展开收起动画的时间|number|300|
+|dropdownAnimationFunction|展开收起动画曲线函数|string|"cubic-bezier(0.32, 0.96, 0.6, 1)"|
+|showMask|是否展示遮罩层|boolean|true|
+|maskAnimationTimeout|蒙层动画时长|number|500|
+|maskAnimationFunction|蒙层动画函数|string|"cubic-bezier(0.32, 0.96, 0.6, 1)"|
+|useColumn|使用多列标签样式，传 true 为 4 列，传数字为指定 n 列|number \| boolean|false|
+|optionIcon|选项附带图标|ReactNode|-|
+|mountOnEnter|是否在打开下拉框时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|getAnchorElement|用于定位的元素，优先级低于top/bottom|() =\> HTMLElement|当前DOM所在位置的父元素|
+|isStopTouchEl|点击某元素时是否阻止关闭面板, 优先级高于\`getStopTouchElement\`，当 clickOtherToClose=true 时有效|(el: HTMLElement) =\> boolean|-|
+|getStopTouchElements|可阻止关闭面板的元素，当 clickOtherToClose=true 时有效|() =\> HTMLElement\[\]|当前组件的父元素|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+|getPortalContainer|获取挂载容器|() =\> HTMLElement|-|
+|multiple|是否支持多选|boolean|false|
+|defaultSelectedValue|默认选中值|string \| number \| ReactText\[\]|-|
+|selectedValue|当前选择的选项标识|string \| number \| ReactText\[\]|-|
+|onOptionClick|点击选项时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((selected: boolean, val: ReactText, op: OptionsItem) =\> void)|-|
+|onOptionChange|当选项改变时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((vals: ReactText\[\], op: OptionsItem) =\> void)|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> Dropdown.Options
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|options|展示的选项列表|OptionsItem\[\]|必填|
+|useColumn|使用多列标签样式，传 true 为 4 列，传数字为指定 n 列|number \| boolean|false|
+|icon|选项列表右侧图标|ReactNode|-|
+|multiple|是否支持多选|boolean|false|
+|defaultSelectedValue|默认选中值|string \| number \| ReactText\[\]|-|
+|selectedValue|当前选择的选项标识|string \| number \| ReactText\[\]|-|
+|onOptionClick|点击选项时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((selected: boolean, val: ReactText, op: OptionsItem) =\> void)|-|
+|onOptionChange|当选项改变时触发的回调函数|((val: ReactText, op: OptionsItem) =\> void) \| ((vals: ReactText\[\], op: OptionsItem) =\> void)|-|
+
+> OptionsItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|label|选项名称|ReactNode|
+|value|选项标识|ReactText|
+|disabled|选项是否可用，默认false表示可用|boolean|
+
+> DropdownOptionsRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|