Getting Started
A quick tutorial to get you up and running with Rust Radix Primitives.
Implementing a Popover
In this quick tutorial, we will install and style the Popover component.
1. Install the primtive
Install the component from your command line.
cargo add radix-leptos-popover
2. Import the parts
Import and structure the parts.
use leptos::*;
use radix_leptos_popover::*;
#[component]
fn PopoverDemo() -> impl IntoView {
view! {
<Popover>
<PopoverTrigger>More info</PopoverTrigger>
<PopoverPortal>
<PopoverContent>
Some more info...
<PopoverArrow />
</PopoverContent>
</PopoverPortal>
</Popover>
}
}
3. Add your styles
Add styles where desired.
// TODO
.PopoverTrigger {
background-color: white;
border-radius: 4px;
}
.PopoverContent {
border-radius: 4px;
padding: 20px;
width: 260px;
background-color: white;
}
.PopoverArrow {
fill: white;
}
Demo
Here's a complete demo.
TODO
Summary
The steps above outline briefly what's involved in using a Rust Radix Primitive in your application.
These components are low-level enough to give you control over how you want to wrap them. You're free to introduce your own high-level API to better suit the needs of your team and product.
In a few simple steps, we've implemented a fully accessible Popover component, without having to worry about many of its complexities.
- Adheres to WAI-ARIA design pattern.
- Can be controlled or uncontrolled.
- Customize side, alignment, offsets, collision handling.
- Optionally render a pointing arrow.
- Focus is fully managed and customizable.
- Dismissing and layering behavior is highly customizable.