🚧 Add some system components.

packages/components/src/container/system/breakpoint.rs

@@ -0,0 +1,23 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[styled_component]
+pub fn Breakpoint(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}

packages/components/src/container/system/cursor.rs

@@ -0,0 +1,23 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[styled_component]
+pub fn Cursor(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}

packages/components/src/container/system/flex.rs

@@ -0,0 +1,23 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[styled_component]
+pub fn Flex(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}

packages/components/src/container/system/mod.rs

@@ -1,9 +1,15 @@
+mod breakpoint;
+mod cursor;
 mod draggable;
+mod flex;
 mod modal;
 mod resizable;
 mod scrollable;
 
+pub use breakpoint::Breakpoint;
+pub use cursor::Cursor;
 pub use draggable::Draggable;
+pub use flex::Flex;
 pub use modal::Modal;
 pub use resizable::Resizable;
 pub use scrollable::Scrollable;

packages/theme/src/prelude/material/mod.rs

@@ -1 +1,2 @@
 // https://m3.material.io/components/
+// https://vuetifyjs.com/zh-Hans/