Struct valerie::Tag

pub struct Tag<T> { /* fields omitted */ }

An HTML Tag

Macros are defined for easier use of few tags. Can also be used to make other tags also.

Implementations

impl<T> Tag<T> where
    T: JsCast,
    T: AsRef<Element>, 

pub fn new(tag: &'static str) -> Self

Make a new Tag. You have to specify the Element type i.e. Element or HtmlDivElement etc.

Examples

Tag::<web_sys::Element>::new("div").push("Hello, World!")

impl<T> Tag<T> where
    T: AsRef<Node>, 

pub fn push<U>(self, component: U) -> Self where
    U: Component, 

Push components inside the Tag.

Examples

div!().push("Hello, World!")

pub fn push_multiple<U>(self, components: &[U]) -> Self where
    U: AsRef<Node>, 

Push multiple components. Rarely used. Use push preferably.

Examples

div!().push_multiple(&[Node::from("Hello, "), Node::from("World!")])

pub fn push_loop<F, U>(self, n: usize, func: F) -> Self where
    F: Fn(usize) -> U,
    U: Component, 

Push components as a loop from 0 to n (exclusive).

Examples

div!().push_loop(5, |x| h3!(x))

impl<T> Tag<T> where
    T: AsRef<Node> + Clone + 'static, 

pub fn on_event<F, U>(self, event: impl AsRef<str>, var: U, func: F) -> Self where
    U: 'static,
    F: FnMut(&mut U, &mut T) + 'static, 

Attach an event to the Tag.

Examples

let message = StateMutex::new(String::new());
button!(message.clone())
    .on_event("mouseover", message.clone(), |x, _| {
        x.put("Mouse pointer is in me".to_string())
    })
    .on_event("mouseout", message.clone(), |x, _| {
        x.put("Mouse pointer is outside".to_string())
    })
    .on_event("mousedown", message.clone(), |x, _| {
        x.put("Mouse button pressed".to_string())
    })

impl<T> Tag<T> where
    T: AsRef<Element>, 

pub fn id(self, id: impl AsRef<str>) -> Self

Set the id of the Tag.

Examples

div!("Hello, World!")
    .id("hello-world")

pub fn get_id(&self) -> String

Get the id of the Tag.

Examples

let heading = h1!("Hello, World!").id("hello-world-id");
div!(heading.clone(), br!(), "id ", heading.get_id())

pub fn class(self, class: impl AsRef<str>) -> Self

Set the class of the Tag.

Examples

div!("Hello, World!")
    .class("heading")

pub fn get_class(&self) -> String

Get the class of the Tag.

Examples

let heading = h1!("Hello, World!").class("heading");
div!(heading.clone(), br!(), "class ", heading.get_class())

pub fn attr(self, key: impl AsRef<str>, value: impl AsRef<str>) -> Self

Set the attribute of the Tag by key and value.

Examples

div!("Hello, World!")
    .attr("id", "hello-world")

pub fn get_attr(&self, key: impl AsRef<str>) -> Option<String>

Get the attribute of the Tag by key.

Examples

let heading = h1!("Hello, World!").attr("id", "hello-world");
div!(
    heading.clone(),
    br!(),
    "attr ",
    heading.get_attr("id").unwrap()
)

impl Tag<HtmlInputElement>

pub fn bind<T>(self, var: T) -> Self where
    T: StateTrait + 'static,
    T::Value: FromStr + Default, 

One way bind to the input element. Any change in the state variable won't be reflected back to the input element.

Examples

let state = StateMutex::new(String::new());
div!(
    state.clone(),
    br!(),
    input!("text").bind(state.clone()),
    input!("text").bind(state)
)

pub fn double_bind<T>(self, var: T) -> Self where
    T: StateTrait + 'static,
    T::Value: FromStr + Default,
    T::Channel: Deref<Target = String>, 

Two way bind to the input element. Any change in the state variable will be reflected back to the input element.

Examples

let state = StateMutex::new(String::new());
div!(
    state.clone(),
    br!(),
    input!("text").double_bind(state.clone()),
    input!("text").double_bind(state)
)

pub fn bind_func<T, F>(self, var: T, func: F) -> Self where
    T: StateTrait + 'static,
    F: FnOnce(String) -> T::Value,
    F: 'static + Copy, 

A function to bind to the input element. This function gets called every time the event input fires i.e. when the user enters and input.

Examples

let state = StateAtomic::new(0usize);
div!(
    state.clone(),
    br!(),
    input!("text").bind_func(state, |x| x.len())
)

pub fn placeholder(self, text: impl AsRef<str>) -> Self

To add placeholder for the input element.

Examples

input!("text")
    .placeholder("Enter something...")

Trait Implementations

impl<T> AsRef<Node> for Tag<T> where
    T: JsCast, 

fn as_ref(&self) -> &Node

Performs the conversion.

impl<T: Clone> Clone for Tag<T>

fn clone(&self) -> Tag<T>

Returns a copy of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<T> Component for Tag<T> where
    T: JsCast, 

impl<T> Deref for Tag<T>

type Target = T

The resulting type after dereferencing.

fn deref(&self) -> &Self::Target

Dereferences the value.

impl<T> DerefMut for Tag<T>

fn deref_mut(&mut self) -> &mut Self::Target

Mutably dereferences the value.

impl<T> From<Tag<T>> for Node where
    T: JsCast, 

fn from(tag: Tag<T>) -> Self

Performs the conversion.

impl<T> From<Tag<T>> for Node where
    T: JsCast, 

fn from(tag: Tag<T>) -> Self

Performs the conversion.