Skip to content

Commit

Permalink
scrollarea and style code
Browse files Browse the repository at this point in the history
  • Loading branch information
@k11q
k11q committed Jul 15, 2023
1 parent e17d9b4 commit d340e1c
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 89 deletions.
4 changes: 4 additions & 0 deletions docs/.vitepress/theme/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 2 additions & 0 deletions docs/components/prose/ProseCodeInline.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ const props = withDefaults(defineProps<ProseCodeInlineProps>(), {
</script>

<template>
<pre class="contents">
<code class="px-1 text-[13px] rounded-sm"
:class="`${props.variant === 'primary' ? '!bg-green12 !text-green-500' : '!bg-neutral-600/30 !text-neutral-400'}`"><slot /></code>
</pre>
</template>
138 changes: 49 additions & 89 deletions docs/content/components/scroll-area.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,31 +58,33 @@ npm install radix-vue

Import all parts and piece them together.

```jsx
import * as ScrollArea from 'radix-vue';

export default () => (
<ScrollArea.Root>
<ScrollArea.Viewport />
<ScrollArea.Scrollbar orientation="horizontal">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Scrollbar orientation="vertical">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
);
```vue
<script setup>
import { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb } from "radix-vue";
</script>
<template>
<ScrollAreaRoot>
<ScrollAreaViewport />
<ScrollAreaScrollbar orientation="horizontal">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar orientation="vertical">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaCorner />
</ScrollAreaRoot>
</template>
```

## API Reference

### Root

Contains all the parts of a scroll area.
```

<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
Expand All @@ -92,111 +94,69 @@ Contains all the parts of a scroll area.
},
{
name: 'type',
type: '"auto" | "always" | "scroll" | "hover"',
type: '&quot;auto&quot; | &quot;always&quot; | &quot;scroll&quot; | &quot;hover&quot;',
typeSimple: 'enum',
default: '"hover"',
description: (
<span>
Describes the nature of scrollbar visibility, similar to how the
scrollbar preferences in MacOS control visibility of native
scrollbars.
<br />
<br />
<Code>"auto"</Code> means that scrollbars are visible when content is overflowing
on the corresponding orientation.
<br />
<Code>"always"</Code> means that scrollbars are always visible regardless
of whether the content is overflowing.
<br />
<Code>"scroll"</Code> means that scrollbars are visible when the user is
scrolling along its corresponding orientation.
<br />
<Code>"hover"</Code> when the user is scrolling along its corresponding
orientation and when the user is hovering over the scroll area.
</span>
),
default: '&quot;hover&quot;',
description: '<span> Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. <br /> <br /> <Code>&quot;auto&quot;</Code> means that scrollbars are visible when content is overflowing on the corresponding orientation. <br /> <Code>&quot;always&quot;</Code> means that scrollbars are always visible regardless of whether the content is overflowing. <br /> <Code>&quot;scroll&quot;</Code> means that scrollbars are visible when the user is scrolling along its corresponding orientation. <br /> <Code>&quot;hover&quot;</Code> when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.</span>',
},
{
name: 'scrollHideDelay',
type: 'number',
default: '600',
description: (
<span>
If <Code>type</Code> is set to either <Code>"scroll"</Code> or{' '}
<Code>"hover"</Code>, this prop determines the length of time, in
milliseconds, before the scrollbars are hidden after the user stops
interacting with scrollbars.
</span>
),
description: '<span> If <Code>type</Code> is set to either <Code>&quot;scroll&quot;</Code> or <Code>&quot;hover&quot;</Code>, this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.</span>',
},
{
name: 'dir',
required: false,
type: '"ltr" | "rtl"',
type: '&quot;ltr&quot; | &quot;rtl&quot;',
typeSimple: 'enum',
description: (
<span>
The reading direction of the scroll area. If omitted, inherits
globally from <Code>DirectionProvider</Code> or assumes LTR
(left-to-right) reading mode.
</span>
),
description: '<span> The reading direction of the scroll area. If omitted, inherits globally from <Code>DirectionProvider</Code> or assumes LTR (left-to-right) reading mode.</span>',
},
]}
]"
/>
```

### Viewport

The viewport area of the scroll area.
```

<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
type: 'boolean',
default: 'false',
description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
},
]}
]"
/>
```

### Scrollbar

The vertical scrollbar. Add a second `Scrollbar` with an `orientation` prop to enable horizontal scrolling.
```

<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
type: 'boolean',
default: 'false',
description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
},
{
name: 'forceMount',
type: 'boolean',
description: (
<span>
Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries.
</span>
),
},
{
name: 'orientation',
required: false,
type: '"horizontal" | "vertical"',
type: '&quot;horizontal&quot; | &quot;vertical&quot;',
typeSimple: 'enum',
default: 'vertical',
description: 'The orientation of the scrollbar',
},
]}
]"
/>

<DataAttributesTable
data={[
:data="[
{
attribute: '[data-state]',
values: ['visible', 'hidden'],
Expand All @@ -205,50 +165,50 @@ The vertical scrollbar. Add a second `Scrollbar` with an `orientation` prop to e
attribute: '[data-orientation]',
values: ['vertical', 'horizontal'],
},
]}
]"
/>
```

### Thumb

The thumb to be used in `ScrollArea.Scrollbar`.
```
The thumb to be used in `ScrollAreaScrollbar`.

<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
type: 'boolean',
default: 'false',
description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
},
]}
]"
/>

<DataAttributesTable
data={[
:data="[
{
attribute: '[data-state]',
values: ['visible', 'hidden'],
},
]}
]"
/>
```

### Corner

The corner where both vertical and horizontal scrollbars meet.
```

<PropsTable
data={[
:data="[
{
name: 'asChild',
required: false,
type: 'boolean',
default: 'false',
description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our <a href=&quot;/guides/composition&quot;>Composition</a> guide for more details.',
},
]}
]"
/>
```

## 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).
Expand Down

0 comments on commit d340e1c

Please sign in to comment.