The Elix project seeks to provide a comprehensive set of solid, well-designed web components that implement very common user interface patterns. Each component can be used as is, or as the foundation for new components.

See the main Elix repository for details.

Demos

For now, this placeholder site just hosts demos of the project's top-level components.

• List box. Shows how several mixins cooperate to enable a very basic single-selection list box.
• Horizontal list. A list box with a horizontal orientation.
• Browser plugin list. A list box with a hard-coded set of list items.
• Labeled tabs. A set of panels with classic rounded tabs.

  (Works in Chrome and macOS Safari, but a polyfill bug prevents this from working in mobile Safari, Firefox, Edge, and IE. Additionally, macOS Safari has a layout bug that causes tabs to initially render incorrectly when their position is changed at runtime.)

• Toolbar tabs. Tabs used as the overall navigation UI model for a mobile app.

  (Works in Chrome; bugs in Safari and the polyfill prevent user interactions from changing the selected toolbar button.)

The project also includes an extensive series of web component mixins and auxiliary components you can use to create your own custom elements. The mixins are used in the component demos above, but you can also see some mixins used on their own:

• FocusRingMixin. Shows a focus ring on an element only when focused with the keyboard.
• SingleSelectionMixin. Tracks a single selected item in a list.