Quick start projects show how to use Elix elements in plain HTML and JavaScript, React, and TypeScript.
Elix elements
These elements are ready for production use as is. You can also customize them.
Asks a single question the user can answer with choice buttons
A combo box that auto-completes the user's input against the list items
A text input box that completes text as the user types
Text area that grows to accommodate its content
Background element shown behind an overlay's primary content
Base class for custom buttons
Calendar representation of a single day
Header showing the localized days of the week
A 7-column grid of days for use in a month calendar or multi-week calendar
A single calendar month, optimized for a given locale
Interactive month calendar that lets the user select a date
Header showing a localized month name and the year
Carousel with a sliding effect and navigation controls
Slideshow with carousel controls
Carousel showing a thumbnail for each image
Horizontal strip of items with the selected item centered
Centered strip showing selected item with a highlight color
Centered strip showing unselected items with partial opacity
A text input paired with a popup that can be used as an alternative to typing
Shows a crossfade effect when transitioning between a single selected item
Combo box that lets the user type a date or pick one from a popup calendar
Basic modal overlay that the user typically dismisses with an explicit action
A panel that slides in from the side of the page
A drawer that includes an always-visible grip element
Shows a single choice made from a pop-up list of choices
Region that expands/collapses in place with an animated transition
A document section with a header that can be expanded or collapsed
Combines a list with an area focusing on a single selected item
A combo box which applies its text input as a filter on its list items
List that only shows items containing a given text string
Button that invokes a command menu, usually in a mobile context
Base class for custom input elements
Single-selection list box
A combo box whose popup presents a list of choices
Master/detail user interface pattern navigated with a list box
A list accompanied by a search box
A menu of choices or commands
A button that invokes a menu
A choice in a menu
Inactive item that helps group related menu items
Semi-transparent backdrop for a modal overlay
Shows a single panel at a time
An element that appears over other page elements
Lightweight form of modeless overlay that can be easily dismissed
A button that invokes an attached popup
Positions a popup with respect to a source element
Simple spinning progress indicator
Lets the user refresh content with a swipe down gesture
General-purpose base for writing components in functional-reactive style
A button with no border or background in its normal state
Slideshow with a simple crossfade transition
Slideshow with buttons for controlling playback
Simple carousel with no visible UI controls
Slides between selected items on a horizontal axis
Generic tab button with a text label
Strip of tab buttons
Basic tabs structure for navigation and configuration
Lightweight popup intended to display a short, non-critical message
Wraps a standard HTML element so it can be extended
- AlertDialog
- ArrowDirectionButton
- AutoCompleteComboBox
- AutoCompleteInput
- AutoSizeTextarea
- Backdrop
- Button
- CalendarDay
- CalendarDayNamesHeader
- CalendarDays
- CalendarMonth
- CalendarMonthNavigator
- CalendarMonthYearHeader
- Carousel
- CarouselSlideshow
- CarouselWithThumbnails
- CenteredStrip
- CenteredStripHighlight
- CenteredStripOpacity
- ComboBox
- CrossfadeStage
- DateComboBox
- DateInput
- Dialog
- Drawer
- DrawerWithGrip
- DropdownList
- ExpandablePanel
- ExpandableSection
- Explorer
- FilterComboBox
- FilterListBox
- HamburgerMenuButton
- Hidden
- Input
- ListBox
- ListComboBox
- ListExplorer
- ListWithSearch
- Menu
- MenuButton
- MenuItem
- MenuSeparator
- ModalBackdrop
- Modes
- Overlay
- OverlayFrame
- PageDot
- Popup
- PopupButton
- PopupSource
- ProgressSpinner
- PullToRefresh
- ReactiveElement
- SeamlessButton
- Slideshow
- SlideshowWithPlayControls
- SlidingPages
- SlidingStage
- State
- TabButton
- Tabs
- TabStrip
- Thumbnail
- Toast
- WrappedStandardElement
Elix mixins
The Elix elements above are built up from composable mixins so they can share aspects of their behavior and APIs. You can use these mixins to create your own components.
- AriaListMixin
- AriaMenuMixin
- AriaRoleMixin
- ArrowDirectionMixin
- AttributeMarshallingMixin
- CalendarElementMixin
- ComposedFocusMixin
- ContentItemsMixin
- DarkModeMixin
- DelegateFocusMixin
- DelegateItemsMixin
- DialogModalityMixin
- DirectionSelectionMixin
- DisabledMixin
- EffectMixin
- FocusCaptureMixin
- FocusVisibleMixin
- FormElementMixin
- GenericMixin
- HoverMixin
- ItemsTextMixin
- KeyboardDirectionMixin
- KeyboardMixin
- KeyboardPagedSelectionMixin
- KeyboardPrefixSelectionMixin
- LanguageDirectionMixin
- OpenCloseMixin
- OverlayMixin
- PageNumbersMixin
- PlayControlsMixin
- PopupModalityMixin
- ReactiveMixin
- ResizeMixin
- SelectedItemTextValueMixin
- SelectionInViewMixin
- ShadowTemplateMixin
- SingleSelectionMixin
- SlotContentMixin
- SlotItemsMixin
- SwipeCommandsMixin
- SwipeDirectionMixin
- TapSelectionMixin
- TimerSelectionMixin
- TouchSwipeMixin
- TrackpadSwipeMixin
- TransitionEffectMixin