Skip to content

CarouselComboBox

Overview

CarouselComboBox behaves like a combo box, but its listbox is a carousel. This allows you to scroll through a long list of items, a feature that ComboBoxListBox does not support. ComboBoxItem, ComboBoxButton, and Carousel are reused.

THINK TWICE BEFORE USING THIS IN A SIM! CarouselComboBox was created as a quick way to address situations where ComboBox's listbox gets too long, for example https://github.com/phetsims/sun/issues/673. This tends to happen in internal 'demo' applications (sun, scenery-phet,... ) that have long lists of demos. And as a design best-practice, PhET tends to avoid longs lists of things in sims. So if you find yourself reaching for CarouselComboBox, consider whether a different UI component might provide a better UX.

Possible future work: - Modify ComboBox so that it can use different types of popups (ComboBoxListBox, Carousel,...), or - Make CarouselComboBox pop up the Carousel in front of everything else - a11y support in CarouselComboBox

@author Chris Malley (PixelZoom, Inc.)

Class CarouselComboBox

import { CarouselComboBox } from 'scenerystack/sun';

Constructor

new CarouselComboBox( property : TProperty<T>, comboBoxItems : ComboBoxItem<T>[], providedOptions? : CarouselComboBoxOptions )

Instance Methods

dispose()

Type CarouselComboBoxOptions

import type { CarouselComboBoxOptions } from 'scenerystack/sun';
  • itemNodeOptions?: CarouselItemNodeOptions
    Nested options passed to subcomponents
  • carouselOptions?: CarouselOptions
  • pageControlOptions?: StrictOmit<PageControlOptions, "orientation">
  • buttonOptions?: StrictOmit<ComboBoxButtonOptions, "content" | "listener">
  • openedSoundPlayer?: TSoundPlayer
    Sound generators for when the combo box is opened and closed.
  • closedSoundPlayer?: TSoundPlayer
  • & StrictOmit<ParentOptions, "children">

Source Code

See the source for CarouselComboBox.ts in the sun repository.