1  //! Defines the [`Separator`] component for creating visual or semantic separators.
 2  
 3  use dioxus::prelude::*;
 4  
 5  /// The props for the [`Separator`] component.
 6  #[derive(Props, Clone, PartialEq)]
 7  pub struct SeparatorProps {
 8      /// Horizontal if true, vertical if false.
 9      #[props(default = true)]
10      pub horizontal: bool,
11  
12      /// If the separator is decorative and should not be classified
13      /// as a separator to the ARIA standard.
14      #[props(default = false)]
15      pub decorative: bool,
16  
17      /// Additional attributes to apply to the separator element.
18      #[props(extends = GlobalAttributes)]
19      pub attributes: Vec<Attribute>,
20  
21      /// The children of the separator component.
22      pub children: Element,
23  }
24  
25  /// # Separator
26  ///
27  /// The `Separator` component creates a visual or semantic divider between sections of content. If the divider
28  /// is purely decorative, it can be marked as such to avoid being classified as a separator by assistive technologies.
29  ///
30  /// ## Example
31  ///
32  /// ```rust
33  /// use dioxus::prelude::*;
34  /// use dioxus_primitives::separator::Separator;
35  /// #[component]
36  /// fn Demo() -> Element {
37  ///     rsx! {
38  ///         "One thing"
39  ///         Separator {
40  ///             style: "margin: 15px 0; width: 50%;",
41  ///             horizontal: true,
42  ///             decorative: true,
43  ///         }
44  ///         "Another thing"
45  ///     }
46  /// }
47  /// ```
48  ///
49  /// ## Styling
50  ///
51  /// The [`Separator`] component defines the following data attributes you can use to control styling:
52  /// - `data-orientation`: Indicates the orientation of the separator. Values are `horizontal` or `vertical`.
53  #[component]
54  pub fn Separator(props: SeparatorProps) -> Element {
55      let orientation = match props.horizontal {
56          true => "horizontal",
57          false => "vertical",
58      };
59  
60      rsx! {
61          div {
62              role: if !props.decorative { "separator" } else { "none" },
63              aria_orientation: if !props.decorative { orientation },
64              "data-orientation": orientation,
65              ..props.attributes,
66              {props.children}
67          }
68      }
69  }