This page is part of archived documentation for openHAB 4.0. Go to the current stable version
# Component Reference
# System Widget Library
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-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 |
# Standard Widget Library (Standalone Cards)
Component | Name | Description |
---|---|---|
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 |
# Standard Widget Library (List Items)
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 |
# Standard Widget Library (Cells)
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 |
# Layout Components
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 |
# Map Page & Markers
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 |
# Floorplan Page & Markers
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 |
# Chart Page & Components
# Home Page Cards
Component | Name | Description |
---|---|---|
oh-location-card | Location Card | A card showing model items in a certain location |
oh-equipment-card | Equipment Class 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 |
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub (opens new window)