dioxuscut-core 0.1.3

Core Dioxus components and hooks for Dioxuscut — Composition, Sequence, AbsoluteFill, etc.
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

//! `<AbsoluteFill>` component — full-size absolute-positioned container.
//!
//! Equivalent to Remotion's `<AbsoluteFill>`.
//!
//! Renders a `div` with `position: absolute; top: 0; left: 0; right: 0; bottom: 0`
//! so that it covers its nearest positioned ancestor entirely.
//!
//! # Example
//! ```rust,ignore
//! use dioxuscut_core::AbsoluteFill;
//!
//! fn Background() -> Element {
//!     rsx! {
//!         AbsoluteFill {
//!             style: "background-color: #0a0a23;",
//!         }
//!     }
//! }
//! ```

use dioxus::prelude::*;

/// Props for the `<AbsoluteFill>` component.
#[derive(Props, Clone, PartialEq)]
pub struct AbsoluteFillProps {
    /// Additional CSS to merge with the absolute fill base styles.
    #[props(default)]
    pub style: Option<String>,

    /// Additional CSS classes.
    #[props(default)]
    pub class: Option<String>,

    /// Child elements.
    pub children: Element,
}

/// A full-size absolute-positioned container.
///
/// Equivalent to Remotion's `<AbsoluteFill>`.
#[component]
pub fn AbsoluteFill(props: AbsoluteFillProps) -> Element {
    let base = "position: absolute; top: 0; left: 0; right: 0; bottom: 0;";
    let style = if let Some(extra) = &props.style {
        format!("{base} {extra}")
    } else {
        base.to_string()
    };

    rsx! {
        div {
            style: "{style}",
            class: props.class.unwrap_or_default(),
            {props.children}
        }
    }
}