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

Merge pull request #294 from Synphonyte/master

Browse source
This commit is contained in:
Jon Kelley 2022-03-12 11:56:25 -05:00 committed by GitHub
commit 0fdd6d268f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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::{use_route, RouterCore};
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 url = route.url();
let path = url.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}",