orbital-core-components 0.1.1

Themed Orbital UI components for Leptos applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

use leptos::{html, prelude::*};
use orbital_style::inject_style;

use super::overlay_layer_root_styles::overlay_layer_root_styles;

/// Scoped portal mount target with an isolated stacking context for embedded overlays.
///
/// Renders children inline inside a positioned shell. Pass the same `node_ref` to
/// [`ThemedPortal`](crate::ThemedPortal) or anchored overlays (`mount` on [`Popover`](crate::Popover)
/// / [`Tooltip`](crate::Tooltip)) so interactive chrome portals into this layer instead of
/// `document.body`.
#[component]
pub fn OverlayLayerRoot(
    /// Mount target for descendant portals. When omitted, an internal ref is allocated.
    #[prop(optional)]
    node_ref: Option<NodeRef<html::Div>>,
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    inject_style("orbital-overlay-layer-root", overlay_layer_root_styles());

    let layer_ref = node_ref.unwrap_or_default();
    let root_class = Signal::derive(move || {
        let mut classes = vec!["orbital-overlay-layer-root".to_string()];
        if let Some(extra) = class.get() {
            if !extra.is_empty() {
                classes.push(extra);
            }
        }
        classes.join(" ")
    });

    view! {
        <div class=root_class node_ref=layer_ref>
            {children()}
        </div>
    }
}