selector-widget.md

SelectorWidget

import {SelectorWidgetDemo} from '@site/src/doc-demos/widgets'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

This widget renders an icon button that opens a popover menu of selectable options. Each option provides an icon and an optional label, and the button updates to reflect the current selection.

import {Deck} from '@deck.gl/core';
import {SelectorWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

const deck = new Deck({
  widgets: [
    new SelectorWidget({
      initialValue: 'single',
      options: [
        {
          value: 'single',
          label: 'Single view',
          icon: './single.svg'
        },
        {
          value: 'split-horizontal',
          label: 'Split views horizontal',
          icon: './split-h.svg'
        },
        {
          value: 'split-vertical',
          label: 'Split views vertical',
          icon: './split-v.svg'
        }
      ],
      onChange: value => updateViews(value)
    })
  ]
});

import {Deck} from '@deck.gl/core';
import {SelectorWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

type ViewLayout = 'single' | 'split-horizontal' | 'split-vertical';

const deck = new Deck({
  widgets: [
    new SelectorWidget<ViewLayout>({
      initialValue: 'single',
      options: [
        {
          value: 'single',
          label: 'Single view',
          icon: './single.svg'
        },
        {
          value: 'split-horizontal',
          label: 'Split views horizontal',
          icon: './split-h.svg'
        },
        {
          value: 'split-vertical',
          label: 'Split views vertical',
          icon: './split-v.svg'
        }
      ],
      onChange: value => updateViews(value)
    })
  ]
});

import React from 'react';
import DeckGL, {SelectorWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';

type ViewLayout = 'single' | 'split-horizontal' | 'split-vertical';

function App() {
  return (
    <DeckGL>
      <SelectorWidget<ViewLayout>
        initialValue="single"
        options={[
          {
            value: 'single',
            label: 'Single view',
            icon: './single.svg'
          },
          {
            value: 'split-horizontal',
            label: 'Split views horizontal',
            icon: './split-h.svg'
          },
          {
            value: 'split-vertical',
            label: 'Split views vertical',
            icon: './split-v.svg'
          }
        ]}
        onChange={value => updateViews(value)}
      />
    </DeckGL>
  );
}

Constructor

import {SelectorWidget, type SelectorWidgetProps} from '@deck.gl/widgets';
new SelectorWidget<ValueT>({} satisfies SelectorWidgetProps<ValueT>);

Types

SelectorWidgetProps {#selectorwidgetprops}

The SelectorWidget accepts the generic WidgetProps and:

options (SelectorWidgetOption[], required) {#options}

Selectable options displayed in the popover menu.

initialValue (any, optional) {#initialvalue}

• Default: value of the first option

Initial selected value. If it does not match any option, the first option is displayed.

onChange (function, optional) {#onchange}

(value: ValueT) => void

Callback invoked when a new option is selected.

SelectorWidgetOption {#selectorwidgetoption}

value (any, required) {#value}

Value returned from onChange when this option is selected.

icon (string, required) {#icon}

Data URL used as the option icon mask.

label (string, optional) {#label}

Text shown in the menu and used as the button's aria-label and styled tooltip when selected.

tooltip (string | HTMLElement | false, optional) {#tooltip}

• Default: value of label

Custom tooltip content. Overrides the default label text in the tooltip. Pass false to disable.

Styles

The SelectorWidget uses the shared button and menu theme variables described in the styling guide.

Source

modules/widgets/src/selector-widget.tsx