rust/dx-admin-template
1
0
Fork 0
mirror of https://github.com/mztlive/dx-admin-template.git synced 2026-05-20 06:30:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix style

Browse Source
This commit is contained in:
tommy
2025-11-03 17:33:46 +08:00
parent b9124b384f
commit ae79bba769
3 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/styling/shadcn.css
View File

@@ -1038,6 +1038,12 @@
z-index: 45;
}
.ui-popover-trigger {
position: relative;
display: inline-flex;
align-items: center;
}
.ui-popover[data-placement="top"] {
transform: translate(-50%, -0.75rem);
}

15
src/components/ui/navigation_menu.rs
View File

@@ -23,29 +23,29 @@ impl NavigationItem {
#[component]
pub fn NavigationMenu(#[props(into)] items: Vec<NavigationItem>) -> Element {
let active = use_signal(|| 0usize);
let active = use_signal(|| None::<usize>);
let trigger_nodes: Vec<_> = items
.iter()
.enumerate()
.map(|(index, item)| {
let mut active_signal = active.clone();
let is_active = active() == index;
let is_active = active().is_some_and(|current| current == index);
rsx! {
button {
class: "ui-navmenu-trigger",
"data-open": if is_active { "true" } else { "false" },
onmouseenter: move |_| active_signal.set(index),
onclick: move |_| active_signal.set(index),
onmouseenter: move |_| active_signal.set(Some(index)),
onclick: move |_| active_signal.set(Some(index)),
"{item.label}"
}
}
})
.collect();
let selected_content = items
.get(active().min(items.len().saturating_sub(1)))
let selected_content = active()
.and_then(|index| items.get(index))
.map(|item| {
let description = item.description.clone();
rsx! {
@@ -63,9 +63,12 @@ pub fn NavigationMenu(#[props(into)] items: Vec<NavigationItem>) -> Element {
}
});
let mut reset_active = active.clone();
rsx! {
div {
class: "ui-navmenu",
onmouseleave: move |_| reset_active.set(None),
{trigger_nodes.into_iter()}
if let Some(content) = selected_content {
{content}

17
src/components/ui/popover.rs
View File

@@ -9,9 +9,10 @@ pub fn Popover(
let mut open = use_signal(|| false);
rsx! {
span {
style: "position: relative; display: inline-flex;",
onclick: move |_| open.set(!open()),
div {
class: "ui-popover-trigger",
style: "position: relative; display: inline-flex; align-items: center;",
onmousedown: move |_| open.set(!open()),
tabindex: 0,
onfocusout: move |_| open.set(false),
{trigger}
@@ -20,11 +21,11 @@ pub fn Popover(
class: "ui-popover",
"data-placement": placement.clone(),
style: match placement.as_str() {
"top" => "left: 50%; bottom: 100%;",
"bottom" => "left: 50%; top: 100%;",
"left" => "right: 100%; top: 50%; transform: translate(-0.75rem, -50%);",
"right" => "left: 100%; top: 50%; transform: translate(0.75rem, -50%);",
_ => "left: 50%; top: 100%;"
"top" => "position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -0.75rem);",
"bottom" => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);",
"left" => "position: absolute; right: 100%; top: 50%; transform: translate(-0.75rem, -50%);",
"right" => "position: absolute; left: 100%; top: 50%; transform: translate(0.75rem, -50%);",
_ => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);"
},
onclick: move |event| event.stop_propagation(),
{content}