complex.rsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. onmousedown: 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. for i in 0..10 {
  48. Component { key: "{i}", blah: 120 }
  49. }
  50. for i in 0..10 {
  51. Component { key: "{i}" }
  52. }
  53. for i in 0..10 {
  54. div { key: "{i}", blah: 120 }
  55. }
  56. for i in 0..10 {
  57. div { key: "{i}" }
  58. }
  59. div {
  60. "asdbascasdbasd"
  61. "asbdasbdabsd"
  62. {asbdabsdbasdbas}
  63. }
  64. }