mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-15 11:00:41 +00:00
98 lines
1.6 KiB
Markdown
98 lines
1.6 KiB
Markdown
# Scroll Area Component API
|
|
|
|
A container with custom styled scrollbars.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-scroll-area = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_scroll_area::ScrollArea;
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### ScrollArea
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
| `children` | `Option<Children>` | `None` | Scrollable content |
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Scroll Area
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_scroll_area::ScrollArea;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
view! {
|
|
<ScrollArea class="h-72 w-48 rounded-md border">
|
|
<div class="p-4">
|
|
<p>"Long content that scrolls..."</p>
|
|
</div>
|
|
</ScrollArea>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.scroll-area {
|
|
overflow-auto
|
|
}
|
|
|
|
.scroll-area::-webkit-scrollbar {
|
|
width: 8px
|
|
}
|
|
|
|
.scroll-area::-webkit-scrollbar-track {
|
|
background: transparent
|
|
}
|
|
|
|
.scroll-area::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--muted))
|
|
border-radius: 4px
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
- Standard scrolling behavior maintained
|
|
- Keyboard navigation supported
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface ScrollAreaProps {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const ScrollArea: React.FC<ScrollAreaProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/scroll-area/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/scroll-area/src/default.rs)*
|