元素

标签结构

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

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