dioxuscut_core/
absolute_fill.rs

1//! `<AbsoluteFill>` component — full-size absolute-positioned container.
2//!
3//! Equivalent to Remotion's `<AbsoluteFill>`.
4//!
5//! Renders a `div` with `position: absolute; top: 0; left: 0; right: 0; bottom: 0`
6//! so that it covers its nearest positioned ancestor entirely.
7//!
8//! # Example
9//! ```rust,ignore
10//! use dioxuscut_core::AbsoluteFill;
11//!
12//! fn Background() -> Element {
13//!     rsx! {
14//!         AbsoluteFill {
15//!             style: "background-color: #0a0a23;",
16//!         }
17//!     }
18//! }
19//! ```
20
21use dioxus::prelude::*;
22
23/// Props for the `<AbsoluteFill>` component.
24#[derive(Props, Clone, PartialEq)]
25pub struct AbsoluteFillProps {
26    /// Additional CSS to merge with the absolute fill base styles.
27    #[props(default)]
28    pub style: Option<String>,
29
30    /// Additional CSS classes.
31    #[props(default)]
32    pub class: Option<String>,
33
34    /// Child elements.
35    pub children: Element,
36}
37
38/// A full-size absolute-positioned container.
39///
40/// Equivalent to Remotion's `<AbsoluteFill>`.
41#[component]
42pub fn AbsoluteFill(props: AbsoluteFillProps) -> Element {
43    let base = "position: absolute; top: 0; left: 0; right: 0; bottom: 0;";
44    let style = if let Some(extra) = &props.style {
45        format!("{base} {extra}")
46    } else {
47        base.to_string()
48    };
49
50    rsx! {
51        div {
52            style: "{style}",
53            class: props.class.unwrap_or_default(),
54            {props.children}
55        }
56    }
57}
dioxuscut_core/absolute_fill.rs

dioxuscut_core/
absolute_fill.rs
