lit-ui-router / UiSrefActiveDirective

Class: UiSrefActiveDirective

Defined in: packages/lit-ui-router/src/ui-sref-active.ts:200

Directive class that adds CSS classes based on active state.

This directive is used internally by the uiSrefActive directive function. It watches the current router state and applies CSS classes to elements when their associated states are active.

The directive can operate in two modes:

1. Explicit state: Provide a state name to watch
2. Container mode: Automatically watch nested uiSref directives

See

• uiSrefActive for the public API
• AsyncDirective
• SrefStatus

Extends

• AsyncDirective

Properties

Property	Type	Default value	Description	Defined in
active	boolean | undefined	undefined	whether any target is active, or undefined before the first status	packages/lit-ui-router/src/ui-sref-active.ts:259
activeClasses	string[]	[]	classes applied while any target is active	packages/lit-ui-router/src/ui-sref-active.ts:230
ariaCurrentValue	| false | AriaCurrentValue | AriaCurrentValues | undefined	undefined	undefined = default (on for link elements)	packages/lit-ui-router/src/ui-sref-active.ts:234
entering	boolean | undefined	undefined	whether a running transition enters a target	packages/lit-ui-router/src/ui-sref-active.ts:263
exact	boolean | undefined	undefined	whether any target is exactly active, or undefined before the first status	packages/lit-ui-router/src/ui-sref-active.ts:261
exactClasses	string[]	[]	classes applied while any target is exactly active	packages/lit-ui-router/src/ui-sref-active.ts:232
exiting	boolean | undefined	undefined	whether a running transition exits a target	packages/lit-ui-router/src/ui-sref-active.ts:265
options	TransitionOptions	{}	the explicit target transition options	packages/lit-ui-router/src/ui-sref-active.ts:256
params	RawParams	{}	the explicit target state params	packages/lit-ui-router/src/ui-sref-active.ts:254
state	string | undefined	undefined	the explicit target state name, or undefined in container mode	packages/lit-ui-router/src/ui-sref-active.ts:252
targetStates	Set<TargetState>	...	every target this directive watches: the explicit one, or the enclosed links'	packages/lit-ui-router/src/ui-sref-active.ts:268