Skip to content

Commit 5227221

Browse files
authored
docs: add document on adding class and other attributes to <A/> component (#4086)
1 parent 3f48b77 commit 5227221

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

router/src/link.rs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,25 @@ where
6666
/// This is helpful for accessibility and for styling. For example, maybe you want to set the link a
6767
/// different color if it’s a link to the page you’re currently on.
6868
///
69+
/// ### Additional Attributes
70+
///
71+
/// You can add additional HTML attributes to the `<a>` element created by this component using the attribute
72+
/// spreading syntax for components. For example, to add a class, you can use `attr:class="my-link"`.
73+
/// Alternately, you can add any number of HTML attributes (include `class`) after a `{..}` marker.
74+
///
75+
/// ```rust
76+
/// # use leptos::prelude::*; use leptos_router::components::A;
77+
/// # fn spread_example() -> impl IntoView {
78+
/// view! {
79+
/// <A href="/about" attr:class="my-link" {..} id="foo">"Some link"</A>
80+
/// <A href="/about" {..} class="my-link" id="bar">"Another link"</A>
81+
/// <A href="/about" {..} class:my-link=true id="baz">"One more"</A>
82+
/// }
83+
/// # }
84+
/// ```
85+
///
86+
/// For more information on this attribute spreading syntax, [see here](https://book.leptos.dev/view/03_components.html#spreading-attributes-onto-components).
87+
///
6988
/// ### DOM Properties
7089
///
7190
/// `<a>` elements can take several additional DOM properties with special meanings.

0 commit comments

Comments
 (0)