Crate consecuit_html[−][src]
Expand description
HTML components for consecuit.
This crate provides components like div
, span
, table
for consecuit.
Basic usage
Also see the docs at consecuit, as it also contain some info on how to use this.
First, import the prelude:
use consecuit_html::prelude::*;
Then you can use the components in the cc_tree!
macro with the same structure as HTML:
cc_tree!( <div> <div> </div> </div> <span>"hello"</span> )
Props
All components in this crate takes props that can be built with builder pattern.
Start with html_props()
, then add your attributes.
Like this:
cc_tree!( <div {html_props().class_name("container container-box").onclick(click_handler)}> </div> )
String attributes like class_name
or href
take anything that is Into<Cow<'static, str>>
.
In the code above, class_name
can take "container container-box"
because it is &'static str
which is Into<Cow<'static, str>>
.
Event attributes like onclick
or oninput
take a Callback
.
A Callback
can be created with Callback::new
, like this:
let click_handler = Callback::new(move |ev: web_sys::MouseEvent| { web_sys::console::log_1( &"You clicked the button!".into() ); }); cc_tree!( <button {html_props().onclick(click_handler)}>"click me!"</button> )
Sometimes you may get error about ambigous props.
For example, many different components take href
.
The compiler won’t allow this:
<a {html_props().href("https://example.com")}>"Go to web"</a>
You have to use HtmlProps<(web_sys type of your element)> instead. For example:
<a {HtmlProps::<web_sys::HtmlAnchorElement>::new().href("https://example.com")}>"Go to web"</a>
Reference
To get a reference to the underlying web_sys element, you can use the reference
prop.
The reference
prop takes a Reference of Option of the element type.
For instance, the input tag (<input>
) has web_sys::HtmlInputElement as the underlying element.
So its reference must be a Reference<Option<web_sys::HtmlInputElement>>
.
let (cc, input_ref): (_, Reference<Option<web_sys::HtmlInputElement>>) = cc.hook(use_ref, ()); cc_tree!( <input {html_props().reference(input_ref)} /> )
The Option inside the reference is guarunteed to be Some after the component rendered atleast once.
You can then use the methods in Reference to do things with the underlying web_sys element.
For example, this read the value of an and set it to empty.
let (cc, input_ref): (_, Reference<Option<web_sys::HtmlInputElement>>) = cc.hook(use_ref, ()); let submit_click_handler = Callback::new(move |_ev| { let input_value = input_ref.visit_with(|opt: &Option<web_sys::HtmlInputElement>| { // Unwrap the Option<web_sys::HtmlInputElement> let inp: &web_sys::HtmlInputElement = opt.as_ref().unwrap(); // Get the value let value = inp.value(); // Set it to empty inp.set_value(""); value }).unwrap(); web_sys::console::log_1(&format!("The submitted value was: {}", input_value).into()); }); cc_tree!( <input {html_props().reference(input_ref)} /> <button {html_props().onclick(submit_click_handler)}>"submit"</button> )
Notes
Most of the components and props in this crate are generated by a combination of parsing web_sys’s API and scraping MDN.
Only attributes with a set_
method provided by web_sys are available as props.
For example, web_sys has set_class_name
, so we have class_name
prop.
Most notably missing is styling. web_sys does not have set_style
. (it has a more sophisicated system for styling).
You have to stick with class names and CSS for now.
Contributions are welcome.
Modules
callback | |
components | |
elem | |
misc_components | |
prelude |