メインコンテンツまでスキップ
Version: 0.18.0

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

以下のテーブルではyewweb-sysと使う場合 (デフォルトでは使うようになっている) web-sysのイベントの型が使われるべきです。 yew-stdwebクレートを使う場合はstdwebのイベントの型を使用してください。 詳細についてはweb-sysstdwebをどちらを使うべきかについてのドキュメントをご確認ください。

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 イベント型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サポート無し