@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/radio/style.md

@@ -0,0 +1,57 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-radio {
+    display: inline-flex;
+    align-items: center;
+
+    .radio-icon {
+        display: inline-flex;
+        align-items: center;
+        .use-var(font-size, checkbox-icon-font-size);
+        .use-var(color, checkbox-icon-color);
+
+        &.checked {
+            .use-var(color, checkbox-icon-checked-color);
+        }
+
+        &.disabled {
+            .use-var(color, checkbox-icon-disabled-color);
+        }
+
+        &.checked.disabled {
+            .use-var(color, checkbox-icon-checked-disabled-color);
+        }
+
+        .@{prefix}-icon-circle-disabled path {
+            .use-var(stroke, line-color);
+        }
+    }
+
+    .radio-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .radio-icon + .radio-text {
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
+    }
+
+    &.disabled .radio-text {
+        .use-var(opacity, checkbox-text-disabled-opacity);
+    }
+
+    &.block {
+        width: 100%;
+    }
+
+    &.justify {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+.@{prefix}-radio-group {
+    .@{prefix}-radio:not(:last-child, .block) {
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
+    }
+}

package/metaData/components/rate/api.md

@@ -0,0 +1,25 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|defaultValue|默认评分|number|0|
+|value|当前评分(受控)|number|-|
+|count|图标数量|number|5|
+|step|每个图标的分值|number|1|
+|color|选中时颜色|string|-|
+|normalColor|未选中时颜色|string|-|
+|disabledColor|禁用时颜色|string|-|
+|allowHalf|是否允许半选|boolean|false|
+|disabled|是否为禁用状态|boolean|false|
+|size|自定义图标大小|ReactText|-|
+|offset|自定义图标间距(点击热区包含间距)|ReactText|-|
+|icons|自定义图标|\{ normal: RateIconType; active: RateIconType; halfActive?: RateIconType; \}|-|
+|onChange|当前分值变化触发的事件|(value: number) =\> void|(value) => void|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

package/metaData/components/rate/style.md

@@ -0,0 +1,63 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-rate {
+    display: inline-flex;
+
+    &.disabled {
+        cursor: not-allowed;
+    }
+
+    &-icon-wrap {
+        .use-var(padding, rate-icon-offset);
+        .use-var(font-size, rate-icon-size);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    &-icon-wrap,
+    &-icon {
+
+        &.active,
+        &.half-active {
+            .use-var(color, rate-icon-active-color);
+
+            &.disabled {
+                .use-var(color, rate-icon-disabled-active-color);
+            }
+        }
+
+        &.normal {
+            .use-var(color, rate-icon-normal-color);
+        }
+    }
+
+    &-icon {
+
+        &.half-active {
+            position: absolute;
+            z-index: 1;
+
+            .style-with-rtl({
+                transform: scaleX(-1);
+            });
+        }
+    }
+
+    &-icon-click-half {
+        width: 50%;
+        height: 100%;
+        display: inline-block;
+        position: absolute;
+        z-index: 2;
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+}

package/metaData/components/search-bar/api.md

@@ -0,0 +1,89 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|shape|输入框形状|"square" \| "round"|"square"|
+|textAlign|搜索栏内容位置|"left" \| "center" \| "right"|"left"|
+|prepend|搜索栏头部插入的内容|ReactNode \| ((focusing: boolean, value: string) =\> ReactNode)|-|
+|append|搜索栏尾部要插入的内容, 默认在搜索栏激活态时会插入一个按钮|ReactNode \| ((focusing: boolean, value: string) =\> ReactNode)|(focusing) => focusing ? (<span>取消</span>) : null|
+|actionButton|搜索栏最右侧要插入的按钮，默认情况下插入一个取消按钮|ReactNode|<CancelButton />|
+|enableAssociation|是否开启搜索联想框功能|boolean|false|
+|associationVisible|（受控模式）搜索联想框的可见态|boolean|-|
+|associationShowType|非受控模式下，搜索联想框的展示时机 \- focus 仅聚焦时 \- value 搜索词不为空 \- default 搜索栏被聚焦或者搜索词不为空 \- always 一直展示|"value" \| "focus" \| "default" \| "always"|"default"|
+|associationItems|每一项搜索内容|SearchAssociationBaseItem\[\]|-|
+|highlightMode|搜索结果高亮模式，可以是内置的两种模式，或者一个自定义的高亮函数(接受选项内容content、搜索关键字keyword、默认的高亮class，返回一个ReactNode) \- prefix 高亮最长前缀匹配字符串 \- contain 高亮所有搜索关键字 \- none 关闭高亮|SearchAssociationHighlightMode|"none"|
+|highlightStyle|要为高亮结果添加的样式，仅非自定高亮模式下生效|CSSProperties|-|
+|highlightClassName|要为高亮结果添加的class，仅非自定义高亮模式下生效|string|-|
+|onCancel|右侧取消按钮的点击回调|() =\> void|-|
+|onAssociationItemClick|每行搜索结果的点击回调|(item: SearchAssociationBaseItem, index: number, event: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onAssociationClick|搜索联想框整体被点击的回调|(event: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|renderAssociationItem|自定义渲染每行搜索结果|(item: SearchAssociationBaseItem, index: number, node: ReactNode) =\> ReactNode|-|
+|renderAssociation|自定义渲染搜索联想框整体内容|(Content: ReactNode) =\> ReactNode|-|
+|type|输入框类型|string|"text"|
+|pattern|检查控件值的正则表达式|string|-|
+|inputClass|输入框dom自定义类名|string|-|
+|inputStyle|输入框dom自定义样式|CSSProperties|-|
+|nativeProps|其他未列出的原生属性，优先级低于已列出的组件属性|InputHTMLAttributes\<HTMLInputElement\>|-|
+|ariaLabel|无障碍label|string|-|
+|id|输入框的id|string|-|
+|name|输入框的name|string|-|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|value|绑定值，传入即受控|string|-|
+|defaultValue|默认值|string|-|
+|maxLength|最大输入长度|number|-|
+|placeholder|占位文本|string|-|
+|disabled|输入框是否禁用|boolean|-|
+|readOnly|是否只读|boolean|-|
+|autoFocus|是否自动获取焦点，开启后会触发一次onClick事件|boolean|-|
+|blockChangeWhenCompositing|当 ios 输入中文时，输拼音的过程不触发onChange，仅确认选择后触发|boolean|false|
+|validator|正则验证，不符合验证的不允许输入|RegExp \| ((value: string) =\> boolean)|-|
+|blurBeforeFocus|在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效|boolean|-|
+|clearable|是否有清除按钮|boolean|-|
+|clearShowType|清除按钮展示时机：focus \- 聚焦时展示 value \- 有值则展示 always \- 始终展示|"value" \| "focus" \| "always"|"focus"|
+|preventEventWhenClearing|在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件|boolean|true|
+|clearIcon|清除按钮类型，也可自定义|ReactNode|\<IconClear className="clear-icon" /\>|
+|onClear|按下清除按钮回调|(e: TouchEvent\<HTMLElement\>) =\> void|-|
+|prefix|输入框前置内容，在输入框内部，也可自定义|ReactNode|-|
+|suffix|输入框后置内容，在输入框内部，也可自定义|ReactNode|-|
+|onChange|数据改变时触发（失去焦点时）|(e: ChangeEvent\<HTMLInputElement\>, value: string) =\> void|-|
+|onInput|数据改变时触发|(e: ChangeEvent\<HTMLInputElement\>, value: string) =\> void|-|
+|onFocus|输入框聚焦时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onBlur|输入框失去焦点时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onClick|点击输入框事件|(e: MouseEvent\<HTMLInputElement, MouseEvent\>) =\> void|-|
+|onKeyUp|原生的keyup事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onKeyDown|原生的keydown事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onKeyPress|原生的keypress事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onPressEnter|按下回车键时触发|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|input|原生输入框 DOM|HTMLInputElement|
+|toggleAssociation|仅非受控模式下生效，手动控制搜索联想框的显隐，如果没有传入值则默认将显隐状态反转|(newVisible?: boolean) =\> void|
+
+> SearchBarShape
+
+```
+"square" | "round"
+```
+
+> SearchAssociationShowType
+
+```
+"value" | "focus" | "default" | "always"
+```
+
+> SearchAssociationBaseItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|content|基础内容|string|
+
+> SearchAssociationHighlightMode
+
+```
+"prefix" | "contain" | "none" | (content: string, keyword: string, defaultHighlightClassName: string) => ReactNode
+```

package/metaData/components/search-bar/style.md

@@ -0,0 +1,115 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-search-bar {
+    &-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+        .use-var(padding, search-bar-padding);
+        .use-var(background-color, search-bar-background-color);
+    }
+    &-square {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-square-shape-border-radius);
+        }
+    }
+    &-round {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-round-shape-border-radius);
+        }
+    }
+    &-wrap {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        .use-var(height, search-bar-input-wrapper-height);
+        .use-var(font-size, search-bar-input-wrapper-font-size);
+        .use-var(padding, search-bar-input-wrapper-padding);
+        .use-var(background-color, search-bar-input-wrapper-background-color);
+    }
+    &-input {
+        flex: 1;
+        background-color: transparent;
+        .use-var(color, font-color);
+        .use-var(height, search-bar-input-height);
+        .use-var(caret-color, search-bar-input-caret-color);
+        &-left {
+            .set-value-with-rtl(text-align, left);
+        }
+        &-right {
+            .set-value-with-rtl(text-align, right);
+        }
+        &-center {
+            text-align: center;
+        }
+
+        &::placeholder {
+            .use-var(color, search-bar-input-placeholder-color);
+        }
+
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+
+    &-prefix,
+    &-suffix,
+    &-clear {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+    }
+
+    &-prefix {
+        .use-var-with-rtl(margin-right, search-bar-prefix-margin-right);
+    }
+
+    &-clear {
+        .use-var(color, search-bar-clear-icon-color);
+        .use-var(font-size, search-bar-clear-icon-font-size);
+        .use-var-with-rtl(padding-left, search-bar-clear-icon-padding-left);
+    }
+
+    &-search-icon {
+        .use-var(color, search-bar-search-icon-color);
+        .use-var(font-size, search-bar-search-icon-font-size);
+    }
+
+    &-cancel-btn {
+        .use-var-with-rtl(margin-left, search-bar-cancel-btn-margin-left);
+        .use-var(color, search-bar-cancel-btn-color);
+        .use-var(font-size, search-bar-cancel-btn-font-size);
+    }
+
+    &-association {
+        position: absolute;
+        left: 0;
+        right: 0;
+        .use-var(background-color, search-bar-association-background-color);
+        top: 100%;
+        display: none;
+
+        &-visible {
+            display: block;
+        }
+
+        &-item {
+            .use-var(height, search-bar-association-item-height);
+            display: flex;
+            align-items: center;
+            position: relative;
+            .use-var(color, search-bar-association-item-color);
+            .use-var(padding, search-bar-association-item-padding);
+            .use-var(font-size, search-bar-association-item-font-size);
+
+            &:not(:last-child) {
+                .onepx-border-var(bottom, line-color);
+            }
+
+            &-highlight {
+                .use-var(color, search-bar-association-item-highlight-color)
+            }
+        }
+    }
+}

package/metaData/components/show-monitor/api.md

@@ -0,0 +1,26 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|getScrollContainer|滚动视口选择器|() =\> HTMLElement \| Window|() => window|
+|throttle|节流粒度(ms)|number|300|
+|listenResize|是否监听 resize|boolean|true|
+|listenScroll|是否监听 scroll|boolean|true|
+|once|只监听变化一次，为 true 时仅在进入视口时触发一次 onVisibleChange|boolean|false|
+|overflow|是否为局部滚动|boolean|false|
+|threshold|元素进入视口区域触发回调比例，\[0\-1\]|number|0|
+|offset|预加载提前量 \[offsetTop, offsetRight, offsetBottom, offsetLeft\]。 如果类型为 number，等效为\[number, number, number, number\]； 如果类型为 \[number1, number2\], 等效为\[number1, 0, number2, 0\]； 支持 Intersection Observer 的浏览器需要搭配 getScrollContainer, 设置父级容器|number \| \[number, number\] \| \[number, number, number, number\]|0|
+|children|子节点|ReactNode|必填|
+|disabled|是否禁用监听|boolean|false|
+|onVisibleChange|进入或离开视口的回调函数|(visible: boolean, node: HTMLDivElement) =\> void|必填|
+|onClick|点击组件的回调事件|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|checkVisible|忽略元素前后状态，手动检查元素是否在视口内，触发onVisibleChange回调函数|() =\> boolean|
+|flushVisibleStatus|重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）|() =\> void|

package/metaData/components/show-monitor/style.md

@@ -0,0 +1 @@
+// 这里啥也没有，但是为了兼容 babel-plugin-import的统一引用，还是需要创建下文件

package/metaData/components/skeleton/api.md

@@ -0,0 +1,93 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|是否显示标题占位图|boolean \| SkeletonTitleProps|true|
+|paragraph|是否显示段落占位图|boolean \| SkeletonParagraphProps|true|
+|avatar|是否显示头像占位图|boolean \| SkeletonAvatarProps|false|
+|grid|是否显示金刚位占位图（如该参数非空时，默认展示四列金刚位，且不展示标题/段落/头像占位符）|boolean \| SkeletonGridProps|false|
+|showAnimation|是否展示动画效果|boolean|true|
+|animation|加载动画效果，可选“扫光”、“呼吸”两种效果|"gradient" \| "breath"|"gradient"|
+|animationGradientColor|扫光动效高光颜色|string|"rgba(0, 0, 0, 0.04)"|
+|backgroundColor|占位块背景色|string|"#F7F8FA"|
+|children|子元素|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+
+> Skeleton.Node
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Title
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|width|标题占位图宽度|ReactText|"40%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Paragraph
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|rows|段落占位图的行数|number|3|
+|width|段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度|string \| number \| ReactText\[\]|"60%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Avatar
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> Skeleton.Grid
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|columns|金刚位列数|number|4|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonTitleProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|width|标题占位图宽度|ReactText|"40%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonParagraphProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|rows|段落占位图的行数|number|3|
+|width|段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度|string \| number \| ReactText\[\]|"60%"|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonAvatarProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonGridProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|columns|金刚位列数|number|4|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|

package/metaData/components/skeleton/style.md

@@ -0,0 +1,147 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-skeleton {
+    position: relative;
+    .use-var(color, skeleton-gradient-animation-color);
+}
+
+.@{prefix}-skeleton-title {
+    .use-var(height, skeleton-title-height);
+}
+
+.@{prefix}-skeleton-paragraph {
+    &-line {
+        width: 100%;
+        .use-var(height, skeleton-paragraph-height);
+    }
+
+    &-line + &-line {
+        .use-var(margin-top, skeleton-paragraph-margin-top);
+    }
+}
+
+.@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
+    .use-var(width, skeleton-avatar-size);
+    .use-var(height, skeleton-avatar-size);
+    border-radius: 100%;
+    transform: translateZ(0);
+}
+
+.@{prefix}-skeleton-content {
+    width: 100%;
+
+    .@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
+        .use-var(margin-top, skeleton-large-gutter);
+    }
+}
+
+.@{prefix}-skeleton-with-avatar {
+    display: flex;
+    align-items: flex-start;
+
+    .@{prefix}-skeleton-avatar {
+        flex: none;
+    }
+
+    .@{prefix}-skeleton-content {
+        .@{prefix}-skeleton-title {
+            .use-var(margin-top, skeleton-medium-gutter);
+        }
+    }
+
+    .@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
+        .use-var-with-rtl(margin-left, skeleton-medium-gutter);
+    }
+}
+
+.@{prefix}-skeleton-grid {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &-icon {
+        .use-var(width, skeleton-grid-icon-size);
+        .use-var(height, skeleton-grid-icon-size);
+    }
+    &-text {
+        .use-var(margin-top, skeleton-medium-gutter);
+        .use-var(width, skeleton-grid-text-width);
+        .use-var(height, skeleton-grid-text-height);
+    }
+}
+
+.@{prefix}-skeleton-node {
+    display: inline-block;
+}
+
+.@{prefix}-skeleton-item {
+    position: relative;
+    overflow: hidden;
+    .use-var(border-radius, skeleton-border-radius);
+    .use-var(background-color, skeleton-background-color);
+}
+
+.@{prefix}-skeleton-animation-item {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 35%,
+        currentColor 50%,
+        rgba(255, 255, 255, 0) 65%
+    );
+    transform-origin: top left;
+    animation-name: skeleton-gradient;
+    animation-iteration-count: infinite;
+    .use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
+    .use-var(animation-duration, skeleton-gradient-animation-duration);
+    .style-with-rtl({
+        animation-name: skeleton-gradient-reverse;
+    });
+}
+.@{prefix}-skeleton-animation-breath {
+    animation: skeleton-breath linear infinite;
+    .use-var(animation-duration, skeleton-breath-animation-duration);
+}
+
+@keyframes skeleton-gradient {
+    0% {
+        transform: translateX(-65%) skewX(-45deg);
+    }
+
+    100% {
+        transform: translateX(135%) skewX(-45deg);
+    }
+}
+
+@keyframes skeleton-gradient-reverse {
+    0% {
+        transform: translateX(65%) skewX(45deg);
+    }
+
+    100% {
+        transform: translateX(-135%) skewX(45deg);
+    }
+}
+
+@keyframes skeleton-breath {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        .use-var(opacity, skeleton-breath-opacity);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/metaData/components/slider/api.md

@@ -0,0 +1,34 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+|disabled|是否禁用|boolean|false|
+|useRange|使用范围选择|boolean|根据 传入初始参数判断，没有则为 false|
+|useAnimation|非点击状态使用动画|boolean|true|
+|min|最小值|number|0|
+|max|最大值|number|100|
+|defaultValue|默认初始值|number \| \[number, number\]|-|
+|value|基础值，组件受控|number \| \[number, number\]|-|
+|step|最小单位|number|1|
+|type|组件方向|"horizontal" \| "vertical"|"horizontal"|
+|showTooltip|是否展示气泡|"auto" \| "always" \| "never"|"auto"|
+|marks|滑动条节点配置|number \| number\[\] \| Record\<string, ReactNode\>|-|
+|showMarks|是否展示标签底部文案|boolean|false|
+|useMarkOnly|是否只可用标志的值，覆盖 step|boolean|false|
+|prefixLabel|前缀 icon 或者 文案|ReactNode \| ((value: number \| \[\.\.\.\]) =\> ReactNode)|-|
+|suffixLabel|后缀 icon 或者 文案|ReactNode \| ((value: number \| \[\.\.\.\]) =\> ReactNode)|-|
+|size|组件横条粗细，单位 px|ReactText|2|
+|draggableTrackOnly|只允许拖动滑块 默认 false|boolean|false|
+|formatTooltip|自定义气泡内容|(value: number) =\> ReactNode|-|
+|onAfterChange|修改后事件，时机同 touchend|(value: number \| \[number, number\]) =\> void|-|
+|onChange|实时修改事件|(value: number \| \[number, number\]) =\> void|-|
+|renderThumb|自定义滑块|(value: number) =\> ReactNode|-|
+|renderThumbPopover|自定义滑块的Popover，优先级高于formatTooltip。value表示当前滑动进度，visible表示气泡的可见性，index表示当前滑块索引，thumbEl表示当前滑块元素。|(config: \{ value: number; visible: boolean; index: number; thumbEl: ReactNode; \}) =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|