Elix - Component Kitchen

Overview

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.

THE ELIX VISION

FEATURED COMPONENTS

Carousel with a sliding effect and navigation controls

A drawer that includes an always-visible grip element

Read how to get started, or view quick start projects for 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

AutoCompleteComboBox

A combo box that auto-completes the user's input against the list items

AutoCompleteInput

A text input box that completes text as the user types

AutoSizeTextarea

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

CalendarDayNamesHeader

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

CalendarMonthNavigator

Interactive month calendar that lets the user select a date

CalendarMonthYearHeader

Header showing a localized month name and the year

Carousel with a sliding effect and navigation controls

CarouselSlideshow

Slideshow with carousel controls

CarouselWithThumbnails

Carousel showing a thumbnail for each image

Horizontal strip of items with the selected item centered

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

ExpandablePanel

Region that expands/collapses in place with an animated transition

ExpandableSection

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

HamburgerMenuButton

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

MultiSelectListBox

Multiple-selection list box

Input with buttons to increase or decrease a numeric value

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

ProgressSpinner

Spinning progress indicator

Lets the user refresh content with a swipe down gesture

ReactiveElement

General-purpose base for writing components in functional-reactive style

Slideshow with a simple crossfade transition

SlideshowWithPlayControls

Slideshow with buttons for controlling playback

Simple carousel with no visible UI controls

Slides between selected items on a horizontal axis

Input with buttons to increase or decrease a value

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

WrappedStandardElement

Wraps a standard HTML element so it can be extended

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.

Elix helpers