Variable navSelectorConst

navSelector: {
    css: {
        click(parentSelector: string): CSSResult;
        selected(parentSelector: string): CSSResult;
    };
    js: {
        click(parentSelector: string): string;
        selected(parentSelector: string): string;
    };
} = ...

Query selector strings or CSS selectors for styling various states of navigation. Mostly necessary only for the click styles (see comment on .click for more details).

Type declaration

  • css: {
        click(parentSelector: string): CSSResult;
        selected(parentSelector: string): CSSResult;
    }

    CSS selectors in CSSResult type for use within css tagged templates.

    Example

    ``ts import {navSelector} from 'device-navigation';

    Const styles = css`${navSelector.css.click('.nav-element')} { border-color: red; }`;
    • click:function
      • click(parentSelector): CSSResult

      • Styles the element when navigation actives the element, whether by a mouse click or a keyboard key.

        This is required because browsers do not allow keyboard presses to trigger the :active pseudo-class on elements that aren't natively interactive. So a div with tabindex, while working with all the other style selectors (like :focus), does not work for click styles triggered via keyboard events like a native button element does.

        Parameters

        • parentSelector: string

        Returns CSSResult

    • selected:function
      • selected(parentSelector): CSSResult

      • Styles the element when navigation has it currently selected. This just uses the :focus pseudo-class selector. You can simply use that pseudo-class selector manually if you like, this is only here for completeness.

        Parameters

        • parentSelector: string

        Returns CSSResult

  • js: {
        click(parentSelector: string): string;
        selected(parentSelector: string): string;
    }

    CSS selector strings to be used in JavaScript queries.

    Example

    import {navSelector} from 'device-navigation';

    element.querySelector(navSelector.js.click('.nav-element'));
    • click:function
      • click(parentSelector): string

      • Styles the element when navigation actives the element, whether by a mouse click or a keyboard key.

        This is required because browsers do not allow keyboard presses to trigger the :active pseudo-class on elements that aren't natively interactive. So a div with tabindex, while working with all the other style selectors (like :focus), does not work for click styles triggered via keyboard events like a native button element does.

        Parameters

        • parentSelector: string

        Returns string

    • selected:function
      • selected(parentSelector): string

      • Styles the element when navigation has it currently selected. This just uses the :focus pseudo-class selector. You can simply use that pseudo-class selector manually if you like, this is only here for completeness.

        Parameters

        • parentSelector: string

        Returns string

Settings

Member Visibility