元素

标签结构

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

  1. html! {
  2.   <div id="my_div"></div>
  3. }
  1. html! {
  2.   <div id="my_div"> // <- 缺少闭合标签
  3. }
  1. html! {
  2.   <input id="my_input" />
  3. }
  1. html! {
  2.   <input id="my_input"> // <- 没有自闭合
  3. }

元素 - 图1备注

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

Children

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

  1. html! {
  2.     <div>
  3.         <div data-key="abc"></div>
  4.         <div class="parent">
  5.             <span class="child" value="anything"></span>
  6.             <label for="first-name">{ "First Name" }</label>
  7.             <input type="text" id="first-name" value="placeholder" />
  8.             <input type="checkbox" checked=true />
  9.             <textarea value="write a story" />
  10.             <select name="status">
  11.                 <option selected=true disabled=false value="">{ "Selected" }</option>
  12.                 <option selected=false disabled=true value="">{ "Unselected" }</option>
  13.             </select>
  14.         </div>
  15.     </div>
  16. }
  1. html! {
  2.     <svg width="149" height="147" viewBox="0 0 149 147" fill="none" xmlns="http://www.w3.org/2000/svg">
  3.         <path d="M60.5776 13.8268L51.8673 42.6431L77.7475 37.331L60.5776 13.8268Z" fill="#DEB819"/>
  4.         <path d="M108.361 94.9937L138.708 90.686L115.342 69.8642" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
  5.         <g filter="url(#filter0_d)">
  6.             <circle cx="75.3326" cy="73.4918" r="55" fill="#FDD630"/>
  7.             <circle cx="75.3326" cy="73.4918" r="52.5" stroke="black" stroke-width="5"/>
  8.         </g>
  9.         <circle cx="71" cy="99" r="5" fill="white" fill-opacity="0.75" stroke="black" stroke-width="3"/>
  10.         <defs>
  11.             <filter id="filter0_d" x="16.3326" y="18.4918" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  12.                 <feGaussianBlur stdDeviation="2"/>
  13.                 <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"/>
  14.             </filter>
  15.         </defs>
  16.     </svg>
  17. }

Classes

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

  1. html! {
  2.   <div class="container"></div>
  3. }
  1. html! {
  2.   <div class="container center-align"></div>
  3. }
  1. html! {
  2.   <div class=format!("{}-container", size)></div>
  3. }
  1. html! {
  2.   <div class=self.classes()></div>
  3. }
  1. html! {
  2.   <div class=("class-1", "class-2")></div>
  3. }
  1. html! {
  2.   <div class=vec!["class-1", "class-2"]></div>
  3. }

监听器

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

  1. struct MyComponent {
  2.     link: ComponentLink<Self>,
  3. }
  5. enum Msg {
  6.     Click,
  7. }
  9. impl Component for MyComponent {
  10.     type Message = Msg;
  11.     type Properties = ();
  13.     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
  14.         MyComponent { link }
  15.     }
  17.     fn update(&mut self, msg: Self::Message) -> ShouldRender {
  18.         match msg {
  19.             Msg::Click => {
  20.                 // 处理 Click
  21.             }
  22.         }
  23.     }
  25.     fn view(&self) -> Html {
  26.         // 从组件 link 中创建回调来在组件中处理它
  27.         let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);
  28.         html! {
  29.             <button onclick=click_callback>
  30.                 { "Click me!" }
  31.             </button>
  32.         }
  33.     }
  34. }
  1. struct MyComponent {
  2.     worker: Dispatcher<MyWorker>,
  3. }
  5. impl Component for MyComponent {
  6.     type Message = ();
  7.     type Properties = ();
  9.     fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
  10.         MyComponent {
  11.             worker: MyWorker::dispatcher()
  12.         }
  13.     }
  15.     fn update(&mut self, _: Self::Message) -> ShouldRender {
  16.         false
  17.     }
  19.     fn view(&self) -> Html {
  20.         // 从 worker 中创建回调来在另一个上下文中处理它
  21.         let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);
  22.         html! {
  23.             <button onclick=click_callback>
  24.                 { "Click me!" }
  25.             </button>
  26.         }
  27.     }
  28. }
  1. struct MyComponent;
  3. impl Component for MyComponent {
  4.     type Message = ();
  5.     type Properties = ();
  7.     fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
  8.         MyComponent
  9.     }
  11.     fn update(&mut self, _: Self::Message) -> ShouldRender {
  12.         false
  13.     }
  15.     fn view(&self) -> Html {
  16.         // 创建一个短暂的回调
  17.         let click_callback = Callback::from(|| {
  18.             ConsoleService::log("clicked!");
  19.         });
  21.         html! {
  22.             <button onclick=click_callback>
  23.                 { "Click me!" }
  24.             </button>
  25.         }
  26.     }
  27. }