pub trait Element: Sized {
type Dom: Dom;
type DomElement: JsCast + 'static;
// Required methods
fn class<'a, T>(self, class: impl RefSignalOrValue<'a, Item = T>) -> Self
where T: 'a + AsRef<str>;
fn classes<'a, T, Iter>(
self,
classes: impl RefSignalOrValue<'a, Item = Iter>
) -> Self
where T: 'a + AsRef<str>,
Iter: 'a + IntoIterator<Item = T>;
fn attribute<'a>(
self,
name: &str,
value: impl RefSignalOrValue<'a, Item = impl Attribute>
) -> Self;
fn style_property<'a>(
self,
name: impl Into<String>,
value: impl RefSignalOrValue<'a, Item = impl AsRef<str> + 'a>
) -> Self;
fn effect(self, f: impl FnOnce(&Self::DomElement) + 'static) -> Self;
fn effect_signal<T: 'static>(
self,
sig: impl Signal<Item = T> + 'static,
f: impl Fn(&Self::DomElement, T) + Clone + 'static
) -> Self;
fn map_element(self, f: impl FnOnce(&Self::DomElement) + 'static) -> Self;
fn map_element_signal<T: 'static>(
self,
sig: impl Signal<Item = T> + 'static,
f: impl Fn(&Self::DomElement, T) + Clone + 'static
) -> Self;
fn handle(&self) -> ElementHandle<Self::Dom, Self::DomElement>;
fn spawn_future(self, future: impl Future<Output = ()> + 'static) -> Self;
fn on(self, name: &'static str, f: impl FnMut(JsValue) + 'static) -> Self;
}Expand description
An HTML element.
Required Associated Types§
Required Methods§
sourcefn class<'a, T>(self, class: impl RefSignalOrValue<'a, Item = T>) -> Self
fn class<'a, T>(self, class: impl RefSignalOrValue<'a, Item = T>) -> Self
Add a class to the element.
This method can be called multiple times to add multiple classes.
class must not be the empty string, or contain whitespace. Use
Self::classes with an Option for optional classes.
Classes must be unique across all
invocations of this method and Self::classes, otherwise the results
are undefined. Any class signal values, past or present, must be unique
w.r.t. other invocations.
§Panics
This panics if class is the empty string, or contains whitespace.
§Examples
Add static class names:
let app: Div<Dry> = div().class("my-class").class("my-other-class");
assert_eq!(
app.freeze().to_string(),
r#"<div class="my-class my-other-class"></div>"#
);Add dynamic class names:
let my_class = Mutable::new("my-class");
let my_other_class = Mutable::new("my-other-class");
let app: Div<Dry> = div()
.class(Sig(my_class.signal()))
.class(Sig(my_other_class.signal()));
let app = app.freeze();
render_now().await;
assert_eq!(
app.to_string(),
r#"<div class="my-class my-other-class"></div>"#
);
my_other_class.set("my-other-class-updated");
render_now().await;
assert_eq!(
app.to_string(),
r#"<div class="my-class my-other-class-updated"></div>"#
);sourcefn classes<'a, T, Iter>(
self,
classes: impl RefSignalOrValue<'a, Item = Iter>
) -> Self
fn classes<'a, T, Iter>( self, classes: impl RefSignalOrValue<'a, Item = Iter> ) -> Self
Set the classes on an element
All classes must not contain spaces, or be the empty string. This
method can be called multiple times and will add to existing
classes.
Classes must be unique across all invocations of this method and
Self::class, otherwise the results are undefined. Any class signal
values, past or present, must be unique w.r.t. other invocations.
§Panics
Panics if any of the items in classes contain whitespace, or are empty
strings.
§Examples
Add static class names:
let app: Div<Dry> = div().classes(["class0", "class1"]);
assert_eq!(
app.freeze().to_string(),
r#"<div class="class0 class1"></div>"#
);Add dynamic class names:
let my_classes = Mutable::new(vec!["class0", "class1"]);
let app: Div<Dry> = div().classes(Sig(my_classes.signal_cloned()));
let app = app.freeze();
render_now().await;
assert_eq!(app.to_string(), r#"<div class="class0 class1"></div>"#);
my_classes.set(vec![]);
render_now().await;
assert_eq!(app.to_string(), r#"<div class=""></div>"#);sourcefn attribute<'a>(
self,
name: &str,
value: impl RefSignalOrValue<'a, Item = impl Attribute>
) -> Self
fn attribute<'a>( self, name: &str, value: impl RefSignalOrValue<'a, Item = impl Attribute> ) -> Self
Set an attribute
The attribute can either be a value or a signal. Signals should be
wrapped in the Sig newtype.Option<impl Attribute> can be used to
add/remove an attribute based on a signal.
sourcefn style_property<'a>(
self,
name: impl Into<String>,
value: impl RefSignalOrValue<'a, Item = impl AsRef<str> + 'a>
) -> Self
fn style_property<'a>( self, name: impl Into<String>, value: impl RefSignalOrValue<'a, Item = impl AsRef<str> + 'a> ) -> Self
Set an inline style property
The property can be a value or a signal. Signals should be wrapped in
the Sig newtype.
sourcefn effect(self, f: impl FnOnce(&Self::DomElement) + 'static) -> Self
fn effect(self, f: impl FnOnce(&Self::DomElement) + 'static) -> Self
Apply an effect after the next render.
Effects give you access to the underlying DOM element.
§Example
Set the focus to an HTMLInputElement.
input().effect(|elem: &HtmlInputElement| elem.focus().unwrap());sourcefn effect_signal<T: 'static>(
self,
sig: impl Signal<Item = T> + 'static,
f: impl Fn(&Self::DomElement, T) + Clone + 'static
) -> Self
fn effect_signal<T: 'static>( self, sig: impl Signal<Item = T> + 'static, f: impl Fn(&Self::DomElement, T) + Clone + 'static ) -> Self
Apply an effect after the next render each time a signal yields a new value.
sourcefn map_element(self, f: impl FnOnce(&Self::DomElement) + 'static) -> Self
fn map_element(self, f: impl FnOnce(&Self::DomElement) + 'static) -> Self
Map a function over the element.
sourcefn map_element_signal<T: 'static>(
self,
sig: impl Signal<Item = T> + 'static,
f: impl Fn(&Self::DomElement, T) + Clone + 'static
) -> Self
fn map_element_signal<T: 'static>( self, sig: impl Signal<Item = T> + 'static, f: impl Fn(&Self::DomElement, T) + Clone + 'static ) -> Self
Map a function over the element each time a signal changes.
sourcefn handle(&self) -> ElementHandle<Self::Dom, Self::DomElement>
fn handle(&self) -> ElementHandle<Self::Dom, Self::DomElement>
Get a handle to the element.
Handles can be cloned and used within click handlers, for example.
§Example
let text = Mutable::new("".to_string());
let input = input();
let input_handle = input.handle();
let app: Div = div()
.child(input)
.child(button().text("Read Input").on_click({
clone!(text);
move |_, _| text.set(input_handle.dom_element().value())
}))
.text(Sig(text.signal_cloned()));sourcefn spawn_future(self, future: impl Future<Output = ()> + 'static) -> Self
fn spawn_future(self, future: impl Future<Output = ()> + 'static) -> Self
Spawn a future on the element.
The future will be dropped when this element is dropped.
Object Safety§
This trait is not object safe.
