[yew-devel] [PATCH yew-widget-toolkit v2 09/12] touch: fab: add size option
Dominik Csapak
d.csapak at proxmox.com
Mon Jun 30 10:25:06 CEST 2025
While this can be configured with classes (and the large/small method).
It's more ergonomic to have it directly as an enum, especially when
we'll want to pass that through in the FabMenu also.
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
src/touch/fab.rs | 37 +++++++++++++++++++++++++++++++++++--
src/touch/mod.rs | 2 +-
2 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/src/touch/fab.rs b/src/touch/fab.rs
index 72637c7..2ae1551 100644
--- a/src/touch/fab.rs
+++ b/src/touch/fab.rs
@@ -7,6 +7,14 @@ use yew::virtual_dom::{Key, VComp, VNode};
use crate::props::{AsClassesMut, WidgetBuilder};
use crate::widget::Button;
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum FabSize {
+ Small,
+ #[default]
+ Standard,
+ Large,
+}
+
/// Favorite action button.
#[derive(Properties, Clone, PartialEq)]
pub struct Fab {
@@ -14,6 +22,10 @@ pub struct Fab {
#[prop_or_default]
pub key: Option<Key>,
+ /// The size of the FAB
+ #[prop_or_default]
+ pub size: FabSize,
+
/// Icon (CSS class).
pub icon_class: Classes,
@@ -83,16 +95,27 @@ impl Fab {
/// Builder style method to add the "pwt-fab-small" class
pub fn small(mut self) -> Self {
- self.add_class("pwt-fab-small");
+ self.size = FabSize::Small;
self
}
/// Builder style method to add the "pwt-fab-large" class
pub fn large(mut self) -> Self {
- self.add_class("pwt-fab-large");
+ self.size = FabSize::Large;
+ self
+ }
+
+ /// Builder method to set the FAB size.
+ pub fn size(mut self, size: FabSize) -> Self {
+ self.set_size(size);
self
}
+ /// Method to set the FAB size.
+ pub fn set_size(&mut self, size: FabSize) {
+ self.size = size;
+ }
+
/// Builder style method to set the button text
pub fn text(mut self, text: impl IntoPropValue<Option<AttrValue>>) -> Self {
self.set_text(text);
@@ -131,6 +154,16 @@ impl Component for PwtFab {
let mut class = props.class.clone();
class.push("pwt-fab");
+ match props.size {
+ FabSize::Small => {
+ class.push("pwt-fab-small");
+ }
+ FabSize::Standard => {}
+ FabSize::Large => {
+ class.push("pwt-fab-large");
+ }
+ }
+
let button = match &props.text {
Some(text) => Button::new(text)
.icon_class(icon_class)
diff --git a/src/touch/mod.rs b/src/touch/mod.rs
index 87fcc85..f559689 100644
--- a/src/touch/mod.rs
+++ b/src/touch/mod.rs
@@ -8,7 +8,7 @@ mod gesture_detector;
pub use gesture_detector::{GestureDetector, GestureSwipeEvent, InputEvent, PwtGestureDetector};
mod fab;
-pub use fab::{Fab, PwtFab};
+pub use fab::{Fab, FabSize, PwtFab};
mod fab_menu;
pub use fab_menu::{FabMenu, FabMenuAlign, FabMenuDirection, PwtFabMenu};
--
2.39.5
More information about the yew-devel
mailing list