From fe1a5c7701e192f539e017e27c7358651c029e54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?= <2328204591@qq.com> Date: Tue, 23 Sep 2025 11:19:34 +0800 Subject: [PATCH] =?UTF-8?q?feat(doc):=20=E6=96=B0=E5=A2=9EOScrollbar?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__docs__/__case__/ScrollbarH.vue | 42 +++++++ .../__docs__/__case__/ScrollbarUsage.vue | 109 ++++++++++++++++++ .../__docs__/__case__/ScrollbarV.vue | 47 ++++++++ .../src/scrollbar/__docs__/index.en-US.md | 16 +++ .../src/scrollbar/__docs__/index.zh-CN.md | 16 +++ .../src/scrollbar/style/theme-ascend.scss | 7 ++ .../src/scrollbar/style/theme-kunpeng.scss | 7 ++ .../src/scrollbar/style/theme-openeuler.scss | 7 ++ packages/opendesign/src/scrollbar/types.ts | 39 +++++-- 9 files changed, 278 insertions(+), 12 deletions(-) create mode 100644 packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarH.vue create mode 100644 packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarUsage.vue create mode 100644 packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarV.vue create mode 100644 packages/opendesign/src/scrollbar/__docs__/index.en-US.md create mode 100644 packages/opendesign/src/scrollbar/__docs__/index.zh-CN.md diff --git a/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarH.vue b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarH.vue new file mode 100644 index 00000000..ec196cb2 --- /dev/null +++ b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarH.vue @@ -0,0 +1,42 @@ + + + +### 横向滚动条 + + + +### Horizontal scroll bar + + + + diff --git a/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarUsage.vue b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarUsage.vue new file mode 100644 index 00000000..f7578527 --- /dev/null +++ b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarUsage.vue @@ -0,0 +1,109 @@ + + + +### 使用 + +两种尺寸：`medium`、`small` ； + +四种显示方式：`auto`、`always`、`hover`、`never` ； + +滚动条显示方式为 `auto` 时,可以通过 `duration` 属性控制滚动条在停止滚动后持续显示的时间； + + + +Two sizes: `medium`、`small`. + +Four display methods: `auto`、`always`、`hover` and `never`. + +When the display mode of the scroll bar is `auto`, the duration of the scroll bar's continuous display after it stops scrolling can be controlled through the `duration` attribute. + +### Usage + + + + diff --git a/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarV.vue b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarV.vue new file mode 100644 index 00000000..13b5bd07 --- /dev/null +++ b/packages/opendesign/src/scrollbar/__docs__/__case__/ScrollbarV.vue @@ -0,0 +1,47 @@ + + + +### 纵向滚动条 + + + +### Vertical scroll bar + + + + diff --git a/packages/opendesign/src/scrollbar/__docs__/index.en-US.md b/packages/opendesign/src/scrollbar/__docs__/index.en-US.md new file mode 100644 index 00000000..352e8a33 --- /dev/null +++ b/packages/opendesign/src/scrollbar/__docs__/index.en-US.md @@ -0,0 +1,16 @@ +--- +sidebar: OScrollbar +kind: operator +--- + +# Scroll bar + +## 示例 + + + + + +## Api + + diff --git a/packages/opendesign/src/scrollbar/__docs__/index.zh-CN.md b/packages/opendesign/src/scrollbar/__docs__/index.zh-CN.md new file mode 100644 index 00000000..31262bf8 --- /dev/null +++ b/packages/opendesign/src/scrollbar/__docs__/index.zh-CN.md @@ -0,0 +1,16 @@ +--- +sidebar: OScrollbar 滚动条 +kind: operator +--- + +# 滚动条 + +## 示例 + + + + + +## Api + + diff --git a/packages/opendesign/src/scrollbar/style/theme-ascend.scss b/packages/opendesign/src/scrollbar/style/theme-ascend.scss index e69de29b..7dc078e5 100644 --- a/packages/opendesign/src/scrollbar/style/theme-ascend.scss +++ b/packages/opendesign/src/scrollbar/style/theme-ascend.scss @@ -0,0 +1,7 @@ +.o-scrollbar { + --scrollbar-height: 100%; +} + +.o-scrollbar-both { + --scrollbar-height: 100%; +} \ No newline at end of file diff --git a/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss b/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss index e69de29b..7dc078e5 100644 --- a/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss +++ b/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss @@ -0,0 +1,7 @@ +.o-scrollbar { + --scrollbar-height: 100%; +} + +.o-scrollbar-both { + --scrollbar-height: 100%; +} \ No newline at end of file diff --git a/packages/opendesign/src/scrollbar/style/theme-openeuler.scss b/packages/opendesign/src/scrollbar/style/theme-openeuler.scss index e69de29b..7dc078e5 100644 --- a/packages/opendesign/src/scrollbar/style/theme-openeuler.scss +++ b/packages/opendesign/src/scrollbar/style/theme-openeuler.scss @@ -0,0 +1,7 @@ +.o-scrollbar { + --scrollbar-height: 100%; +} + +.o-scrollbar-both { + --scrollbar-height: 100%; +} \ No newline at end of file diff --git a/packages/opendesign/src/scrollbar/types.ts b/packages/opendesign/src/scrollbar/types.ts index b3f82550..4a594b63 100644 --- a/packages/opendesign/src/scrollbar/types.ts +++ b/packages/opendesign/src/scrollbar/types.ts @@ -6,53 +6,65 @@ export type ScrollerSizeT = (typeof ScrollerSizeTypes)[number]; export const baseScrollarProps = { /** - * 禁用横向滚动 + * @zh-CN 隐藏横向滚动条 + * @en-US Hide the horizontal scroll bar. */ disabledX: { type: Boolean, - required: false, + required: false as const, }, /** - * 禁用纵向滚动 + * @zh-CN 隐藏纵向滚动条 + * @en-US Hide the vertical scroll bar. */ disabledY: { type: Boolean, }, - /** - * 滚动条在停止滚动多长时间后隐藏, ms + * @zh-CN 滚动条在停止滚动多长时间后隐藏, 单位：ms + * @en-US How long after the scroll bar stops scrolling is hidden, unit: ms. + * @default 600 */ duration: { type: Number, default: 600, }, /** - * 滚动条显示控制 + * @zh-CN 滚动条显示控制 * always：一直显示 * auto: 滚动中、滚动后hover滚动条、拖拽时显示 * hover: 滚动条hover时显示 * never: 不显示滚动条 + * @en-US The scroll bar displays the control. + * always：Always displayed. + * auto: The hover bar is displayed while scrolling, after scrolling, and when dragging. + * hover: It is displayed when the scroll bar hovers. + * never: The scroll bar is not displayed. + * @default 'auto' */ showType: { type: String as PropType<'auto' | 'always' | 'hover' | 'never'>, default: 'auto', }, /** - * 滚动条尺寸大小 + * @zh-CN 滚动条尺寸大小 + * @en-US The size of the scroll bar. + * @default 'medium' */ size: { type: String as PropType, default: 'medium', }, /** - * showType=always时，是否根据滚动容器滚动高度变化自动刷新滚动条 + * @zh-CN showType = always时，是否根据滚动容器滚动高度变化自动刷新滚动条 + * @en-US When showType = always, does the scroll bar automatically refresh according to the change in the scroll height of the scroll container. */ autoUpdateOnScrollSize: { type: Boolean, }, - /** - * 滚动条尺寸大小 + * @zh-CN 自定义滚动条类 + * @en-US Custom scroll bar class. */ barClass: { type: String, @@ -63,7 +75,8 @@ export type BaseScrollerPropsT = ExtractPropTypes; export const scrollerProps = { ...baseScrollarProps, /** - * 滚动容器类 + * @zh-CN 滚动容器类 + * @en-US Rolling container class. */ wrapClass: { type: [String, Array, Object] as PropType, @@ -75,7 +88,9 @@ export type ScrollerPropsT = ExtractPropTypes; export const scrollbarProps = { ...baseScrollarProps, /** - * 滚动关联目标容器,支持body、元素ref、HTMLElement + * @zh-CN 滚动关联目标容器,支持body、元素ref、HTMLElement + * @en-US Scroll to associate the target container, supporting body, element ref, and HTMLElement. + * @default null */ target: { type: [String, Object] as PropType, -- Gitee