| title | description | source |
|---|---|---|
Component Reference |
Index of all components defined in openHAB's main UI |
| Component | Name | Description |
|---|---|---|
oh-button |
Button | Button performing an action |
oh-chart |
Chart | Visualize series of data |
oh-clock |
Digital Clock | Display a digital clock |
oh-colorpicker |
Colorpicker | Control to pick a color |
oh-context |
Context | Non-rendered component with functions, constants, and scoped variables for widgets |
oh-gauge |
Gauge | Circular or semi-circular read-only gauge |
oh-icon |
Icon | Display an openHAB icon |
oh-image |
Image | Displays an image from a URL or an item |
oh-input |
Input | Displays an input field, used to set a variable |
oh-knob |
Knob & Rounded Slider | Allows to change a number value on a circular track or a rounded slider |
oh-link |
Link | Link performing an action |
oh-list |
List | List control, hosts list items |
oh-player |
Media player | Media player controls, with previous track/pause/play/next buttons |
oh-repeater |
Repeater | Iterate over an array and repeat the children components in the default slot |
oh-rollershutter |
Rollershutter | Rollershutter control, with up/down/stop buttons |
oh-sipclient |
SIP Client | SIP Client to start and answer SIP calls |
oh-slider |
Slider | Slider control, allows to pick a number value on a scale |
oh-stepper |
Stepper | Stepper control, allows to input a number or decrement/increment it using buttons |
oh-swiper |
Swiper | Swiper control, allows to display multiple swipeable slides |
oh-toggle |
Toggle | Toggle control, allows to switch on or off |
oh-trend |
Trend line | Trend line to display the overall recent evolution of an item |
oh-video |
Video | Displays a video player from a URL or an item |
oh-webframe |
Web frame | Displays a web page in a frame |
| Component | Name | Description |
|---|---|---|
oh-card |
Card | The basic structure of all card widgets, providing title and footer and requiring a content slot |
oh-clock-card |
Digital Clock Card | Display a digital clock in a card |
oh-colorpicker-card |
Color Picker Card | Display a color picker in a card |
oh-gauge-card |
Gauge Card | Display a read-only gauge in a card to visualize a quantifiable item |
oh-image-card |
Image Card | Display an image (URL or Image item ) in a card |
oh-input-card |
Input Card | Display an input in a card |
oh-knob-card |
Knob & Rounded Slider Card | Display a knob or a rounded slider in a card to visualize and control a quantifiable item |
oh-label-card |
Label Card | Display the state of an item in a card |
oh-list-card |
List Card | Display a list in a card |
oh-player-card |
Player Card | Display player controls in a card |
oh-rollershutter-card |
Rollershutter Card | Display rollershutter controls in a card |
oh-sipclient-card |
SIP Client Card | SIP Client to start and answer SIP calls |
oh-slider-card |
Slider Card | Display a slider in a card to control an item |
oh-stepper-card |
Stepper Card | Display a stepper in a card to control an item |
oh-swiper-card |
Swiper Card | Display a swiper allowing to browse slides, in a card |
oh-toggle-card |
Toggle Card | Display a toggle swtich in a card to send ON/OFF commands |
oh-video-card |
Video Card | Display a video (URL or URL from String item) in a card |
oh-webframe-card |
Web Frame Card | Display a web page in a card |
All cards are based on the oh-card component and share the same config options for modifying the card's appearance.
Refer to the oh-card Style documentation to learn about card styling options.
| Component | Name | Description |
|---|---|---|
oh-colorpicker-item |
Color Picker List Item | Display a color picker in a list |
oh-input-item |
Input List Item | Display an input field in a list |
oh-label-item |
Label List Item | Display the state of an item in a list |
oh-list-item |
List Item | A list item |
oh-player-item |
Player List Item | Display player controls in a list |
oh-rollershutter-item |
Rollershutter List Item | Display rollershutter controls in a list |
oh-slider-item |
Slider List Item | Display a slider control in a list |
oh-stepper-item |
Stepper List Item | Display a stepper control in a list |
oh-toggle-item |
Toggle List Item | Display a toggle switch in a list |
| Component | Name | Description |
|---|---|---|
oh-cell |
Cell | A regular or expandable cell |
oh-colorpicker-cell |
Colorpicker Cell | A cell expanding to a color picker |
oh-knob-cell |
Knob & Rounded Slider Cell | A cell expanding to a knob or rounded slider control |
oh-label-cell |
Label Cell | A cell with a big label to show a short item state value |
oh-rollershutter-cell |
Rollershutter Cell | A cell expanding to rollershutter controls |
oh-slider-cell |
Slider Cell | A cell expanding to a big vertical slider |
| Component | Name | Description |
|---|---|---|
oh-block |
Layout Grid Block | A block in a grid layout |
oh-canvas-item |
Canvas Item | Specific attributes to display widgets on a canvas. |
oh-canvas-layer |
Canvas Layer | Layer for grouping widgets in canvas |
oh-canvas-layout |
Canvas Layout | Position widgets on a canvas layout with arbitrary position and size down to pixel resolution |
oh-grid-col |
Layout Grid Column | A column in a grid layout |
oh-grid-layout |
Fixed Grid Layout | Arranges widgets on a grid of squares with user-defined sizes |
oh-grid-row |
Layout Grid Row | A row in a grid layout |
oh-masonry |
Masonry Layout | Arranges widgets automatically depending on the screen size |
| Component | Name | Description |
|---|---|---|
oh-map-circle-marker |
Circle Marker | A circle on a map, to represent a radius |
oh-map-marker |
Map Marker | An icon on a map |
oh-map-page |
Map page | Displays markers on a map |
| Component | Name | Description |
|---|---|---|
oh-plan-marker |
Floor Plan Marker | A marker on a floor plan |
oh-plan-page |
Floor plan | Displays markers on an image overlay |
| Component | Name | Description |
|---|---|---|
oh-location-card |
Location Card | A card showing model items in a certain location |
oh-equipment-card |
Equipment Card | A card showing model items belonging to a certain equipment class |
oh-property-card |
Property Card | A card showing model items related to a certain property |