Elix is an open collection of high-quality web components for common user interface patterns such as lists, menus, dialogs, carousels, and so on. The modular nature of web components let you easily incorporate them into your web apps, and their standard definition ensures good results across all mainstream browsers. Read the Elix project vision.
Elements
Asks a single question the user can answer with a set of choices
Text area that grows to accommodate its content
Carousel with a sliding effect and navigation controls
Slideshow with carousel controls
Carousel showing a thumbnail for each image
Horizontal strip of items with selected item centered
Centered strip showing selected item with a highlight color
Centered strip showing unselected items with partial opacity
Basic modal overlay
Modal panel that slides in from the side of the page
Shows a single choice made from a pop-up list of choices
Expands/collapses in place with an animated transition
Button that invokes a mobile navigation menu
Single-selection list box
Semi-transparent backdrop for a modal overlay
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
Shows a single panel at a time
An element that appears over other page elements
Lightweight form of modeless overlay
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 component base class
Slideshow with a simple crossfade transition
Slideshow with buttons for controlling playback
Primitive carousel supporting multiple input modes but no UI of its own
Slides between selected items on a horizontal axis
Generic tab button with a text label
Basic tabs structure for navigation and configuration
Strip of tab buttons
Lightweight popup intended to display a short, non-critical message
Wraps a standard HTML element so its behavior can be extended
Elements
- AlertDialog
- ArrowDirectionButton
- AutosizeTextarea
- Backdrop
- Carousel
- CarouselWithThumbnails
- CenteredStrip
- CenteredStripHighlight
- CenteredStripOpacity
- CrossfadeStage
- Dialog
- Drawer
- DropdownList
- About Elix elements
- ExpandablePanel
- Explorer
- ListBox
- ListExplorer
- Menu
- MenuButton
- MenuItem
- MenuSeparator
- ModalBackdrop
- Modes
- Overlay
- PageDot
- Popup
- PopupSource
- ProgressSpinner
- PullToRefresh
- ReactiveElement
- SlidingPages
- SlidingStage
- TabButton
- Tabs
- TabStrip
- Thumbnail
- Toast
- WrappedStandardElement
Elix mixins
- About Elix mixins
- AriaListMixin
- AriaMenuMixin
- ArrowDirectionMixin
- AttributeMarshallingMixin
- ClickSelectionMixin
- ContentItemsMixin
- DialogModalityMixin
- DirectionSelectionMixin
- FocusCaptureMixin
- FocusVisibleMixin
- HoverMixin
- KeyboardDirectionMixin
- KeyboardMixin
- KeyboardPagedSelectionMixin
- KeyboardPrefixSelectionMixin
- LanguageDirectionMixin
- OpenCloseMixin
- OverlayMixin
- PopupModalityMixin
- ReactiveMixin
- RenderUpdatesMixin
- SelectedItemTextValueMixin
- SelectionInViewMixin
- ShadowTemplateMixin
- SingleSelectionMixin
- SlotContentMixin
- SlotItemsMixin
- SwipeDirectionMixin
- TouchSwipeMixin
- TrackpadSwipeMixin
- TransitionEffectMixin