0.1.0 • Published 1 year ago
@urban-ui/scrollable v0.1.0
@urban-ui/scrollable
layout | scrollable
Creates a scrollable area
## Getting started
pnpm add -S @urban-ui/scrollable
import {Container} from '@urban-ui/container
import {Scrollable} from '@urban-ui/scrollable'
export function MyComponent() {
return (
<Container css={{backgroundColor: '$bg1', width: '200px', height: '250px'}}>
<Scrollable.Root>
<Scrollable.Viewport>
{// content for the scrollable area}
</Scrollable.Viewport>
<Scrollable.Scrollbar>
<Scrollable.Thumb />
</Scrollable.Scrollbar>
</Scrollable.Root>
</Container>
)
}
Details
Styled version of radix-ui/scrollarea.
Props that apply to the radix-ui scrollarea component also apply here. Additional props are listed here.
Scrollable
is a layout component that gives some control over when and how scrollbars appear. It also attaches keyboard listeners for better control.