dxc 1.0.0

A concise, modern dioxus component library
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

use super::props::ContainerProps;
use crate::hooks::UseNamespace;
use crate::types::{components::container::Direction, namespace::Block};
use dioxus::prelude::*;
use dxc_macros::classes;

/// A generic container component for grouping and styling content.
///
/// This component serves as a structural wrapper to hold and organize child elements.
/// It does not impose layout behavior by itself but can be styled accordingly
/// using the `class` prop. The `direction` attribute is purely semantic or
/// intended for use by styling systems (e.g., CSS classes that respond to it).
///
/// # Props
///
/// - `direction`: A hint for the preferred arrangement of children.
///   Values: `"horizontal"` (default) or `"vertical"`.
///
///   When nested with `DxcHeader` or `DxcFooter`, Plese use `vertically`. Otherwise use `horizontally`.
///
/// - `class`: Additional CSS classes to apply to the container element.
///   Default: `"container"`.
///
/// - `children`: The content to be rendered inside the container.
///
/// # Example
///
/// ```rust,ignore
/// use dioxus::prelude::*;
/// use dxc::prelude::*;
///
/// fn app() -> Element {
///     rsx! {
///         DxcContainer {
///             direction: Container::Direction::Horizontal,
///             class: "my-container padded bordered".to_string(),
///             {
///                 h1 { "Welcome" }
///                 p { "This content is wrapped in a container." }
///             }
///         }
///     }
/// }
/// ```
///
/// # Usage Notes
///
/// - Use this component to logically or visually group related UI elements.
/// - The `direction` prop may be used by your CSS (e.g., via attribute selectors)
///   to apply different styles, but it does not alter layout by default.
/// - Combine with CSS for full styling control.
#[component]
pub fn DxcContainer(props: ContainerProps) -> Element {
    let is_vertical = use_signal(|| match props.direction() {
        Direction::Vertical => true,
        Direction::Horizontal => false,
    });

    let ns = UseNamespace::new(Block::Container, None);

    let classes = classes! {
        ns.b(),
        ns.is_(Direction::Vertical.to_string(), Some(is_vertical())),
        props.class()
    };

    let style = use_signal(|| props.style());

    rsx! {
        section {
            class: classes,
            style: style(),
            {props.children}
        }
    }
}