https://github.com/zortax/leptos-resize
Simple user-resizable split-view for the leptos web framework
https://github.com/zortax/leptos-resize
leptos
Last synced: about 1 year ago
JSON representation
Simple user-resizable split-view for the leptos web framework
- Host: GitHub
- URL: https://github.com/zortax/leptos-resize
- Owner: zortax
- License: mit
- Created: 2025-01-02T22:47:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-06T21:00:17.000Z (over 1 year ago)
- Last Synced: 2025-03-08T11:18:55.639Z (about 1 year ago)
- Topics: leptos
- Language: Rust
- Homepage:
- Size: 41.9 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leptos Resize
This crate provides a simple user-resizable split container for the Leptos web
framework. Horizontal and vertical splits are both supported.
```rust
#[component]
fn MyComponent() -> impl IntoView {
view! {
"First"
"Second"
}
}
```
(See `examples` directory for a full CSR example)
## Leptos compatibility
| Crate version | Compatible Leptos version |
|---------------|---------------------------|
| 0.1 - 0.2 | 0.7 |
## Features
- Horizontal and vertical split
- Split ratio can be bound to `RwSignal`
- Works with server-side rendering
- Arbitrary number of splits
- Nested splits
### Split direction
The split direction can be changed by setting the `direction` property.
```rust
#[component]
fn MyComponent() -> impl IntoView {
view! {
// split the container horizontally
"First"
"Second"
}
}
```
### Bind size percentages to signal
The size percentages can be bound to a `RwSignal` by setting the `percentages`
property. The `RwSignal` should contain a `Vec` with one element less than the
amount of children you pass. The last percentage will always be calculated.
The values sum should be less than `100`.
```rust
#[component]
fn MyComponent() -> impl IntoView {
// the last childs size will be calculated (in this case 40.)
let percentages = RwSignal::new(vec![20., 40.]);
view! {
"First"
"Second"
"Third"
}
}
```
### Nest multiple split containers
The `` container can also be nested to create more complex
resizable layouts.
```rust
#[component]
fn MyComponent() -> impl IntoView {
view! {
"First"
"Second"
"Third"
}
}
```