openHAB

# oh-label-card - Label Card

Display the state of an item in a card

# Configuration

# Card

Parameters of the card

# title Title TEXT

Title of the card

Footer of the card

# noBorder No Border BOOLEAN

Do not render the card border

# noShadow No Shadow BOOLEAN

Do not render a shadow effect to the card

# outline Outline BOOLEAN

Show the card outline

# Action

Action to perform when the element is clicked

# action Action TEXT

Type of action to perform

Options:
navigate
Navigate to page
command
Send command
toggle
Toggle Item
options
Command options
rule
Run scene, script or rule
popup
Open popup
popover
Open popover
sheet
Open sheet
photos
Open photo browser
group
Group details
analyzer
Analyze item(s)
url
Navigate to external URL
http
Send HTTP request
variable
Set Variable

# actionUrl Action URL TEXT url

URL to navigate to or to send HTTP request to

# actionUrlSameWindow Open in same tab/window BOOLEAN

Open the URL in the same tab/window instead of a new one. This will exit the app.

# actionHttpMethod HTTP Method TEXT

HTTP method to use for the request

Options:
GET
GET
POST
POST
PUT
PUT
DELETE
DELETE

# actionHttpBody HTTP Body TEXT

Body to send with the request

# actionItem Action Item TEXT item

Item to perform the action on

# actionCommand Action Command TEXT

Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different

# actionCommandAlt Action Toggle Command TEXT

Command to send to the Item when "Toggle Item" is selected as the action, and the Item's state is equal to the command above

# actionOptions Command Options TEXT

Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use value=label format to provide a label different than the option.

# actionRule Scene, Script or Rule TEXT rule

Scene, Script or Rule to run

# actionRuleContext Context TEXT script

Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }.

# actionPage Page TEXT page

Page to navigate to

# actionPageTransition Transition Effect TEXT

Use a specific page transition animation

Options:
f7-circle
Circle
f7-cover
Cover
f7-cover-v
Cover from bottom
f7-dive
Dive
f7-fade
Fade
f7-flip
Flip
f7-parallax
Parallax
f7-push
Push

# actionModal Modal Page or Widget TEXT pagewidget

Page or widget to display in the modal

# actionModalConfig Modal component configuration TEXT props

Configuration (prop values) for the target modal page or widget

# actionPhotos Images to show TEXT

Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML, e.g.

- item: ImageItem1
  caption: Camera
or provide a JSON array, e.g.
[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view.

# actionPhotoBrowserConfig Photo browser configuration TEXT

Configuration for the photo browser.
Edit in YAML or provide a JSON object, e.g.
{ "exposition": false, "type": "popup", "theme": "dark" }
See photo browser parameters (not all are supported).

# actionGroupPopupItem Group Popup Item TEXT item

Group Item whose members to show in a popup

# actionAnalyzerItems Item(s) to Analyze* TEXT item

Start analyzing with the specified (set of) Item(s)

# actionAnalyzerChartType Chart Type TEXT

The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year

Options:
(empty)
Dynamic
day
Day
isoWeek
Week (starting on Mondays)
month
Month
year
Year

# actionAnalyzerCoordSystem Initial Coordinate System TEXT

The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)

Options:
time
Time
aggregate
Aggregate
calendar
Calendar

# actionConfirmation Action Confirmation TEXT

Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object { type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" }

# actionFeedback Action Feedback TEXT

Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the supported parameters

# actionVariable Variable TEXT

The variable name to set

# actionVariableValue Variable Value TEXT

The value to set the variable to

# actionVariableKey Variable Key TEXT

Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing.

# Tap Hold

Action performed when tapping and holding card (or calling contextual menu on desktop)

# taphold_action Action TEXT

Type of action to perform

Options:
navigate
Navigate to page
command
Send command
toggle
Toggle Item
options
Command options
rule
Run scene, script or rule
popup
Open popup
popover
Open popover
sheet
Open sheet
photos
Open photo browser
group
Group details
analyzer
Analyze item(s)
url
Navigate to external URL
http
Send HTTP request
variable
Set Variable

# taphold_actionUrl Action URL TEXT url

URL to navigate to or to send HTTP request to

# taphold_actionUrlSameWindow Open in same tab/window BOOLEAN

Open the URL in the same tab/window instead of a new one. This will exit the app.

# taphold_actionHttpMethod HTTP Method TEXT

HTTP method to use for the request

Options:
GET
GET
POST
POST
PUT
PUT
DELETE
DELETE

# taphold_actionHttpBody HTTP Body TEXT

Body to send with the request

# taphold_actionItem Action Item TEXT item

Item to perform the action on

# taphold_actionCommand Action Command TEXT

Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different

# taphold_actionCommandAlt Action Toggle Command TEXT

Command to send to the Item when "Toggle Item" is selected as the action, and the Item's state is equal to the command above

# taphold_actionOptions Command Options TEXT

Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use value=label format to provide a label different than the option.

# taphold_actionRule Scene, Script or Rule TEXT rule

Scene, Script or Rule to run

# taphold_actionRuleContext Context TEXT script

Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }.

# taphold_actionPage Page TEXT page

Page to navigate to

# taphold_actionPageTransition Transition Effect TEXT

Use a specific page transition animation

Options:
f7-circle
Circle
f7-cover
Cover
f7-cover-v
Cover from bottom
f7-dive
Dive
f7-fade
Fade
f7-flip
Flip
f7-parallax
Parallax
f7-push
Push

# taphold_actionModal Modal Page or Widget TEXT pagewidget

Page or widget to display in the modal

# taphold_actionModalConfig Modal component configuration TEXT props

Configuration (prop values) for the target modal page or widget

# taphold_actionPhotos Images to show TEXT

Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML, e.g.

- item: ImageItem1
  caption: Camera
or provide a JSON array, e.g.
[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view.

# taphold_actionPhotoBrowserConfig Photo browser configuration TEXT

Configuration for the photo browser.
Edit in YAML or provide a JSON object, e.g.
{ "exposition": false, "type": "popup", "theme": "dark" }
See photo browser parameters (not all are supported).

# taphold_actionGroupPopupItem Group Popup Item TEXT item

Group Item whose members to show in a popup

# taphold_actionAnalyzerItems Item(s) to Analyze* TEXT item

Start analyzing with the specified (set of) Item(s)

# taphold_actionAnalyzerChartType Chart Type TEXT

The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year

Options:
(empty)
Dynamic
day
Day
isoWeek
Week (starting on Mondays)
month
Month
year
Year

# taphold_actionAnalyzerCoordSystem Initial Coordinate System TEXT

The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)

Options:
time
Time
aggregate
Aggregate
calendar
Calendar

# taphold_actionConfirmation Action Confirmation TEXT

Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object { type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" }

# taphold_actionFeedback Action Feedback TEXT

Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the supported parameters

# taphold_actionVariable Variable TEXT

The variable name to set

# taphold_actionVariableValue Variable Value TEXT

The value to set the variable to

# taphold_actionVariableKey Variable Key TEXT

Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing.

# Label

Parameters of the label

# item Item TEXT item

Item to display

# label Label TEXT

Display this text (or expression result) instead of the item's state

# background Background style TEXT

Background style (in CSS "background" attribute format)

# fontSize Font Size TEXT

Font size (e.g. "34px")

# fontWeight Font Weight TEXT

Font weight (e.g. "normal" or "bold")

# icon Icon TEXT

Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName (Iconify icon, requires being online if not in cache)

# iconColor Icon Color TEXT

Not applicable to openHAB icons

# iconSize Icon Size INTEGER

Size of the icon in px

# iconUseState Icon depends on state BOOLEAN

Use the state of the Item to get a dynamic icon (enabled by default for Contact, Dimmer, Rollershutter & Switch Item types) (for openHAB icons only)

# vertical Vertical arrangement BOOLEAN

Display label below icon

# Trend Line

Show a trend line in the background

# trendItem Trend Line Item TEXT item

Item to show as a trend line in the background

# trendStrokeWidth Trend Stroke Width TEXT

Thickness of the trend line

# trendWidth Trend Line Width TEXT

Width of the trend line (leave blank to set automatically)

# trendGradient Trend Line Gradient TEXT

Colors of the trend line (see vue-trend)

# trendGradientDirection Trend Line Gradient Direction TEXT

Direction of the trend line gradient (default: top)

Options:
top
top
bottom
bottom
left
left
right
right

# trendSampling Trend Line Sampling INTEGER

Amount of minutes between each point of the trendline (default: 60). Affected by persistence strategies different from "every minute"

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub (opens new window)

←