dxc_components/container/
container.rs

1use super::props::ContainerProps;
2use dioxus::prelude::*;
3use dxc_hooks::UseNamespace;
4use dxc_macros::classes;
5use dxc_types::{components::container::Direction, namespace::Block};
6
7/// A generic container component for grouping and styling content.
8///
9/// This component serves as a structural wrapper to hold and organize child elements.
10/// It does not impose layout behavior by itself but can be styled accordingly
11/// using the `class` prop. The `direction` attribute is purely semantic or
12/// intended for use by styling systems (e.g., CSS classes that respond to it).
13///
14/// # Props
15///
16/// - `direction`: A hint for the preferred arrangement of children.
17///   Values: `"horizontal"` (default) or `"vertical"`.
18///
19///   When nested with `DxcHeader` or `DxcFooter`, Plese use `vertically`. Otherwise use `horizontally`.
20///
21/// - `class`: Additional CSS classes to apply to the container element.
22///   Default: `"container"`.
23///
24/// - `children`: The content to be rendered inside the container.
25///
26/// # Example
27///
28/// ```rust
29/// use dioxus::prelude::*;
30/// use dxc::prelude::*;
31///
32/// fn app() -> Element {
33///     rsx! {
34///         DxcContainer {
35///             direction: Container::Direction::Horizontal,
36///             class: "my-container padded bordered".to_string(),
37///             {
38///                 h1 { "Welcome" }
39///                 p { "This content is wrapped in a container." }
40///             }
41///         }
42///     }
43/// }
44/// ```
45///
46/// # Usage Notes
47///
48/// - Use this component to logically or visually group related UI elements.
49/// - The `direction` prop may be used by your CSS (e.g., via attribute selectors)
50///   to apply different styles, but it does not alter layout by default.
51/// - Combine with CSS for full styling control.
52#[component]
53pub fn DxcContainer(props: ContainerProps) -> Element {
54    let is_vertical = use_signal(|| match props.direction() {
55        Direction::Vertical => true,
56        Direction::Horizontal => false,
57    });
58
59    let ns = UseNamespace::new(Block::Container, None);
60
61    let classes = classes! {
62        ns.b(),
63        ns.is_(Direction::Vertical.to_string(), Some(is_vertical())),
64        props.class()
65    };
66
67    let style = use_signal(|| props.style());
68
69    rsx! {
70        section {
71            class: classes,
72            style: style(),
73            {props.children}
74        }
75    }
76}
dxc_components/container/container.rs

dxc_components/container/
container.rs
