diff --git a/crates/zu-docs/src/views/inputs/button_page.rs b/crates/zu-docs/src/views/inputs/button_page.rs
index e4114e92b..05e20a63d 100644
--- a/crates/zu-docs/src/views/inputs/button_page.rs
+++ b/crates/zu-docs/src/views/inputs/button_page.rs
@@ -3,7 +3,7 @@
// in the LICENSE file.
use stylist::Style;
-use yew::{classes, function_component, html, Html, MouseEvent};
+use yew::{classes, function_component, html, Callback, Html, MouseEvent};
use zu::button::Button;
use zu::icon_button::IconButton;
use zu::loading_button::{LoadingButton, Position};
@@ -233,6 +233,112 @@ fn create_icon_button_view() -> Html {
}
}
+fn create_loading_button_toggle_view() -> Html {
+ let margin_style = Style::new(
+ r#"
+ button {
+ margin: 8px;
+ }
+ "#,
+ )
+ .expect("Failed to create margin-style");
+
+ let handle_click = Callback::from(|event: MouseEvent| {
+ event.prevent_default();
+ log::info!("on click");
+ });
+
+ // TODO(Shaohua): Replace with state.
+ let loading = true;
+
+ html! {
+ <>
+
{"Toggle the loading switch to see the transition between the different states."}
+
+
+
+ {"disabled"}
+
+
+ {"Fetch data"}
+
+ }}
+ loading={loading}
+ loading_position={Position::End}
+ variant={Variant::Contained}
+ >
+ {"Send"}
+
+ }}
+ variant={Variant::Contained}
+ >
+ {"Save"}
+
+
+
+
+
+ {"disabled"}
+
+
+ {"Fetch data"}
+
+ }}
+ loading={loading}
+ loading_position={Position::End}
+ variant={Variant::Contained}
+ >
+ {"Send"}
+
+ }}
+ variant={Variant::Contained}
+ >
+ {"Save"}
+
+
+
+ >
+ }
+}
+
fn create_loading_button_view() -> Html {
html! {
<>
@@ -250,6 +356,9 @@ fn create_loading_button_view() -> Html {
{"Save"}
+
+ {create_loading_button_toggle_view()}
+
>
}
}
diff --git a/crates/zu/src/button/mod.rs b/crates/zu/src/button/mod.rs
index 140bd7b07..754abcad5 100644
--- a/crates/zu/src/button/mod.rs
+++ b/crates/zu/src/button/mod.rs
@@ -66,6 +66,24 @@ pub struct Props {
#[prop_or_default]
pub href: AttrValue,
+ /// The size of the component.
+ ///
+ /// `Small` is equivalent to the dense button styling.
+ ///
+ /// Default is `Medium`.
+ #[prop_or(Size::Medium)]
+ pub size: Size,
+
+ #[prop_or_default]
+ pub style: AttrValue,
+
+ #[prop_or_default]
+ pub tab_index: Option,
+
+ /// Default value is `Text`.
+ #[prop_or_default]
+ pub variant: ButtonVariant,
+
#[prop_or_default]
pub on_blur: Option>,
@@ -111,24 +129,6 @@ pub struct Props {
#[prop_or_default]
pub on_touch_start: Option>,
-
- /// The size of the component.
- ///
- /// `Small` is equivalent to the dense button styling.
- ///
- /// Default is `Medium`.
- #[prop_or(Size::Medium)]
- pub size: Size,
-
- #[prop_or_default]
- pub style: AttrValue,
-
- #[prop_or_default]
- pub tab_index: Option,
-
- /// Default value is `Text`.
- #[prop_or_default]
- pub variant: ButtonVariant,
}
fn create_start_icon(icon: &Option, button_size: Size) -> Html {
diff --git a/crates/zu/src/icon_button/mod.rs b/crates/zu/src/icon_button/mod.rs
index 2c3b24fe6..00d217db5 100644
--- a/crates/zu/src/icon_button/mod.rs
+++ b/crates/zu/src/icon_button/mod.rs
@@ -6,7 +6,10 @@ mod color;
mod edge;
mod size;
-use yew::{classes, function_component, html, AttrValue, Children, Classes, Html, Properties};
+use yew::{
+ classes, function_component, html, AttrValue, Callback, Children, Classes, DragEvent,
+ FocusEvent, Html, KeyboardEvent, MouseEvent, Properties, TouchEvent,
+};
use crate::button_base::ButtonBase;
use crate::styles::color::Color;
@@ -49,6 +52,52 @@ pub struct Props {
#[prop_or_default]
pub style: AttrValue,
+
+ #[prop_or_default]
+ pub on_blur: Option>,
+
+ #[prop_or_default]
+ pub on_click: Option>,
+
+ #[prop_or_default]
+ pub on_context_menu: Option>,
+
+ #[prop_or_default]
+ pub on_drag_leave: Option>,
+
+ #[prop_or_default]
+ pub on_focus: Option>,
+
+ /// Callback fired when the component is focused with a keyboard.
+ #[prop_or_default]
+ pub on_focus_visible: Option>,
+
+ #[prop_or_default]
+ pub on_key_down: Option>,
+
+ #[prop_or_default]
+ pub on_key_up: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_down: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_enter: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_leave: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_up: Option>,
+
+ #[prop_or_default]
+ pub on_touch_end: Option>,
+
+ #[prop_or_default]
+ pub on_touch_move: Option>,
+
+ #[prop_or_default]
+ pub on_touch_start: Option>,
}
#[function_component(IconButton)]
diff --git a/crates/zu/src/loading_button/mod.rs b/crates/zu/src/loading_button/mod.rs
index d6eef2d5f..393466fcd 100644
--- a/crates/zu/src/loading_button/mod.rs
+++ b/crates/zu/src/loading_button/mod.rs
@@ -4,9 +4,14 @@
mod position;
-use yew::{function_component, html, AttrValue, Children, Classes, Html, Properties};
+use yew::{
+ function_component, html, AttrValue, Callback, Children, Classes, DragEvent, FocusEvent, Html,
+ KeyboardEvent, MouseEvent, Properties, TouchEvent,
+};
use crate::styles::button_variant::ButtonVariant;
+use crate::styles::color::Color;
+use crate::styles::size::Size;
pub use position::Position;
#[derive(Debug, Clone, PartialEq, Properties)]
@@ -17,6 +22,10 @@ pub struct Props {
#[prop_or_default]
pub classes: Classes,
+ /// Default value is `Color::Default`.
+ #[prop_or(Color::Default)]
+ pub color: Color,
+
#[prop_or(false)]
pub disabled: bool,
@@ -35,11 +44,61 @@ pub struct Props {
#[prop_or_default]
pub end_icon: Option,
+ /// Default is `Size::Medium`.
+ #[prop_or(Size::Medium)]
+ pub size: Size,
+
#[prop_or_default]
pub style: AttrValue,
#[prop_or_default]
pub variant: ButtonVariant,
+
+ #[prop_or_default]
+ pub on_blur: Option>,
+
+ #[prop_or_default]
+ pub on_click: Option>,
+
+ #[prop_or_default]
+ pub on_context_menu: Option>,
+
+ #[prop_or_default]
+ pub on_drag_leave: Option>,
+
+ #[prop_or_default]
+ pub on_focus: Option>,
+
+ /// Callback fired when the component is focused with a keyboard.
+ #[prop_or_default]
+ pub on_focus_visible: Option>,
+
+ #[prop_or_default]
+ pub on_key_down: Option>,
+
+ #[prop_or_default]
+ pub on_key_up: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_down: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_enter: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_leave: Option>,
+
+ #[prop_or_default]
+ pub on_mouse_up: Option>,
+
+ #[prop_or_default]
+ pub on_touch_end: Option>,
+
+ #[prop_or_default]
+ pub on_touch_move: Option>,
+
+ #[prop_or_default]
+ pub on_touch_start: Option>,
}
#[function_component(LoadingButton)]