Elements
Tag Structure
Element tags must either self-close <... />
or have a corresponding close tag for each open tag
html! {
<div id="my_div"></div>
}
html! {
<div id="my_div"> // <- MISSING CLOSE TAG
}
html! {
<input id="my_input" />
}
html! {
<input id="my_input"> // <- MISSING SELF-CLOSE
}
note
For convenience, elements which usually require a closing tag are allowed to self-close. For example, writing html! { <div class="placeholder" /> }
is valid.
Children
Create complex nested HTML and SVG layouts with ease:
html! {
<div>
<div data-key="abc"></div>
<div class="parent">
<span class="child" value="anything"></span>
<label for="first-name">{ "First Name" }</label>
<input type="text" id="first-name" value="placeholder" />
<input type="checkbox" checked=true />
<textarea value="write a story" />
<select name="status">
<option selected=true disabled=false value="">{ "Selected" }</option>
<option selected=false disabled=true value="">{ "Unselected" }</option>
</select>
</div>
</div>
}
html! {
<svg width="149" height="147" viewBox="0 0 149 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M60.5776 13.8268L51.8673 42.6431L77.7475 37.331L60.5776 13.8268Z" fill="#DEB819"/>
<path d="M108.361 94.9937L138.708 90.686L115.342 69.8642" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<g filter="url(#filter0_d)">
<circle cx="75.3326" cy="73.4918" r="55" fill="#FDD630"/>
<circle cx="75.3326" cy="73.4918" r="52.5" stroke="black" stroke-width="5"/>
</g>
<circle cx="71" cy="99" r="5" fill="white" fill-opacity="0.75" stroke="black" stroke-width="3"/>
<defs>
<filter id="filter0_d" x="16.3326" y="18.4918" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
</filter>
</defs>
</svg>
}
Classes
There are a number of convenient ways to specify classes for an element:
html! {
<div class="container"></div>
}
html! {
<div class="container center-align"></div>
}
html! {
<div class=format!("{}-container", size)></div>
}
html! {
<div class=self.classes()></div>
}
html! {
<div class=("class-1", "class-2")></div>
}
html! {
<div class=vec!["class-1", "class-2"]></div>
}
Listeners
Listener attributes need to be passed a Callback
which is a wrapper around a closure. How you create your callback depends on how you wish your app to react to a listener event:
struct MyComponent {
link: ComponentLink<Self>,
}
enum Msg {
Click,
}
impl Component for MyComponent {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
MyComponent { link }
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::Click => {
// Handle Click
}
}
}
fn view(&self) -> Html {
// Create a callback from a component link to handle it in a component
let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);
html! {
<button onclick=click_callback>
{ "Click me!" }
</button>
}
}
}
struct MyComponent {
worker: Dispatcher<MyWorker>,
}
impl Component for MyComponent {
type Message = ();
type Properties = ();
fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
MyComponent {
worker: MyWorker::dispatcher()
}
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
false
}
fn view(&self) -> Html {
// Create a callback from a worker to handle it in another context
let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);
html! {
<button onclick=click_callback>
{ "Click me!" }
</button>
}
}
}
struct MyComponent;
impl Component for MyComponent {
type Message = ();
type Properties = ();
fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
MyComponent
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
false
}
fn view(&self) -> Html {
// Create an ephemeral callback
let click_callback = Callback::from(|| {
ConsoleService::new().log("clicked!");
});
html! {
<button onclick=click_callback>
{ "Click me!" }
</button>
}
}
}
Event Types
note
In the following table web-sys
's event types should only be used if you're using yew
with web-sys
(this is enabled by default). Use stdweb
's event types if you're using the yew-stdweb
crate. See
the documentation page about whether to choose web-sys
or stdweb
for more information.
note
All the event types mentioned in the following table are re-exported under yew::events
. Using the types from
yew::events
makes it easier to ensure version compatibility than if you were to manually include web-sys
or stdweb
as dependencies in your crate because you won't end up using a version which conflicts with
the version Yew specifies.
Event name | web_sys Event Type | stdweb Event Type |
---|---|---|
onabort | Event | ResourceAbortEvent |
onauxclick | MouseEvent | AuxClickEvent |
onblur | FocusEvent | BlurEvent |
oncancel | Event | Unsupported |
oncanplay | Event | Unsupported |
oncanplaythrough | Event | Unsupported |
onchange | ChangeData | ChangeData |
onclick | MouseEvent | ClickEvent |
onclose | Event | Unsupported |
oncontextmenu | MouseEvent | ContextMenuEvent |
oncuechange | Event | Unsupported |
ondblclick | MouseEvent | DoubleClickEvent |
ondrag | DragEvent | DragEvent |
ondragend | DragEvent | DragEndEvent |
ondragenter | DragEvent | DragEnterEvent |
ondragexit | DragEvent | DragExitEvent |
ondragleave | DragEvent | DragLeaveEvent |
ondragover | DragEvent | DragOverEvent |
ondragstart | DragEvent | DragStartEvent |
ondrop | DragEvent | DragDropEvent |
ondurationchange | Event | Unsupported |
onemptied | Event | Unsupported |
onended | Event | Unsupported |
onerror | Event | ResourceErrorEvent |
onfocus | FocusEvent | FocusEvent |
onformdata | Event | Unsupported |
oninput | InputData | InputData |
oninvalid | Event | Unsupported |
onkeydown | KeyboardEvent | KeyDownEvent |
onkeypress | KeyboardEvent | KeyPressEvent |
onkeyup | KeyboardEvent | KeyUpEvent |
onload | Event | ResourceLoadEvent |
onloadeddata | Event | Unsupported |
onloadedmetadata | Event | Unsupported |
onloadstart | ProgressEvent | LoadStartEvent |
onmousedown | MouseEvent | MouseDownEvent |
onmouseenter | MouseEvent | MouseEnterEvent |
onmouseleave | MouseEvent | MouseLeaveEvent |
onmousemove | MouseEvent | MouseMoveEvent |
onmouseout | MouseEvent | MouseOutEvent |
onmouseover | MouseEvent | MouseOverEvent |
onmouseup | MouseEvent | MouseUpEvent |
onpause | Event | Unsupported |
onplay | Event | Unsupported |
onplaying | Event | Unsupported |
onprogress | ProgressEvent | ProgressEvent |
onratechange | Event | Unsupported |
onreset | Event | Unsupported |
onresize | Event | ResizeEvent |
onscroll | Event | ScrollEvent |
onsecuritypolicyviolation | Event | Unsupported |
onseeked | Event | Unsupported |
onseeking | Event | Unsupported |
onselect | Event | Unsupported |
onslotchange | Event | SlotChangeEvent |
onstalled | Event | Unsupported |
onsubmit | FocusEvent | SubmitEvent |
onsuspend | Event | Unsupported |
ontimeupdate | Event | Unsupported |
ontoggle | Event | Unsupported |
onvolumechange | Event | Unsupported |
onwaiting | Event | Unsupported |
onwheel | WheelEvent | MouseWheelEvent |
oncopy | Event | Unsupported |
oncut | Event | Unsupported |
onpaste | Event | Unsupported |
onanimationcancel | AnimationEvent | Unsupported |
onanimationend | AnimationEvent | Unsupported |
onanimationiteration | AnimationEvent | Unsupported |
onanimationstart | AnimationEvent | Unsupported |
ongotpointercapture | PointerEvent | GotPointerCaptureEvent |
onloadend | ProgressEvent | LoadEndEvent |
onlostpointercapture | PointerEvent | LostPointerCaptureEvent |
onpointercancel | PointerEvent | PointerCancelEvent |
onpointerdown | PointerEvent | PointerDownEvent |
onpointerenter | PointerEvent | PointerEnterEvent |
onpointerleave | PointerEvent | PointerLeaveEvent |
onpointerlockchange | Event | PointerLockChangeEvent |
onpointerlockerror | Event | PointerLockErrorEvent |
onpointermove | PointerEvent | PointerMoveEvent |
onpointerout | PointerEvent | PointerOutEvent |
onpointerover | PointerEvent | PointerOverEvent |
onpointerup | PointerEvent | PointerUpEvent |
onselectionchange | Event | SelectionChangeEvent |
onselectstart | Event | Unsupported |
onshow | Event | Unsupported |
ontouchcancel | TouchEvent | TouchCancel |
ontouchend | TouchEvent | TouchEnd |
ontouchmove | TouchEvent | TouchMove |
ontouchstart | TouchEvent | TouchStart |
ontransitioncancel | TransitionEvent | Unsupported |
ontransitionend | TransitionEvent | Unsupported |
ontransitionrun | TransitionEvent | Unsupported |
ontransitionstart | TransitionEvent | Unsupported |