Components
June 12, 2020 ยท View on GitHub
This is the list of web components that currently make up the suite, and will change often until the version 1 release.
Core Elements, Mixins and Modules
These are mainly JavaScript modules (mixins for LitElement) and non-visual web components that are used extensively by the other components, or provide cross-cutting functionality.
Styling
These aren't elements, but rather style modules and element mixins.
| Name | Description |
|---|---|
| Typography | A set of CSS styles for typography exposed as a module. |
| Theming | A set of CSS variables used for implementing a theme. |
| Elevation | A set of CSS styles for implementing Material Design elevations. |
| Iconography | A set of icons for use with obap-icon and includes the Material Design icons. |
Classes
| Name | Description |
|---|---|
| ObapElement | The base class for all web components in the suite. |
Mixins
| Name | Description |
|---|---|
| ObapSelectorController | A mixin that can be used to enable single select behaviour. |
| ObapMultiSelectorController | A mixin that can be used to enable multi select behaviour. |
Elements
These are simple non-visual elements that are used extensively by the other elements.
| Name | Description |
|---|---|
| obap-attached-element | Behaviour that docks an element to another element. |
| obap-icon | Displays a single svg icon. |
| obap-pages | A content switcher. |
| obap-selector | An element that manages a list of elements that can be selected. |
| obap-selector-container | Synchronizes selection lists, such as tabs to pages. |
Atomic Components
These are the basic visual Material Design components.
| Name | Description |
|---|---|
| obap-badge | A small round indicator that attaches to an element and displays a number or icon. |
| obap-button | A Material Design Button. Supports regular, raised, icon and fab styles. |
| obap-callout | A speech bubble type element that can either behave like a tooltip or be fixed inline. |
| obap-card | A Material Design card. |
| obap-check | A Material Design checkbox. |
| obap-chip | A Material Design chip. |
| obap-material | A Material Design container that looks like a lifted piece of paper. |
| obap-tab | A Material Design tab used with obap-tabs. |
| obap-tabs | A Material Design tab set. |
| obap-tooltip | A Material Design tooltip that is displayed on mouse hover. |