complex.rsx 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. rsx! {
  2. // Complex nesting with components
  3. button {
  4. class: "flex items-center pl-3 py-3 pr-2 text-gray-500 hover:bg-indigo-50 rounded",
  5. onclick: move |evt| {
  6. show_user_menu.set(!show_user_menu.get());
  7. evt.cancel_bubble();
  8. },
  9. onclick: move |evt| show_user_menu.set(!show_user_menu.get()),
  10. span { class: "inline-block mr-4", icons::icon_14 {} }
  11. span { "Settings" }
  12. }
  13. // Complex nesting with handlers
  14. li {
  15. Link {
  16. class: "flex items-center pl-3 py-3 pr-4 {active_class} rounded",
  17. to: "{to}",
  18. span { class: "inline-block mr-3", icons::icon_0 {} }
  19. span { "{name}" }
  20. {children.is_some().then(|| rsx! {
  21. span {
  22. class: "inline-block ml-auto hover:bg-gray-500",
  23. onclick: move |evt| {
  24. // open.set(!open.get());
  25. evt.cancel_bubble();
  26. },
  27. icons::icon_8 {}
  28. }
  29. })}
  30. }
  31. div { class: "px-4", {is_current.then(|| rsx!{ children })} }
  32. }
  33. // No nesting
  34. Component {
  35. adsasd: "asd",
  36. onclick: move |_| {
  37. let blah = 120;
  38. }
  39. }
  40. // Component path
  41. my::thing::Component {
  42. adsasd: "asd",
  43. onclick: move |_| {
  44. let blah = 120;
  45. }
  46. }
  47. div { "asdbascasdbasd", "asbdasbdabsd", {asbdabsdbasdbas} }
  48. }