simple.rsx 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. rsx! {
  2. div { "hello world!" }
  3. div {
  4. "hello world!"
  5. "goodbye world!"
  6. }
  7. // Simple div
  8. div { "hello world!" }
  9. // Compression with attributes
  10. div { key: "{a}", class: "ban", style: "color: red" }
  11. // But not too many attributes (3 max)
  12. div {
  13. id: "{a}",
  14. class: "ban",
  15. style: "color: red",
  16. value: "{b}",
  17. }
  18. // Nested one level
  19. div {
  20. div { "nested" }
  21. }
  22. // Nested two level
  23. div {
  24. div {
  25. h1 { "highly nested" }
  26. }
  27. }
  28. // Anti-Nested two level
  29. div {
  30. div {
  31. div {
  32. h1 { "highly nested" }
  33. }
  34. }
  35. }
  36. // Compression
  37. h3 { class: "mb-2 text-xl font-bold", "Invite Member" }
  38. a { class: "text-white", "Send invitation" }
  39. // Props on tops
  40. 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",
  41. "Invite Member"
  42. }
  43. // No children, minimal props
  44. img { class: "mb-6 mx-auto h-24", src: "artemis-assets/images/friends.png" }
  45. // One level compression
  46. div {
  47. a {
  48. class: "py-2 px-3 bg-indigo-500 hover:bg-indigo-600 rounded text-xs text-white",
  49. href: "#",
  50. "Send invitation"
  51. }
  52. }
  53. // Components
  54. Component { ..Props {} }
  55. // multiline
  56. div {
  57. class: "asdaskjdhaskjdjaslkdjlakdjaslkdjaslkd asdaskjdhaskjdjaslkdjlakdjaslkdjaslkdasdaskjdhaskjdjaslkdjlakdjaslkdjaslkd",
  58. multiple: "asd",
  59. "hi"
  60. }
  61. }