12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- rsx! {
- div { "hello world!" }
- div {
- "hello world!"
- "goodbye world!"
- }
- // Simple div
- div { "hello world!" }
- // Compression with attributes
- div { key: "{a}", class: "ban", style: "color: red" }
- // But not too many attributes (3 max)
- div {
- id: "{a}",
- class: "ban",
- style: "color: red",
- value: "{b}",
- }
- // Nested one level
- div {
- div { "nested" }
- }
- // Nested two level
- div {
- div {
- h1 { "highly nested" }
- }
- }
- // Anti-Nested two level
- div {
- div {
- div {
- h1 { "highly nested" }
- }
- }
- }
- // Compression
- h3 { class: "mb-2 text-xl font-bold", "Invite Member" }
- a { class: "text-white", "Send invitation" }
- // Props on tops
- 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",
- "Invite Member"
- }
- // No children, minimal props
- img { class: "mb-6 mx-auto h-24", src: "artemis-assets/images/friends.png" }
- // One level compression
- div {
- a {
- class: "py-2 px-3 bg-indigo-500 hover:bg-indigo-600 rounded text-xs text-white",
- href: "#",
- "Send invitation"
- }
- }
- // Components
- Component { ..Props {} }
- // multiline
- div {
- class: "asdaskjdhaskjdjaslkdjlakdjaslkdjaslkd asdaskjdhaskjdjaslkdjlakdjaslkdjaslkdasdaskjdhaskjdjaslkdjlakdjaslkdjaslkd",
- multiple: "asd",
- "hi"
- }
- }
|