Overflow
A scrollable container with gradient shadow indicators that show when there is more content to scroll to. Supports both vertical and horizontal scrolling.
Props
| Name | Default | Type |
|---|---|---|
horizontal | — | boolean Use horizontal scrolling instead of vertical |
hideScrollbar | — | boolean Hides the scrollbar and removes the scrollbar gutter padding |
hideShadows | — | boolean Hides the gradient shadows indicating more scrollable content |
snap | — | boolean Enables scroll-snap so items snap into place when scrolling stops |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | The scrollable content |
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-overflow-gutter-size | 8px | Scrollbar gutter width |
--vui-overflow-shadow-size | 32px | Edge fade shadow size |
--vui-overflow-shadow-color | var(--color-bg) | Edge fade shadow color |
Exposes
When queried via useTemplateRef, this component exposes
| Name | Type | Usage |
|---|---|---|
contentRef | TemplateRef | Forwards the ref for the internal overflow content element. |