1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- rsx! {
- // Complex nesting with components
- button {
- class: "flex items-center pl-3 py-3 pr-2 text-gray-500 hover:bg-indigo-50 rounded",
- onclick: move |evt| {
- show_user_menu.set(!show_user_menu.get());
- evt.cancel_bubble();
- },
- onmousedown: move |evt| show_user_menu.set(!show_user_menu.get()),
- span { class: "inline-block mr-4", icons::icon_14 {} }
- span { "Settings" }
- }
- // Complex nesting with handlers
- li {
- Link {
- class: "flex items-center pl-3 py-3 pr-4 {active_class} rounded",
- to: "{to}",
- span { class: "inline-block mr-3", icons::icon_0 {} }
- span { "{name}" }
- {children.is_some().then(|| rsx! {
- span {
- class: "inline-block ml-auto hover:bg-gray-500",
- onclick: move |evt| {
- // open.set(!open.get());
- evt.cancel_bubble();
- },
- icons::icon_8 {}
- }
- })}
- }
- div { class: "px-4", {is_current.then(|| rsx!{ children })} }
- }
- // No nesting
- Component {
- adsasd: "asd",
- onclick: move |_| {
- let blah = 120;
- }
- }
- // Component path
- my::thing::Component {
- adsasd: "asd",
- onclick: move |_| {
- let blah = 120;
- }
- }
- for i in 0..10 {
- Component { key: "{i}", blah: 120 }
- }
- for i in 0..10 {
- Component { key: "{i}" }
- }
- for i in 0..10 {
- div { key: "{i}", blah: 120 }
- }
- for i in 0..10 {
- div { key: "{i}" }
- }
- div {
- "asdbascasdbasd"
- "asbdasbdabsd"
- {asbdabsdbasdbas}
- }
- }
|