lit-ui-router / srefHref
Variable: srefHref
const srefHref: (state, params?, options?) => DirectiveResult<typeof SrefHrefDirective>;Defined in: packages/lit-ui-router/src/sref-href.ts:254
Binds a state's href to an attribute: the attribute-part form of uiSref.
The two do the same job — generate the href, navigate on click, announce the target to an enclosing uiSrefActive — and differ only in where they sit. uiSref is an element part, which only a live browser can see; this one is the href, so a static analyser reads the link the way the browser does, and a server renderer can once it has a router to offer. Use one or the other on an element, never both.
Arguments are uiSref's: the state name, its params, and core's transition options. There is no assignHref — the attribute is the binding, so it is written wherever it was bound.
Parameters
| Parameter | Type |
|---|---|
state | string |
params? | RawParams |
options? | TransitionOptions |
Returns
DirectiveResult<typeof SrefHrefDirective>
Examples
import { srefHref } from 'lit-ui-router';
import { html } from 'lit';
html`<a href=${srefHref('users.detail', { userId: 123 })}>View User</a>`With srefActiveClass and srefAriaCurrent
html`<a href=${srefHref('users')}
class="nav-link ${srefActiveClass({ state: 'users', activeClasses: ['active'] })}"
aria-current=${srefAriaCurrent({ state: 'users' })}>Users</a>`