2022-07-05 21:49:16 +00:00
|
|
|
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();
|
|
|
|
},
|
|
|
|
onclick: 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 {
|
2023-06-02 17:03:56 +00:00
|
|
|
Link {
|
|
|
|
class: "flex items-center pl-3 py-3 pr-4 {active_class} rounded",
|
|
|
|
to: "{to}",
|
2022-07-05 21:49:16 +00:00
|
|
|
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 {}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2022-09-28 23:47:10 +00:00
|
|
|
div { class: "px-4", is_current.then(|| rsx!{ children }) }
|
2022-07-05 21:49:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// No nesting
|
|
|
|
Component {
|
|
|
|
adsasd: "asd",
|
|
|
|
onclick: move |_| {
|
|
|
|
let blah = 120;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Component path
|
|
|
|
my::thing::Component {
|
|
|
|
adsasd: "asd",
|
|
|
|
onclick: move |_| {
|
|
|
|
let blah = 120;
|
|
|
|
}
|
|
|
|
}
|
2022-09-28 23:47:10 +00:00
|
|
|
|
|
|
|
div { asdbascasdbasd, asbdasbdabsd, asbdabsdbasdbas }
|
2022-07-05 21:49:16 +00:00
|
|
|
}
|