Version: Next

Elements

タグ構造

要素のタグは<... />のような自己完結タグか、開始タグに対応した終了タグを持っている必要があります。

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

便利さのために、普通は終了タグを必要とする要素は自己完結タグとすることができます。例えばhtml! { <div class="placeholder" /> }と書くのは有効です。

子

複雑にネストした HTML や SVG のレイアウトを書くのには以下のようにするのが楽です: **

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>
}

クラス

要素へのクラスを特定する便利なやり方はたくさんあります:

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>
}

リスナー

リスナー属性はクロージャのラッパーであるCallbackに渡される必要があります。コールバックをどのように作るかはアプリをリスナーイベントにどう反応させたいかによります。

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::log("clicked!");
        });

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

イベントの型

note

以下のテーブルにある全てのイベントの型はyew::eventsで再エクスポートされています。 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.

イベント名	`web_sys` イベント型
`onabort`	Event
`onauxclick`	MouseEvent
`onblur`	FocusEvent
`oncancel`	Event
`oncanplay`	Event
`oncanplaythrough`	Event
`onchange`	ChangeData
`onclick`	MouseEvent
`onclose`	Event
`oncontextmenu`	MouseEvent
`oncuechange`	Event
`ondblclick`	MouseEvent
`ondrag`	DragEvent
`ondragend`	DragEvent
`ondragenter`	DragEvent
`ondragexit`	DragEvent
`ondragleave`	DragEvent
`ondragover`	DragEvent
`ondragstart`	DragEvent
`ondrop`	DragEvent
`ondurationchange`	Event
`onemptied`	Event
`onended`	Event
`onerror`	Event
`onfocus`	FocusEvent
`onformdata`	Event
`oninput`	InputData
`oninvalid`	Event
`onkeydown`	KeyboardEvent
`onkeypress`	KeyboardEvent
`onkeyup`	KeyboardEvent
`onload`	Event
`onloadeddata`	Event
`onloadedmetadata`	Event
`onloadstart`	ProgressEvent
`onmousedown`	MouseEvent
`onmouseenter`	MouseEvent
`onmouseleave`	MouseEvent
`onmousemove`	MouseEvent
`onmouseout`	MouseEvent
`onmouseover`	MouseEvent
`onmouseup`	MouseEvent
`onpause`	Event
`onplay`	Event
`onplaying`	Event
`onprogress`	ProgressEvent
`onratechange`	Event
`onreset`	Event
`onresize`	Event
`onscroll`	Event
`onsecuritypolicyviolation`	Event
`onseeked`	Event
`onseeking`	Event
`onselect`	Event
`onslotchange`	Event
`onstalled`	Event
`onsubmit`	FocusEvent
`onsuspend`	Event
`ontimeupdate`	Event
`ontoggle`	Event
`onvolumechange`	Event
`onwaiting`	Event
`onwheel`	WheelEvent
`oncopy`	Event
`oncut`	Event
`onpaste`	Event
`onanimationcancel`	AnimationEvent
`onanimationend`	AnimationEvent
`onanimationiteration`	AnimationEvent
`onanimationstart`	AnimationEvent
`ongotpointercapture`	PointerEvent
`onloadend`	ProgressEvent
`onlostpointercapture`	PointerEvent
`onpointercancel`	PointerEvent
`onpointerdown`	PointerEvent
`onpointerenter`	PointerEvent
`onpointerleave`	PointerEvent
`onpointerlockchange`	Event
`onpointerlockerror`	Event
`onpointermove`	PointerEvent
`onpointerout`	PointerEvent
`onpointerover`	PointerEvent
`onpointerup`	PointerEvent
`onselectionchange`	Event
`onselectstart`	Event
`onshow`	Event
`ontouchcancel`	TouchEvent
`ontouchend`	TouchEvent
`ontouchmove`	TouchEvent
`ontouchstart`	TouchEvent
`ontransitioncancel`	TransitionEvent
`ontransitionend`	TransitionEvent
`ontransitionrun`	TransitionEvent
`ontransitionstart`	TransitionEvent

タグ構造​

子​

クラス​

リスナー​

イベントの型​

タグ構造

子

クラス

リスナー

イベントの型