0.17.3

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 nameweb_sys Event Typestdweb Event Type
onabortEventResourceAbortEvent
onauxclickMouseEventAuxClickEvent
onblurFocusEventBlurEvent
oncancelEventUnsupported
oncanplayEventUnsupported
oncanplaythroughEventUnsupported
onchangeChangeDataChangeData
onclickMouseEventClickEvent
oncloseEventUnsupported
oncontextmenuMouseEventContextMenuEvent
oncuechangeEventUnsupported
ondblclickMouseEventDoubleClickEvent
ondragDragEventDragEvent
ondragendDragEventDragEndEvent
ondragenterDragEventDragEnterEvent
ondragexitDragEventDragExitEvent
ondragleaveDragEventDragLeaveEvent
ondragoverDragEventDragOverEvent
ondragstartDragEventDragStartEvent
ondropDragEventDragDropEvent
ondurationchangeEventUnsupported
onemptiedEventUnsupported
onendedEventUnsupported
onerrorEventResourceErrorEvent
onfocusFocusEventFocusEvent
onformdataEventUnsupported
oninputInputDataInputData
oninvalidEventUnsupported
onkeydownKeyboardEventKeyDownEvent
onkeypressKeyboardEventKeyPressEvent
onkeyupKeyboardEventKeyUpEvent
onloadEventResourceLoadEvent
onloadeddataEventUnsupported
onloadedmetadataEventUnsupported
onloadstartProgressEventLoadStartEvent
onmousedownMouseEventMouseDownEvent
onmouseenterMouseEventMouseEnterEvent
onmouseleaveMouseEventMouseLeaveEvent
onmousemoveMouseEventMouseMoveEvent
onmouseoutMouseEventMouseOutEvent
onmouseoverMouseEventMouseOverEvent
onmouseupMouseEventMouseUpEvent
onpauseEventUnsupported
onplayEventUnsupported
onplayingEventUnsupported
onprogressProgressEventProgressEvent
onratechangeEventUnsupported
onresetEventUnsupported
onresizeEventResizeEvent
onscrollEventScrollEvent
onsecuritypolicyviolationEventUnsupported
onseekedEventUnsupported
onseekingEventUnsupported
onselectEventUnsupported
onslotchangeEventSlotChangeEvent
onstalledEventUnsupported
onsubmitFocusEventSubmitEvent
onsuspendEventUnsupported
ontimeupdateEventUnsupported
ontoggleEventUnsupported
onvolumechangeEventUnsupported
onwaitingEventUnsupported
onwheelWheelEventMouseWheelEvent
oncopyEventUnsupported
oncutEventUnsupported
onpasteEventUnsupported
onanimationcancelAnimationEventUnsupported
onanimationendAnimationEventUnsupported
onanimationiterationAnimationEventUnsupported
onanimationstartAnimationEventUnsupported
ongotpointercapturePointerEventGotPointerCaptureEvent
onloadendProgressEventLoadEndEvent
onlostpointercapturePointerEventLostPointerCaptureEvent
onpointercancelPointerEventPointerCancelEvent
onpointerdownPointerEventPointerDownEvent
onpointerenterPointerEventPointerEnterEvent
onpointerleavePointerEventPointerLeaveEvent
onpointerlockchangeEventPointerLockChangeEvent
onpointerlockerrorEventPointerLockErrorEvent
onpointermovePointerEventPointerMoveEvent
onpointeroutPointerEventPointerOutEvent
onpointeroverPointerEventPointerOverEvent
onpointerupPointerEventPointerUpEvent
onselectionchangeEventSelectionChangeEvent
onselectstartEventUnsupported
onshowEventUnsupported
ontouchcancelTouchEventTouchCancel
ontouchendTouchEventTouchEnd
ontouchmoveTouchEventTouchMove
ontouchstartTouchEventTouchStart
ontransitioncancelTransitionEventUnsupported
ontransitionendTransitionEventUnsupported
ontransitionrunTransitionEventUnsupported
ontransitionstartTransitionEventUnsupported
Last updated on 4/7/2021
← ComponentsLists →