元素标签

标签结构

元素标签必须是自闭合的 <... />,或是每个标签都有一个对应的闭合标签。


#![allow(unused)]
fn main() {
html! {
  <div id="my_div"></div>
}
}

#![allow(unused)]
fn main() {
html! {
  <div id="my_div"> // <- 缺少闭合标签
}
}

#![allow(unused)]
fn main() {
html! {
  <input id="my_input" />
}
}

#![allow(unused)]
fn main() {
html! {
  <input id="my_input"> // <- 没有自闭合
}
}

:::note 为方便起见,一些 通常 需要闭合标签的元素是被允许自闭合的。例如,html! { <div class="placeholder" /> } 这样写是有效的。 :::

Children

轻松创建复杂的嵌套 HTML 和 SVG 布局:


#![allow(unused)]
fn main() {
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>
}
}

#![allow(unused)]
fn main() {
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

有许多方便的选项可用于元素指定 classes:


#![allow(unused)]
fn main() {
html! {
  <div class="container"></div>
}
}

#![allow(unused)]
fn main() {
html! {
  <div class="container center-align"></div>
}
}

#![allow(unused)]
fn main() {
html! {
  <div class=format!("{}-container", size)></div>
}
}

#![allow(unused)]
fn main() {
html! {
  <div class=self.classes()></div>
}
}

#![allow(unused)]
fn main() {
html! {
  <div class=("class-1", "class-2")></div>
}
}

#![allow(unused)]
fn main() {
html! {
  <div class=vec!["class-1", "class-2"]></div>
}
}

监听器

监听器属性需要传递一个由闭包包裹的 Callback。创建回调的方式取决于你希望你的应用程序如何响应监听器事件:


#![allow(unused)]
fn main() {
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 => {
                // 处理 Click
            }
        }
    }

    fn view(&self) -> Html {
        // 从组件 link 中创建回调来在组件中处理它
        let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);
        html! {
            <button onclick=click_callback>
                { "Click me!" }
            </button>
        }
    }
}
}

#![allow(unused)]
fn main() {
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 {
        // 从 worker 中创建回调来在另一个上下文中处理它
        let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);
        html! {
            <button onclick=click_callback>
                { "Click me!" }
            </button>
        }
    }
}
}

#![allow(unused)]
fn main() {
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 {
        // 创建一个短暂的回调
        let click_callback = Callback::from(|| {
            ConsoleService::new().log("clicked!");
        });

        html! {
            <button onclick=click_callback>
                { "Click me!" }
            </button>
        }
    }
}
}

事件类型

:::note 在下表中, 只有当yewweb-sys一起使用时,才应使用web-sys的事件类型(默认情况下启用)。如果您使用的是yew-stdweb crate,请使用stdweb。更多有关信息,请参见有关选择是选择web-sys还是stdweb :::

:::note 下表中提到的所有事件类型都已在yew::events下重新导出。 比起手动将 web-sysstdweb作为依赖项添加到你的 crate 中, 使用yew::events中的类型更容易确保版本兼容性,因为这样可以避免与指定的 Yew 版本冲突。 :::

事件名称web_sys 事件类型stdweb 事件类型
onabortEventResourceAbortEvent
onauxclickMouseEventAuxClickEvent
onblurFocusEventBlurEvent
oncancelEvent不支持
oncanplayEvent不支持
oncanplaythroughEvent不支持
onchangeChangeDataChangeData
onclickMouseEventClickEvent
oncloseEvent不支持
oncontextmenuMouseEventContextMenuEvent
oncuechangeEvent不支持
ondblclickMouseEventDoubleClickEvent
ondragDragEventDragEvent
ondragendDragEventDragEndEvent
ondragenterDragEventDragEnterEvent
ondragexitDragEventDragExitEvent
ondragleaveDragEventDragLeaveEvent
ondragoverDragEventDragOverEvent
ondragstartDragEventDragStartEvent
ondropDragEventDragDropEvent
ondurationchangeEvent不支持
onemptiedEvent不支持
onendedEvent不支持
onerrorEventResourceErrorEvent
onfocusFocusEventFocusEvent
onformdataEvent不支持
oninputInputDataInputData
oninvalidEvent不支持
onkeydownKeyboardEventKeyDownEvent
onkeypressKeyboardEventKeyPressEvent
onkeyupKeyboardEventKeyUpEvent
onloadEventResourceLoadEvent
onloadeddataEvent不支持
onloadedmetadataEvent不支持
onloadstartProgressEventLoadStartEvent
onmousedownMouseEventMouseDownEvent
onmouseenterMouseEventMouseEnterEvent
onmouseleaveMouseEventMouseLeaveEvent
onmousemoveMouseEventMouseMoveEvent
onmouseoutMouseEventMouseOutEvent
onmouseoverMouseEventMouseOverEvent
onmouseupMouseEventMouseUpEvent
onpauseEvent不支持
onplayEvent不支持
onplayingEvent不支持
onprogressProgressEventProgressEvent
onratechangeEvent不支持
onresetEvent不支持
onresizeEventResizeEvent
onscrollEventScrollEvent
onsecuritypolicyviolationEvent不支持
onseekedEvent不支持
onseekingEvent不支持
onselectEvent不支持
onslotchangeEventSlotChangeEvent
onstalledEvent不支持
onsubmitFocusEventSubmitEvent
onsuspendEvent不支持
ontimeupdateEvent不支持
ontoggleEvent不支持
onvolumechangeEvent不支持
onwaitingEvent不支持
onwheelWheelEventMouseWheelEvent
oncopyEvent不支持
oncutEvent不支持
onpasteEvent不支持
onanimationcancelAnimationEvent不支持
onanimationendAnimationEvent不支持
onanimationiterationAnimationEvent不支持
onanimationstartAnimationEvent不支持
ongotpointercapturePointerEventGotPointerCaptureEvent
onloadendProgressEventLoadEndEvent
onlostpointercapturePointerEventLostPointerCaptureEvent
onpointercancelPointerEventPointerCancelEvent
onpointerdownPointerEventPointerDownEvent
onpointerenterPointerEventPointerEnterEvent
onpointerleavePointerEventPointerLeaveEvent
onpointerlockchangeEventPointerLockChangeEvent
onpointerlockerrorEventPointerLockErrorEvent
onpointermovePointerEventPointerMoveEvent
onpointeroutPointerEventPointerOutEvent
onpointeroverPointerEventPointerOverEvent
onpointerupPointerEventPointerUpEvent
onselectionchangeEventSelectionChangeEvent
onselectstartEvent不支持
onshowEvent不支持
ontouchcancelTouchEventTouchCancel
ontouchendTouchEventTouchEnd
ontouchmoveTouchEventTouchMove
ontouchstartTouchEventTouchStart
ontransitioncancelTransitionEvent不支持
ontransitionendTransitionEvent不支持
ontransitionrunTransitionEvent不支持
ontransitionstartTransitionEvent不支持