Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-23 12:43:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

added active class to router link

Browse source
This commit is contained in:
Maccesch 2022-03-06 23:17:24 +00:00
parent a4ab2d9de0
commit ef82ffd217
1 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/router/src/components/link.rs
View file

@ -1,6 +1,6 @@
use std::sync::Arc;
use crate::RouterCore;
use crate::{RouterCore, use_route};
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
use dioxus_core_macro::{format_args_f, rsx, Props};
@ -26,6 +26,12 @@ pub struct LinkProps<'a> {
#[props(default, strip_option)]
pub class: Option<&'a str>,
/// Set the class added to the inner link when the current route is the same as the "to" route.
///
/// By default set to `"active"`.
#[props(default, strip_option)]
pub active_class: Option<&'a str>,
/// Set the ID of the inner link ['a'](https://www.w3schools.com/tags/tag_a.asp) element.
///
/// This can be useful when styling the inner link element.
@ -83,6 +89,7 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
external,
new_tab,
children,
active_class,
..
} = cx.props;
@ -90,10 +97,18 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
let outerlink = (*autodetect && is_http) || *external;
let prevent_default = if outerlink { "" } else { "onclick" };
let route = use_route(&cx);
let location = route.current_location();
let path = location.path();
let active = path == cx.props.to;
let active_class = active.then(|| {
active_class.unwrap_or("active")
}).unwrap_or("");
cx.render(rsx! {
a {
href: "{to}",
class: format_args!("{}", class.unwrap_or("")),
class: format_args!("{} {}", class.unwrap_or(""), active_class),
id: format_args!("{}", id.unwrap_or("")),
title: format_args!("{}", title.unwrap_or("")),
prevent_default: "{prevent_default}",