From d340e1ccad1125f16e7dfdbe36851b6e86c05b58 Mon Sep 17 00:00:00 2001 From: khairulhaaziq Date: Sun, 16 Jul 2023 02:34:56 +0800 Subject: [PATCH] scrollarea and style code --- docs/.vitepress/theme/style.css | 4 + docs/components/prose/ProseCodeInline.vue | 2 + docs/content/components/scroll-area.md | 138 ++++++++-------------- 3 files changed, 55 insertions(+), 89 deletions(-) diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 22589cf4c..0d394e312 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -115,4 +115,8 @@ [data-radix-popper-content-wrapper] { z-index: 1000; +} + +.vp-doc :not(pre) > code { + @apply px-0.5 rounded-sm !bg-green12 !text-green-500; } \ No newline at end of file diff --git a/docs/components/prose/ProseCodeInline.vue b/docs/components/prose/ProseCodeInline.vue index bdb9c562b..701899fac 100644 --- a/docs/components/prose/ProseCodeInline.vue +++ b/docs/components/prose/ProseCodeInline.vue @@ -10,6 +10,8 @@ const props = withDefaults(defineProps(), { \ No newline at end of file diff --git a/docs/content/components/scroll-area.md b/docs/content/components/scroll-area.md index b119eb621..865ab4a4e 100644 --- a/docs/content/components/scroll-area.md +++ b/docs/content/components/scroll-area.md @@ -58,21 +58,23 @@ npm install radix-vue Import all parts and piece them together. -```jsx -import * as ScrollArea from 'radix-vue'; - -export default () => ( - - - - - - - - - - -); +```vue + + + ``` ## API Reference @@ -80,9 +82,9 @@ export default () => ( ### Root Contains all the parts of a scroll area. -``` + - Describes the nature of scrollbar visibility, similar to how the - scrollbar preferences in MacOS control visibility of native - scrollbars. -
-
- "auto" means that scrollbars are visible when content is overflowing - on the corresponding orientation. -
- "always" means that scrollbars are always visible regardless - of whether the content is overflowing. -
- "scroll" means that scrollbars are visible when the user is - scrolling along its corresponding orientation. -
- "hover" when the user is scrolling along its corresponding - orientation and when the user is hovering over the scroll area. - - ), + default: '"hover"', + description: ' Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.

"auto" means that scrollbars are visible when content is overflowing on the corresponding orientation.
"always" means that scrollbars are always visible regardless of whether the content is overflowing.
"scroll" means that scrollbars are visible when the user is scrolling along its corresponding orientation.
"hover" when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.', }, { name: 'scrollHideDelay', type: 'number', default: '600', - description: ( - - If type is set to either "scroll" or{' '} - "hover", this prop determines the length of time, in - milliseconds, before the scrollbars are hidden after the user stops - interacting with scrollbars. - - ), + description: ' If type is set to either "scroll" or "hover", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.', }, { name: 'dir', required: false, - type: '"ltr" | "rtl"', + type: '"ltr" | "rtl"', typeSimple: 'enum', - description: ( - - The reading direction of the scroll area. If omitted, inherits - globally from DirectionProvider or assumes LTR - (left-to-right) reading mode. - - ), + description: ' The reading direction of the scroll area. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.', }, - ]} + ]" /> -``` + ### Viewport The viewport area of the scroll area. -``` + -``` + ### Scrollbar The vertical scrollbar. Add a second `Scrollbar` with an `orientation` prop to enable horizontal scrolling. -``` + -``` + ### Thumb -The thumb to be used in `ScrollArea.Scrollbar`. -``` +The thumb to be used in `ScrollAreaScrollbar`. + -``` + ### Corner The corner where both vertical and horizontal scrollbars meet. -``` + -``` + ## Accessibility In most cases, it's best to rely on native scrolling and work with the customization options available in CSS. When that isn't enough, `ScrollArea` provides additional customizability while maintaining the browser's native scroll behavior (as well as accessibility features, like keyboard scrolling).