simple.rsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. rsx! {
  2. div { "hello world!" }
  3. div { "hello world!", "goodbye world!" }
  4. // Simple div
  5. div { "hello world!" }
  6. // Compression with attributes
  7. div { key: "a", class: "ban", style: "color: red" }
  8. // Nested one level
  9. div { div { "nested" } }
  10. // Nested two level
  11. div {
  12. div { h1 { "highly nested" } }
  13. }
  14. // Anti-Nested two level
  15. div {
  16. div {
  17. div { h1 { "highly nested" } }
  18. }
  19. }
  20. // Compression
  21. h3 { class: "mb-2 text-xl font-bold", "Invite Member" }
  22. a { class: "text-white", "Send invitation" }
  23. // Props on tops
  24. h3 { class: "mb-2 text-xl font-bold mb-2 text-xl font-bold mb-2 text-xl font-bold mb-2 text-xl font-bold mb-2 text-xl font-bold",
  25. "Invite Member"
  26. }
  27. // No children, minimal props
  28. img { class: "mb-6 mx-auto h-24", src: "artemis-assets/images/friends.png", alt: "" }
  29. // One level compression
  30. div {
  31. a { class: "py-2 px-3 bg-indigo-500 hover:bg-indigo-600 rounded text-xs text-white", href: "#",
  32. "Send invitation"
  33. }
  34. }
  35. // Components
  36. Component { ..Props {} }
  37. // multiline
  38. div {
  39. class: "asdaskjdhaskjdjaslkdjlakdjaslkdjaslkd asdaskjdhaskjdjaslkdjlakdjaslkdjaslkdasdaskjdhaskjdjaslkdjlakdjaslkdjaslkd",
  40. multiple: "asd",
  41. "hi"
  42. }
  43. }