# 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 Knob control, allow to change a number value on a circular track
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-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 evoluation 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 Card Display a knob 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-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 Cell A cell expanding to a knob 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-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

Component Name Description
oh-chart-page Chart Page Visualize historical series
oh-chart-grid Cartesian Grid
oh-category-axis Category Axis
oh-value-axis Value Axis
oh-time-axis Time Axis
oh-calendar-axis Calendar
oh-data-series Data Series
oh-time-series Time Series
oh-aggregate-series Aggregate Series
oh-calendar-series Calendar Series
oh-chart-tooltip Tooltip
oh-chart-visualmap Visual Map
oh-chart-datazoom Data Zoom
oh-chart-legend Legend
oh-chart-title Title
oh-chart-toolbox Toolbox

# 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