Skip to content

Commit 7bd8cf5

Browse files
authored
Explain @Activeclass argument (#2125)
- It's explained in the [API documentation here](https://api.emberjs.com/ember/3.2/classes/Ember.Templates.helpers/methods/link-to?anchor=link-to) - But the guides do not mention it
1 parent ab1df77 commit 7bd8cf5

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

guides/release/routing/linking-between-routes.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,34 @@ will be given the `active` CSS class. For example, if you were at the URL
9191
</ul>
9292
```
9393

94+
The CSS class name used for active classes can be customized for a single use of `<LinkTo />` by passing an `@activeClass` argument:
95+
96+
```handlebars {data-filename=app/templates/photos.hbs}
97+
<ul>
98+
{{#each this.photos as |p|}}
99+
<li>
100+
<LinkTo @route="photos.edit" @model={{p}} @activeClass="font-bold">{{p.title}}</LinkTo>
101+
</li>
102+
{{/each}}
103+
</ul>
104+
```
105+
106+
will result in:
107+
108+
```html
109+
<ul>
110+
<li>
111+
<a href="/photos/1">Happy Kittens</a>
112+
</li>
113+
<li>
114+
<a href="/photos/2" class="font-bold">Puppy Running</a>
115+
</li>
116+
<li>
117+
<a href="/photos/3">Mountain Landscape</a>
118+
</li>
119+
</ul>
120+
```
121+
94122
### Multiple Dynamic Segments
95123

96124
Sometimes, you may need to generate links for nested routes which can

0 commit comments

Comments
 (0)