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.

See Also