diff --git a/docs/en-US/component/scrollbar.md b/docs/en-US/component/scrollbar.md index 7ca56a963c..892fe91d03 100644 --- a/docs/en-US/component/scrollbar.md +++ b/docs/en-US/component/scrollbar.md @@ -43,19 +43,23 @@ scrollbar/manual-scroll ### Attributes -| Name | Description | Type | Default | -| ---------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------- | -| height | height of scrollbar | ^[string] / ^[number] | — | -| max-height | max height of scrollbar | ^[string] / ^[number] | — | -| native | whether to use the native scrollbar style | ^[boolean] | false | -| wrap-style | style of wrap container | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | — | -| wrap-class | class of wrap container | ^[string] | — | -| view-style | style of view | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | — | -| view-class | class of view | ^[string] | — | -| noresize | do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance | ^[boolean] | false | -| tag | element tag of the view | ^[string] | div | -| always | always show scrollbar | ^[boolean] | false | -| min-size | minimum size of scrollbar | ^[number] | 20 | +| Name | Description | Type | Default | +| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------- | +| height | height of scrollbar | ^[string] / ^[number] | — | +| max-height | max height of scrollbar | ^[string] / ^[number] | — | +| native | whether to use the native scrollbar style | ^[boolean] | false | +| wrap-style | style of wrap container | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | — | +| wrap-class | class of wrap container | ^[string] | — | +| view-style | style of view | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | — | +| view-class | class of view | ^[string] | — | +| noresize | do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance | ^[boolean] | false | +| tag | element tag of the view | ^[string] | div | +| always | always show scrollbar | ^[boolean] | false | +| min-size | minimum size of scrollbar | ^[number] | 20 | +| id ^(2.4.0) | id of view | ^[string] | — | +| role ^(2.4.0) ^(a11y) | role of view | ^[string] | — | +| aria-label ^(2.4.0) ^(a11y) | aria-label of view | ^[string] | — | +| aria-orientation ^(2.4.0) ^(a11y) | aria-orientation of view | ^[enum]`'horizontal' \| 'vertical'` | — | ### Events diff --git a/packages/components/scrollbar/src/scrollbar.ts b/packages/components/scrollbar/src/scrollbar.ts index b70f6f1791..54b647cfcc 100644 --- a/packages/components/scrollbar/src/scrollbar.ts +++ b/packages/components/scrollbar/src/scrollbar.ts @@ -74,6 +74,25 @@ export const scrollbarProps = buildProps({ type: Number, default: 20, }, + /** + * @description id of view + */ + id: String, + /** + * @description role of view + */ + role: String, + /** + * @description aria-label of view + */ + ariaLabel: String, + /** + * @description aria-orientation of view + */ + ariaOrientation: { + type: String, + values: ['horizontal', 'vertical'], + }, } as const) export type ScrollbarProps = ExtractPropTypes diff --git a/packages/components/scrollbar/src/scrollbar.vue b/packages/components/scrollbar/src/scrollbar.vue index 16d43efc1d..be91ca8943 100644 --- a/packages/components/scrollbar/src/scrollbar.vue +++ b/packages/components/scrollbar/src/scrollbar.vue @@ -1,11 +1,20 @@