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

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 イベント型
onabortEvent
onauxclickMouseEvent
onblurFocusEvent
oncancelEvent
oncanplayEvent
oncanplaythroughEvent
onchangeChangeData
onclickMouseEvent
oncloseEvent
oncontextmenuMouseEvent
oncuechangeEvent
ondblclickMouseEvent
ondragDragEvent
ondragendDragEvent
ondragenterDragEvent
ondragexitDragEvent
ondragleaveDragEvent
ondragoverDragEvent
ondragstartDragEvent
ondropDragEvent
ondurationchangeEvent
onemptiedEvent
onendedEvent
onerrorEvent
onfocusFocusEvent
onformdataEvent
oninputInputData
oninvalidEvent
onkeydownKeyboardEvent
onkeypressKeyboardEvent
onkeyupKeyboardEvent
onloadEvent
onloadeddataEvent
onloadedmetadataEvent
onloadstartProgressEvent
onmousedownMouseEvent
onmouseenterMouseEvent
onmouseleaveMouseEvent
onmousemoveMouseEvent
onmouseoutMouseEvent
onmouseoverMouseEvent
onmouseupMouseEvent
onpauseEvent
onplayEvent
onplayingEvent
onprogressProgressEvent
onratechangeEvent
onresetEvent
onresizeEvent
onscrollEvent
onsecuritypolicyviolationEvent
onseekedEvent
onseekingEvent
onselectEvent
onslotchangeEvent
onstalledEvent
onsubmitFocusEvent
onsuspendEvent
ontimeupdateEvent
ontoggleEvent
onvolumechangeEvent
onwaitingEvent
onwheelWheelEvent
oncopyEvent
oncutEvent
onpasteEvent
onanimationcancelAnimationEvent
onanimationendAnimationEvent
onanimationiterationAnimationEvent
onanimationstartAnimationEvent
ongotpointercapturePointerEvent
onloadendProgressEvent
onlostpointercapturePointerEvent
onpointercancelPointerEvent
onpointerdownPointerEvent
onpointerenterPointerEvent
onpointerleavePointerEvent
onpointerlockchangeEvent
onpointerlockerrorEvent
onpointermovePointerEvent
onpointeroutPointerEvent
onpointeroverPointerEvent
onpointerupPointerEvent
onselectionchangeEvent
onselectstartEvent
onshowEvent
ontouchcancelTouchEvent
ontouchendTouchEvent
ontouchmoveTouchEvent
ontouchstartTouchEvent
ontransitioncancelTransitionEvent
ontransitionendTransitionEvent
ontransitionrunTransitionEvent
ontransitionstartTransitionEvent