API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-info-toggle-dropdown

WebComponents. cq-info-toggle-dropdown

The drop-down toggle web component <cq-info-toggle-dropdown>.

Provides toggle management for the crosshairs and heads-up display.

Typically wraps a cq-toggle component and cq-menu component (see the examples below). The cq-toggle web component creates the user interface toggle control, which is similar to a button. The cq-menu web component creates a drop-down menu that provides component options. For example, for the heads-up display, the options menu enables activation of either a dynamic callout or floating tooltip; for the crosshairs, activation of a static information display (also referred to as the static heads-up display, or static HUD).

The drop-down toggle component appends a <cq-hu-dynamic>, <cq-hu-floating>, or <cq-hu-static> element to the top node of the chart context if one is required and not already present. The elements represent the heads-up dynamic callout, heads-up floating tooltip, and crosshairs static HUD, respectively.

The drop-down toggle is mobile aware. On mobile devices, the drop-down menu of the component is hidden, and the following mobile-friendly behavior is set automatically:

  • The crosshairs drop-down toggle turns the crosshairs and static HUD on and off in unison
  • The heads-up display drop-down toggle is not available
Since:
  • 8.2.0

Examples

Heads-up display drop-down toggle:

<cq-info-toggle-dropdown>
    <cq-toggle
        class="ciq-HU"
        cq-member="headsUp">
        <span></span>
        <cq-tooltip></cq-tooltip> <!-- Tooltip text is added programmatically. -->
    </cq-toggle>

    <cq-menu class="ciq-menu toggle-options collapse tooltip-ui">
        <span></span>
        <cq-menu-dropdown>
            <cq-item cq-member="headsUp-dynamic">Show Dynamic Callout<span class="ciq-radio"><span></span></span></cq-item>
            <cq-item cq-member="headsUp-floating">Show Tooltip<span class="ciq-radio"><span></span></span></cq-item>
        </cq-menu-dropdown>
    </cq-menu>

Crosshairs drop-down toggle:

<cq-info-toggle-dropdown>
    <cq-toggle
        class="ciq-CH"
        cq-member="crosshair">
        <span></span>
        <cq-tooltip>Crosshair (Alt + \)</cq-tooltip> <!-- Tooltip text is hard coded. -->
    </cq-toggle>

    <cq-menu class="ciq-menu toggle-options collapse">
        <span></span>
        <cq-menu-dropdown>
            <cq-item cq-member="crosshair">Hide Heads-Up Display<span class="ciq-radio"><span></span></span></cq-item>
            <cq-item cq-member="headsUp-static">Show Heads-Up Display<span class="ciq-radio"><span></span></span></cq-item>
        </cq-menu-dropdown>
    </cq-menu>
</cq-info-toggle-dropdown>

Methods


set(value)

Sets the status of the drop-down toggle; that is, whether the drop-down toggle is active or inactive.

Parameters:
Name Type Description
value boolean

The status of the drop-down toggle. If true, the drop-down toggle is active; if false, inactive.

Since:
  • 8.2.0


setSelected(selected)

Sets the currently selected option for the drop-down toggle component. The options are presented as a list of radio buttons in a drop-down menu associated with the component.

Selects (or checks) the radio button of the selected option and clears (or unchecks) the radio buttons of other options.

Parameters:
Name Type Description
selected HTMLElement

The menu option to set as the selected option.

Since:
  • 8.2.0