-
Notifications
You must be signed in to change notification settings - Fork 55
stencil route link
Josh Thomas edited this page Sep 21, 2018
·
5 revisions
This component is used to render links to defined routes. It applys a specific style based on whether the link matches the current location.
property | type | description |
---|---|---|
url | string | the pathname to link to. |
urlMatch | string OR string[] | If url match is provided then activeClass should be provided based on if the url matches it. providing urlMatch allows you to define an alternative. You can set activeClass based on a different url match. |
exact | boolean | If true then only apply the active class when the url matches exactly to the location. |
activeClass | string | The class to apply if the link matches the current location. This defaults to link-active . |
<stencil-route-link url="/" exact={true}>Home</stencil-route-link>
<stencil-route-link url="/info" urlMatch="/info/*">Information</stencil-route-link>
<stencil-route-link url="/info" activeClass="link-active">
Information
</stencil-route-link>
There are additional attributes that let you set specific attributes on the anchor tag that gets rendered rather than on the web component itself.
<stencil-route-link
url="/"
anchorClass="site-link"
anchorRole="link"
anchorTitle="Home link"
anchorTabIndex="2"
>
Home
</stencil-route-link>