[yew-devel] [PATCH yew-widget-toolkit v2 01/12] widget: implement Image widget
Dominik Csapak
d.csapak at proxmox.com
Mon Jun 30 10:24:58 CEST 2025
It's a thin wrapper around the <img> tag, but provide convenience
properties for switching the image in dark mode, like we want to use for
our logo for example.
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
src/widget/image.rs | 76 +++++++++++++++++++++++++++++++++++++++++++++
src/widget/mod.rs | 3 ++
2 files changed, 79 insertions(+)
create mode 100644 src/widget/image.rs
diff --git a/src/widget/image.rs b/src/widget/image.rs
new file mode 100644
index 0000000..002e879
--- /dev/null
+++ b/src/widget/image.rs
@@ -0,0 +1,76 @@
+use yew::html::IntoPropValue;
+use yew::prelude::*;
+use yew::AttrValue;
+
+use crate::props::{EventSubscriber, WidgetBuilder};
+use crate::state::Theme;
+use crate::state::ThemeObserver;
+use crate::widget::Container;
+
+use pwt_macros::{builder, widget};
+
+/// Image
+///
+/// An image element. Has convenience options to change the image in dark mode.
+#[widget(pwt=crate, comp=PwtImage, @element)]
+#[derive(Properties, PartialEq, Clone)]
+#[builder]
+pub struct Image {
+ /// The source url for the image.
+ pub src: AttrValue,
+
+ /// An alternative source url for the image used in dark mode.
+ #[prop_or_default]
+ #[builder(IntoPropValue, into_prop_value)]
+ pub dark_mode_src: Option<AttrValue>,
+}
+
+impl Image {
+ /// Create a new [Image] with a src image url.
+ pub fn new(src: impl Into<AttrValue>) -> Self {
+ yew::props!(Self { src: src.into() })
+ }
+}
+
+pub enum Msg {
+ ThemeChanged((Theme, bool)),
+}
+
+#[doc(hidden)]
+pub struct PwtImage {
+ dark_mode: bool,
+ _theme_observer: ThemeObserver,
+}
+
+impl Component for PwtImage {
+ type Message = Msg;
+ type Properties = Image;
+
+ fn create(_ctx: &Context<Self>) -> Self {
+ let _theme_observer = ThemeObserver::new(_ctx.link().callback(Msg::ThemeChanged));
+ Self {
+ dark_mode: _theme_observer.dark_mode(),
+ _theme_observer,
+ }
+ }
+
+ fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+ match msg {
+ Msg::ThemeChanged((_theme, dark_mode)) => self.dark_mode = dark_mode,
+ }
+ true
+ }
+
+ fn view(&self, ctx: &Context<Self>) -> Html {
+ let props = ctx.props();
+ let src = match (self.dark_mode, &props.dark_mode_src) {
+ (true, Some(src)) => src.clone(),
+ _ => props.src.clone(),
+ };
+ Container::from_tag("img")
+ .with_std_props(&props.std_props)
+ .listeners(&props.listeners)
+ .attribute("src", src)
+ .into()
+ }
+}
diff --git a/src/widget/mod.rs b/src/widget/mod.rs
index 18c52ad..2385bb7 100644
--- a/src/widget/mod.rs
+++ b/src/widget/mod.rs
@@ -65,6 +65,9 @@ pub use field_label::FieldLabel;
#[doc(hidden)]
pub use field_label::PwtFieldLabel;
+mod image;
+pub use image::Image;
+
mod input;
pub use input::Input;
--
2.39.5
More information about the yew-devel
mailing list