mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-27 14:40:44 +00:00
Merge pull request #294 from Synphonyte/master
This commit is contained in:
commit
0fdd6d268f
1 changed files with 17 additions and 2 deletions
|
@ -1,6 +1,6 @@
|
||||||
use std::sync::Arc;
|
use std::sync::Arc;
|
||||||
|
|
||||||
use crate::RouterCore;
|
use crate::{use_route, RouterCore};
|
||||||
use dioxus_core as dioxus;
|
use dioxus_core as dioxus;
|
||||||
use dioxus_core::prelude::*;
|
use dioxus_core::prelude::*;
|
||||||
use dioxus_core_macro::{format_args_f, rsx, Props};
|
use dioxus_core_macro::{format_args_f, rsx, Props};
|
||||||
|
@ -26,6 +26,12 @@ pub struct LinkProps<'a> {
|
||||||
#[props(default, strip_option)]
|
#[props(default, strip_option)]
|
||||||
pub class: Option<&'a str>,
|
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.
|
/// 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.
|
/// 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,
|
external,
|
||||||
new_tab,
|
new_tab,
|
||||||
children,
|
children,
|
||||||
|
active_class,
|
||||||
..
|
..
|
||||||
} = cx.props;
|
} = cx.props;
|
||||||
|
|
||||||
|
@ -90,10 +97,18 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
|
||||||
let outerlink = (*autodetect && is_http) || *external;
|
let outerlink = (*autodetect && is_http) || *external;
|
||||||
let prevent_default = if outerlink { "" } else { "onclick" };
|
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! {
|
cx.render(rsx! {
|
||||||
a {
|
a {
|
||||||
href: "{to}",
|
href: "{to}",
|
||||||
class: format_args!("{}", class.unwrap_or("")),
|
class: format_args!("{} {}", class.unwrap_or(""), active_class),
|
||||||
id: format_args!("{}", id.unwrap_or("")),
|
id: format_args!("{}", id.unwrap_or("")),
|
||||||
title: format_args!("{}", title.unwrap_or("")),
|
title: format_args!("{}", title.unwrap_or("")),
|
||||||
prevent_default: "{prevent_default}",
|
prevent_default: "{prevent_default}",
|
||||||
|
|
Loading…
Reference in a new issue