Component

popover

dx components add popover

A popover component for colapsible content.

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::popover::{
    self, PopoverContentProps, PopoverRootProps, PopoverTriggerProps,
};
use dioxus_primitives::{dioxus_attributes::attributes, merge_attributes};

#[component]
pub fn PopoverRoot(props: PopoverRootProps) -> Element {
    let base = attributes!(div {
        class: "dx-popover"
    });
    let merged = merge_attributes(vec![base, props.attributes]);

    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/popover/style.css") }
        popover::PopoverRoot {
            is_modal: props.is_modal,
            open: props.open,
            default_open: props.default_open,
            on_open_change: props.on_open_change,
            attributes: merged,
            {props.children}
        }
    }
}

#[component]
pub fn PopoverTrigger(props: PopoverTriggerProps) -> Element {
    let base = attributes!(button {
        class: "dx-popover-trigger"
    });
    let merged = merge_attributes(vec![base, props.attributes]);

    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/popover/style.css") }
        popover::PopoverTrigger { attributes: merged, {props.children} }
    }
}

#[component]
pub fn PopoverContent(props: PopoverContentProps) -> Element {
    let class = if let Some(class) = props.class {
        format!("{} {}", "dx-popover-content", class)
    } else {
        "dx-popover-content".to_string()
    };

    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/popover/style.css") }
        popover::PopoverContent {
            class,
            id: props.id,
            side: props.side,
            align: props.align,
            attributes: props.attributes,
            {props.children}
        }
    }
}

Usage notes

The Popover primitive provides an interactive modal that is positioned relative to the target element. It can be used to display additional options, or actions related to the trigger.

Component Structure

// The PopoverRoot is the root component that contains the trigger and content.
PopoverRoot {
    // The PopoverTrigger contains the elements that will trigger the popover to display when clicked.
    PopoverTrigger {
        "Show Popover"
    }
    // The PopoverContent contains the content that will be displayed when the user clicks on the trigger.
    PopoverContent {
        side: ContentSide::Top,
        align: ContentAlign::Center,
        {children}
    }
}

Variants

Alternative examples for common configurations.

non_modal