Component docs (#900)
Signed-off-by: Andrew Black <andrewm.black@outlook.com> Also-by: Yannick Schaus <github@schaus.net>pull/935/head
AndyXMB
GitHub
parent
4b2159713a
commit
184c6dab2f
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -4,117 +4,189 @@ component: oh-aggregate-series
|
||||||
label: Aggregate Series
|
label: Aggregate Series
|
||||||
description: Reference documentation for the oh-aggregate-series component
|
description: Reference documentation for the oh-aggregate-series component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-aggregate-series.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-aggregate-series.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-aggregate-series - Aggregate Series
|
# oh-aggregate-series - Aggregate Series
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `name` <small>TEXT</small> _Name_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
A name which will appear on tooltips and labels
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
- `item` <small>TEXT</small> _Item_
|
A name which will appear on tooltips and labels
|
||||||
|
</PropDescription>
|
||||||
The item whose persisted data to display
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
- `service` <small>TEXT</small> _Persistence Service_
|
<PropDescription>
|
||||||
|
The item whose persisted data to display
|
||||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `offsetAmount` <small>INTEGER</small> _Offset Amount_
|
<PropBlock type="TEXT" name="service" label="Persistence Service" context="persistenceService">
|
||||||
|
<PropDescription>
|
||||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||||
|
</PropDescription>
|
||||||
- `offsetUnit` <small>STRING</small> _Offset Unit_
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="offsetAmount" label="Offset Amount">
|
||||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
<PropDescription>
|
||||||
|
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `hour` | Hour |
|
<PropBlock type="STRING" name="offsetUnit" label="Offset Unit" context="offsetUnit">
|
||||||
| `minute` | Minute |
|
<PropDescription>
|
||||||
| `day` | Day |
|
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||||
| `week` | Week |
|
</PropDescription>
|
||||||
| `month` | Month |
|
<PropOptions>
|
||||||
| `year` | Year |
|
<PropOption value="hour" label="Hour" />
|
||||||
|
<PropOption value="minute" label="Minute" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
- `type` <small>TEXT</small> _Type_
|
<PropOption value="week" label="Week" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
| Option | Label |
|
</PropBlock>
|
||||||
|--------|-------|
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
| `line` | Line |
|
<PropDescription>
|
||||||
| `bar` | Bar |
|
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||||
| `heatmap` | Heatmap |
|
</PropDescription>
|
||||||
| `scatter` | Scatter |
|
<PropOptions>
|
||||||
|
<PropOption value="line" label="Line" />
|
||||||
|
<PropOption value="bar" label="Bar" />
|
||||||
- `dimension1` <small>TEXT</small> _First Dimension_
|
<PropOption value="heatmap" label="Heatmap" />
|
||||||
|
<PropOption value="scatter" label="Scatter" />
|
||||||
The largest data point cluster size.<br />It should be consistent with the chart type, and match the type of a category axis where this series will appear.
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
| Option | Label |
|
<PropBlock type="TEXT" name="dimension1" label="First Dimension">
|
||||||
|--------|-------|
|
<PropDescription>
|
||||||
| `minute` | Minute of Hour |
|
The largest data point cluster size.<br />It should be consistent with the chart type, and match the type of a category axis where this series will appear.
|
||||||
| `hour` | Hour of Day |
|
</PropDescription>
|
||||||
| `isoWeekday` | Day of Week (starting on Monday) |
|
<PropOptions>
|
||||||
| `weekday` | Day of Week (starting on Sunday) |
|
<PropOption value="minute" label="Minute of Hour" />
|
||||||
| `date` | Day of Month |
|
<PropOption value="hour" label="Hour of Day" />
|
||||||
| `month` | Month of Year |
|
<PropOption value="isoWeekday" label="Day of Week (starting on Monday)" />
|
||||||
|
<PropOption value="weekday" label="Day of Week (starting on Sunday)" />
|
||||||
|
<PropOption value="date" label="Day of Month" />
|
||||||
- `dimension2` <small>TEXT</small> _Second Dimension_
|
<PropOption value="month" label="Month of Year" />
|
||||||
|
</PropOptions>
|
||||||
The smallest data point cluster size.<br />Set only when you have 2 category axes (for instance day of the week and hour of the day), and make sure to match the type of the 2nd axis.
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="dimension2" label="Second Dimension">
|
||||||
| Option | Label |
|
<PropDescription>
|
||||||
|--------|-------|
|
The smallest data point cluster size.<br />Set only when you have 2 category axes (for instance day of the week and hour of the day), and make sure to match the type of the 2nd axis.
|
||||||
| `minute` | Minute of Hour |
|
</PropDescription>
|
||||||
| `hour` | Hour of Day |
|
<PropOptions>
|
||||||
| `isoWeekday` | Day of Week (starting on Monday) |
|
<PropOption value="minute" label="Minute of Hour" />
|
||||||
| `weekday` | Day of Week (starting on Sunday) |
|
<PropOption value="hour" label="Hour of Day" />
|
||||||
| `date` | Day of Month |
|
<PropOption value="isoWeekday" label="Day of Week (starting on Monday)" />
|
||||||
| `month` | Month of Year |
|
<PropOption value="weekday" label="Day of Week (starting on Sunday)" />
|
||||||
|
<PropOption value="date" label="Day of Month" />
|
||||||
|
<PropOption value="month" label="Month of Year" />
|
||||||
- `transpose` <small>BOOLEAN</small> _Transpose_
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
Enable when the first dimension should be mapped to the Y axis instead of the X axis
|
<PropBlock type="BOOLEAN" name="transpose" label="Transpose">
|
||||||
|
<PropDescription>
|
||||||
- `aggregationFunction` <small>TEXT</small> _Aggregation Function_
|
Enable when the first dimension should be mapped to the Y axis instead of the X axis
|
||||||
|
</PropDescription>
|
||||||
How to reduce the data points in a same aggregation cluster to a single value. If not specified, the average function will be used.
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="aggregationFunction" label="Aggregation Function">
|
||||||
| Option | Label |
|
<PropDescription>
|
||||||
|--------|-------|
|
How to reduce the data points in a same aggregation cluster to a single value. If not specified, the average function will be used.
|
||||||
| `average` | Average |
|
</PropDescription>
|
||||||
| `sum` | Sum |
|
<PropOptions>
|
||||||
| `min` | Minimum |
|
<PropOption value="average" label="Average" />
|
||||||
| `max` | Maximum |
|
<PropOption value="sum" label="Sum" />
|
||||||
| `first` | First (earliest) |
|
<PropOption value="min" label="Minimum" />
|
||||||
| `last` | Last (latest) |
|
<PropOption value="max" label="Maximum" />
|
||||||
| `diff_first` | Difference of firsts |
|
<PropOption value="first" label="First (earliest)" />
|
||||||
| `diff_last` | Difference of lasts |
|
<PropOption value="last" label="Last (latest)" />
|
||||||
|
<PropOption value="diff_first" label="Difference of firsts" />
|
||||||
|
<PropOption value="diff_last" label="Difference of lasts" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Axis and Coordinate System Assignments
|
### Axis and Coordinate System Assignments
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="componentRelations" label="Axis and Coordinate System Assignments">
|
||||||
|
<PropBlock type="INTEGER" name="xAxisIndex" label="X Axis Index" context="xAxis">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the X axis for this series
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="yAxisIndex" label="Y Axis Index" context="yAxis">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the Y axis for this series
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `xAxisIndex` <small>INTEGER</small> _X Axis Index_
|
|
||||||
|
|
||||||
The index of the X axis for this series
|
|
||||||
|
|
||||||
- `yAxisIndex` <small>INTEGER</small> _Y Axis Index_
|
|
||||||
|
|
||||||
The index of the Y axis for this series
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-aggregate-series.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-aggregate-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-aggregate-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,129 @@ component: oh-block
|
||||||
label: Layout Grid Block
|
label: Layout Grid Block
|
||||||
description: A block in a grid layout
|
description: A block in a grid layout
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-block.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-block.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-block - Layout Grid Block
|
# oh-block - Layout Grid Block
|
||||||
|
|
||||||
<!-- GENERATED componentDescription -->
|
|
||||||
A block in a grid layout
|
|
||||||
<!-- GENERATED /componentDescription -->
|
[[toc]]
|
||||||
|
|
||||||
|
## Usage / reference documents
|
||||||
|
|
||||||
|
Grids elements provide a way to organize and position other visual components on the page in relation to each other.
|
||||||
|
Some of the key design concepts are explored [here (print)](https://visme.co/blog/layout-design/) or [here (UI design)](https://material.io/design/layout/responsive-layout-grid.html).
|
||||||
|
|
||||||
|
In openHAB grid is used within [layout pages](../layout-pages.html) to organize and align controls.
|
||||||
|
Grids can also be used to layout the controls that make up a custom widget.
|
||||||
|
Both layout pages and individual controls can be made [responsive](/docs/ui/layout-pages.html#designing-responsive-layout-pages)) (their design changes based on the screen size).
|
||||||
|
A layout that is optimal on a mobile phone screen is often not on a laptop or large monitor.
|
||||||
|
|
||||||
|
::: warning Widget design
|
||||||
|
`oh-block`, [`oh-grid-row`](./oh-grid-row.html) and [`oh-grid-col`](./oh-grid-col.html) are used for layout page design.
|
||||||
|
These controls are not suitable when designing custom widgets.
|
||||||
|
Use the [f7-block](https://v5.framework7.io/vue/block.html), [f7-row](https://v5.framework7.io/vue/grid.html) and [f7-column](https://v5.framework7.io/vue/grid.html) to organize components in custom widget designs.
|
||||||
|
:::
|
||||||
|
|
||||||
|
* Layout pages are discussed within the main documentation [here](/docs/ui/layout-pages.html).
|
||||||
|
* `oh-block` is the root a container object for [`oh-grid-row`](./oh-grid-row.html)/[`oh-grid-col`](./oh-grid-col.html) objects (which in turn, host the controls that provide the user interface).
|
||||||
|
* An `oh-block` is created in a layout page each time you click the `Add Block` button in the page design window. At least one block is required for each layout page.
|
||||||
|
* You can view / edit the layout page code by clicking the `Code` tab when in page design view (Administration/Settings/Pages).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
* These components are based upon the corresponding [Framework 7 (v5) block control](https://v5.framework7.io/docs/block.html).
|
||||||
|
* Component styles are applied by the [Framework 7 CSS variables](https://v5.framework7.io/docs/block.html#css-variables).
|
||||||
|
Not all styles are implemented/available for use in this customised version of the control.
|
||||||
|
For guidance on how to customise styles see the [CSS Styles](https://openhab.org/docs/ui/building-pages.html#css-variables) section.
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
Grid is not a table!
|
||||||
|
Grid components are virtual containers, so you can not view them or add borders as you would be able to do with a HTML table.
|
||||||
|
:::
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
|
Title of the block, displayed above it
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `title` <small>TEXT</small> _Title_
|
|
||||||
|
|
||||||
Title of the block, displayed above it
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
The configuration is passed to the underlying `f7-block` component from Framework7 v5, however there are no compatible scalar properties available, due to the application specific purpose for this control.
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
Hosts all child content to be placed within this container.
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Header Image Source Code
|
||||||
|
|
||||||
|
This example code generates the example block and grid image used at the top of this page:
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
|
||||||
|
```yaml{4-8}
|
||||||
|
config:
|
||||||
|
label: testGrid
|
||||||
|
blocks:
|
||||||
|
- component: oh-block
|
||||||
|
config:
|
||||||
|
title: Here is a BLOCK with a TITLE
|
||||||
|
slots:
|
||||||
|
default:
|
||||||
|
- component: oh-grid-row
|
||||||
|
config: {}
|
||||||
|
slots:
|
||||||
|
default: []
|
||||||
|
- component: oh-grid-cells
|
||||||
|
config: {}
|
||||||
|
slots:
|
||||||
|
default:
|
||||||
|
- component: oh-cell
|
||||||
|
config: {}
|
||||||
|
- component: oh-cell
|
||||||
|
config: {}
|
||||||
|
- component: oh-cell
|
||||||
|
config: {}
|
||||||
|
- component: oh-cell
|
||||||
|
config: {}
|
||||||
|
- component: oh-grid-row
|
||||||
|
config: {}
|
||||||
|
slots:
|
||||||
|
default:
|
||||||
|
- component: oh-grid-col
|
||||||
|
config: {}
|
||||||
|
slots:
|
||||||
|
default:
|
||||||
|
- component: oh-label-card
|
||||||
|
config: {}
|
||||||
|
- component: oh-grid-col
|
||||||
|
config: {}
|
||||||
|
slots:
|
||||||
|
default:
|
||||||
|
- component: oh-label-card
|
||||||
|
config: {}
|
||||||
|
masonry: []
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
* Got a cool example from the Community pages? Use the GitHub edit page link to add links to this page!
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,34 +4,106 @@ component: oh-calendar-axis
|
||||||
label: Calendar
|
label: Calendar
|
||||||
description: Reference documentation for the oh-calendar-axis component
|
description: Reference documentation for the oh-calendar-axis component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-calendar-axis.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-calendar-axis.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-calendar-axis - Calendar
|
# oh-calendar-axis - Calendar
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `orient` <small>TEXT</small> _Orientation_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
| Option | Label |
|
<PropBlock type="TEXT" name="orient" label="Orientation">
|
||||||
|--------|-------|
|
<PropOptions>
|
||||||
| `horizontal` | Horizontal |
|
<PropOption value="horizontal" label="Horizontal" />
|
||||||
| `vertical` | Vertical |
|
<PropOption value="vertical" label="Vertical" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Name Display
|
### Name Display
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="nameDisplay" label="Name Display">
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Axis and Coordinate System Assignments
|
### Axis and Coordinate System Assignments
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="componentRelations" label="Axis and Coordinate System Assignments">
|
||||||
|
<PropBlock type="INTEGER" name="gridIndex" label="Grid Index" context="chartGrid">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the grid for this axis
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `gridIndex` <small>INTEGER</small> _Grid Index_
|
|
||||||
|
|
||||||
The index of the grid for this axis
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-calendar-axis.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-calendar-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-calendar-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,79 +4,151 @@ component: oh-calendar-series
|
||||||
label: Calendar Series
|
label: Calendar Series
|
||||||
description: Reference documentation for the oh-calendar-series component
|
description: Reference documentation for the oh-calendar-series component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-calendar-series.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-calendar-series.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-calendar-series - Calendar Series
|
# oh-calendar-series - Calendar Series
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `name` <small>TEXT</small> _Name_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
A name which will appear on tooltips and labels
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
- `item` <small>TEXT</small> _Item_
|
A name which will appear on tooltips and labels
|
||||||
|
</PropDescription>
|
||||||
The item whose persisted data to display
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
- `service` <small>TEXT</small> _Persistence Service_
|
<PropDescription>
|
||||||
|
The item whose persisted data to display
|
||||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `offsetAmount` <small>INTEGER</small> _Offset Amount_
|
<PropBlock type="TEXT" name="service" label="Persistence Service" context="persistenceService">
|
||||||
|
<PropDescription>
|
||||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||||
|
</PropDescription>
|
||||||
- `offsetUnit` <small>STRING</small> _Offset Unit_
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="offsetAmount" label="Offset Amount">
|
||||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
<PropDescription>
|
||||||
|
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `hour` | Hour |
|
<PropBlock type="STRING" name="offsetUnit" label="Offset Unit" context="offsetUnit">
|
||||||
| `minute` | Minute |
|
<PropDescription>
|
||||||
| `day` | Day |
|
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||||
| `week` | Week |
|
</PropDescription>
|
||||||
| `month` | Month |
|
<PropOptions>
|
||||||
| `year` | Year |
|
<PropOption value="hour" label="Hour" />
|
||||||
|
<PropOption value="minute" label="Minute" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
- `type` <small>TEXT</small> _Type_
|
<PropOption value="week" label="Week" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
| Option | Label |
|
</PropBlock>
|
||||||
|--------|-------|
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
| `heatmap` | Heatmap |
|
<PropDescription>
|
||||||
| `scatter` | Scatter |
|
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
- `aggregationFunction` <small>TEXT</small> _Aggregation Function_
|
<PropOption value="heatmap" label="Heatmap" />
|
||||||
|
<PropOption value="scatter" label="Scatter" />
|
||||||
How to reduce the data points in a same aggregation cluster to a single value. If not specified, the average function will be used.
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
| Option | Label |
|
<PropBlock type="TEXT" name="aggregationFunction" label="Aggregation Function">
|
||||||
|--------|-------|
|
<PropDescription>
|
||||||
| `average` | Average |
|
How to reduce the data points in a same aggregation cluster to a single value. If not specified, the average function will be used.
|
||||||
| `sum` | Sum |
|
</PropDescription>
|
||||||
| `min` | Minimum |
|
<PropOptions>
|
||||||
| `max` | Maximum |
|
<PropOption value="average" label="Average" />
|
||||||
| `first` | First (earliest) |
|
<PropOption value="sum" label="Sum" />
|
||||||
| `last` | Last (latest) |
|
<PropOption value="min" label="Minimum" />
|
||||||
| `diff_first` | Difference of firsts |
|
<PropOption value="max" label="Maximum" />
|
||||||
| `diff_last` | Difference of lasts |
|
<PropOption value="first" label="First (earliest)" />
|
||||||
|
<PropOption value="last" label="Last (latest)" />
|
||||||
|
<PropOption value="diff_first" label="Difference of firsts" />
|
||||||
|
<PropOption value="diff_last" label="Difference of lasts" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Axis and Coordinate System Assignments
|
### Axis and Coordinate System Assignments
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="componentRelations" label="Axis and Coordinate System Assignments">
|
||||||
|
<PropBlock type="INTEGER" name="calendarIndex" label="Calendar Index" context="chartCalendar">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the calendar for this series
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `calendarIndex` <small>INTEGER</small> _Calendar Index_
|
|
||||||
|
|
||||||
The index of the calendar for this series
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-calendar-series.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-calendar-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-calendar-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,91 +4,166 @@ component: oh-category-axis
|
||||||
label: Category Axis
|
label: Category Axis
|
||||||
description: Reference documentation for the oh-category-axis component
|
description: Reference documentation for the oh-category-axis component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-category-axis.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-category-axis.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-category-axis - Category Axis
|
# oh-category-axis - Category Axis
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `name` <small>TEXT</small> _Name_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
A name which will appear on tooltips and labels
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
- `categoryType` <small>TEXT</small> _Categories_
|
A name which will appear on tooltips and labels
|
||||||
|
</PropDescription>
|
||||||
Type of categories to display
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="categoryType" label="Categories" required="true">
|
||||||
| Option | Label |
|
<PropDescription>
|
||||||
|--------|-------|
|
Type of categories to display
|
||||||
| `hour` | Minutes of hour |
|
</PropDescription>
|
||||||
| `day` | Hours of day |
|
<PropOptions>
|
||||||
| `week` | Days of week |
|
<PropOption value="hour" label="Minutes of hour" />
|
||||||
| `month` | Days of month |
|
<PropOption value="day" label="Hours of day" />
|
||||||
| `year` | Months of year |
|
<PropOption value="week" label="Days of week" />
|
||||||
|
<PropOption value="month" label="Days of month" />
|
||||||
|
<PropOption value="year" label="Months of year" />
|
||||||
- `weekdayFormat` <small>TEXT</small> _Weekday Format_
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
Format of weekdays labels
|
<PropBlock type="TEXT" name="weekdayFormat" label="Weekday Format" required="true">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Format of weekdays labels
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `default` | Long (default) |
|
<PropOptions>
|
||||||
| `short` | Short |
|
<PropOption value="default" label="Long (default)" />
|
||||||
| `min` | Minimal |
|
<PropOption value="short" label="Short" />
|
||||||
|
<PropOption value="min" label="Minimal" />
|
||||||
|
</PropOptions>
|
||||||
- `startonSunday` <small>BOOLEAN</small> _Start Week on Sunday_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="startonSunday" label="Start Week on Sunday">
|
||||||
Check to start the week on Sundays instead of Mondays
|
<PropDescription>
|
||||||
|
Check to start the week on Sundays instead of Mondays
|
||||||
- `monthFormat` <small>TEXT</small> _Month Format_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Format of months labels
|
<PropBlock type="TEXT" name="monthFormat" label="Month Format" required="true">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Format of months labels
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `default` | Long (default) |
|
<PropOptions>
|
||||||
| `short` | Short |
|
<PropOption value="default" label="Long (default)" />
|
||||||
|
<PropOption value="short" label="Short" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Name Display
|
### Name Display
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="nameDisplay" label="Name Display">
|
||||||
- `nameLocation` <small>TEXT</small> _Name Location_
|
<PropBlock type="TEXT" name="nameLocation" label="Name Location">
|
||||||
|
<PropDescription>
|
||||||
Location of axis name
|
Location of axis name
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
<PropOptions>
|
||||||
|--------|-------|
|
<PropOption value="start" label="Start" />
|
||||||
| `start` | Start |
|
<PropOption value="center" label="Center" />
|
||||||
| `center` | Center |
|
<PropOption value="end" label="End (default)" />
|
||||||
| `end` | End (default) |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="nameGap" label="Name Gap">
|
||||||
- `nameGap` <small>INTEGER</small> _Name Gap_
|
<PropDescription>
|
||||||
|
Gap between axis name and axis line.
|
||||||
Gap between axis name and axis line.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `nameRotate` <small>TEXT</small> _Name Rotate_
|
<PropBlock type="TEXT" name="nameRotate" label="Name Rotate">
|
||||||
|
<PropDescription>
|
||||||
Rotation of axis name
|
Rotation of axis name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Axis and Coordinate System Assignments
|
### Axis and Coordinate System Assignments
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="componentRelations" label="Axis and Coordinate System Assignments">
|
||||||
|
<PropBlock type="INTEGER" name="gridIndex" label="Grid Index" context="chartGrid">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the grid for this axis
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="gridIndex" label="Grid Index" context="chartGrid">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the grid for this axis
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `gridIndex` <small>INTEGER</small> _Grid Index_
|
|
||||||
|
|
||||||
The index of the grid for this axis
|
|
||||||
|
|
||||||
- `gridIndex` <small>INTEGER</small> _Grid Index_
|
|
||||||
|
|
||||||
The index of the grid for this axis
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-category-axis.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-category-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-category-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,204 +4,295 @@ component: oh-cell
|
||||||
label: Cell
|
label: Cell
|
||||||
description: A regular or expandable cell
|
description: A regular or expandable cell
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-cell.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-cell.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-cell - Cell
|
# oh-cell - Cell
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A regular or expandable cell
|
A regular or expandable cell
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Cell
|
### Cell
|
||||||
|
<div class="props">
|
||||||
General settings of the cell
|
<PropGroup name="cell" label="Cell">
|
||||||
|
General settings of the cell
|
||||||
|
<PropBlock type="TEXT" name="header" label="Header">
|
||||||
- `header` <small>TEXT</small> _Header_
|
<PropDescription>
|
||||||
|
Header of the cell
|
||||||
Header of the cell
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
Title of the cell
|
Title of the cell
|
||||||
|
</PropDescription>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
Subtitle of the cell
|
<PropDescription>
|
||||||
|
Subtitle of the cell
|
||||||
- `footer` <small>TEXT</small> _Footer_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Footer of the cell
|
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||||
|
<PropDescription>
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
Footer of the cell
|
||||||
|
</PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
- `color` <small>TEXT</small> _Highlight Color_
|
<PropDescription>
|
||||||
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
Color to use when highlighted
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `on` <small>TEXT</small> _"On" expression_
|
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||||
|
<PropDescription>
|
||||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
Color to use when highlighted
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="on" label=""On" expression">
|
||||||
|
<PropDescription>
|
||||||
|
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
Action to perform when the element is clicked
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
- `action` <small>TEXT</small> _Action_
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
Type of action to perform
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
| Option | Label |
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|--------|-------|
|
<PropOption value="command" label="Send command" />
|
||||||
| `navigate` | Navigate to page |
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
| `command` | Send command |
|
<PropOption value="options" label="Command options" />
|
||||||
| `toggle` | Toggle item |
|
<PropOption value="rule" label="Run rule" />
|
||||||
| `options` | Command options |
|
<PropOption value="popup" label="Open popup" />
|
||||||
| `rule` | Run rule |
|
<PropOption value="popover" label="Open popover" />
|
||||||
| `popup` | Open popup |
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
| `popover` | Open popover |
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
| `sheet` | Open sheet |
|
<PropOption value="group" label="Group details" />
|
||||||
| `photos` | Open photo browser |
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
| `group` | Group details |
|
<PropOption value="url" label="External URL" />
|
||||||
| `analyzer` | Analyze item(s) |
|
<PropOption value="variable" label="Set Variable" />
|
||||||
| `url` | External URL |
|
</PropOptions>
|
||||||
| `variable` | Set Variable |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
URL to navigate to
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to perform the action on
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
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
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
- `actionOptions` <small>TEXT</small> _Command Options_
|
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
|
||||||
|
</PropDescription>
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
Rule to run
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
Page to navigate to
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `f7-circle` | Circle |
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
| `f7-cover` | Cover |
|
<PropDescription>
|
||||||
| `f7-cover-v` | Cover from bottom |
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
| `f7-dive` | Dive |
|
</PropDescription>
|
||||||
| `f7-fade` | Fade |
|
<PropOptions>
|
||||||
| `f7-flip` | Flip |
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
| `f7-parallax` | Parallax |
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
| `f7-push` | Push |
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
- `actionModal` <small>TEXT</small> _Modal Page or Widget_
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
Page or widget to display in the modal
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
Configuration (prop values) for the target modal page or widget
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
Group item whose members to show in a popup
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
Start analyzing with the specified (set of) item(s)
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `(empty)` | Dynamic |
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
| `day` | Day |
|
<PropDescription>
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
Start analyzing with the specified (set of) item(s)
|
||||||
| `month` | Month |
|
</PropDescription>
|
||||||
| `year` | Year |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
| Option | Label |
|
<PropOption value="day" label="Day" />
|
||||||
|--------|-------|
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
| `time` | Time |
|
<PropOption value="month" label="Month" />
|
||||||
| `aggregate` | Aggregate |
|
<PropOption value="year" label="Year" />
|
||||||
| `calendar` | Calendar |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
The variable name to set
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
The value to set the variable to
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Trend Line
|
### Trend Line
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="trend" label="Trend Line">
|
||||||
|
Trend Line Background Options
|
||||||
|
<PropBlock type="TEXT" name="trendItem" label="Trend Line Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to show as a trend line in the background
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendStrokeWidth" label="Trend Stroke Width">
|
||||||
|
<PropDescription>
|
||||||
|
Thickness of the trend line
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendWidth" label="Trend Line Width">
|
||||||
|
<PropDescription>
|
||||||
|
Width of the trend line (leave blank to set automatically)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendGradient" label="Trend Line Gradient">
|
||||||
|
<PropDescription>
|
||||||
|
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Trend Line Background Options
|
|
||||||
|
|
||||||
|
|
||||||
- `trendItem` <small>TEXT</small> _Trend Line Item_
|
|
||||||
|
|
||||||
Item to show as a trend line in the background
|
|
||||||
|
|
||||||
- `trendStrokeWidth` <small>TEXT</small> _Trend Stroke Width_
|
|
||||||
|
|
||||||
Thickness of the trend line
|
|
||||||
|
|
||||||
- `trendWidth` <small>TEXT</small> _Trend Line Width_
|
|
||||||
|
|
||||||
Width of the trend line (leave blank to set automatically)
|
|
||||||
|
|
||||||
- `trendGradient` <small>TEXT</small> _Trend Line Gradient_
|
|
||||||
|
|
||||||
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-cell.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,43 +4,110 @@ component: oh-chart-datazoom
|
||||||
label: Data Zoom
|
label: Data Zoom
|
||||||
description: Reference documentation for the oh-chart-datazoom component
|
description: Reference documentation for the oh-chart-datazoom component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-datazoom.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-datazoom.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-datazoom - Data Zoom
|
# oh-chart-datazoom - Data Zoom
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `type` <small>TEXT</small> _Type_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Type: slider (default) or inside (allows to zoom with the mousewheel or a pinch gesture)
|
<PropBlock type="TEXT" name="type" label="Type" required="true">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Type: slider (default) or inside (allows to zoom with the mousewheel or a pinch gesture)
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `slider` | Slider |
|
<PropOptions>
|
||||||
| `inside` | Inside |
|
<PropOption value="slider" label="Slider" />
|
||||||
|
<PropOption value="inside" label="Inside" />
|
||||||
|
</PropOptions>
|
||||||
- `show` <small>BOOLEAN</small> _Show_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||||
Whether to show or not this component
|
<PropDescription>
|
||||||
|
Whether to show or not this component
|
||||||
- `orient` <small>TEXT</small> _Orientation_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
| Option | Label |
|
<PropBlock type="TEXT" name="orient" label="Orientation">
|
||||||
|--------|-------|
|
<PropOptions>
|
||||||
| `horizontal` | Horizontal |
|
<PropOption value="horizontal" label="Horizontal" />
|
||||||
| `vertical` | Vertical |
|
<PropOption value="vertical" label="Vertical" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Position
|
### Position
|
||||||
|
<div class="props">
|
||||||
Applicable only to slider types
|
<PropGroup name="position" label="Position">
|
||||||
|
Applicable only to slider types
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-datazoom.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-datazoom
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-datazoom
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,39 +4,109 @@ component: oh-chart-grid
|
||||||
label: Cartesian Grid
|
label: Cartesian Grid
|
||||||
description: Reference documentation for the oh-chart-grid component
|
description: Reference documentation for the oh-chart-grid component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-grid.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-grid.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-grid - Cartesian Grid
|
# oh-chart-grid - Cartesian Grid
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `show` <small>BOOLEAN</small> _Show_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
- `containLabel` <small>BOOLEAN</small> _Contain label_
|
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||||
|
</PropBlock>
|
||||||
Whether the grid region contains the axis tick labels
|
<PropBlock type="BOOLEAN" name="containLabel" label="Contain label">
|
||||||
|
<PropDescription>
|
||||||
|
Whether the grid region contains the axis tick labels
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Position
|
### Position
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="position" label="Position">
|
||||||
|
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
||||||
|
<PropBlock type="TEXT" name="top" label="Top">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="bottom" label="Bottom">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="left" label="Left">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="right" label="Right">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="width" label="Width">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="height" label="Height">
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
|
||||||
|
|
||||||
|
|
||||||
- `top` <small>TEXT</small> _Top_
|
|
||||||
|
|
||||||
- `bottom` <small>TEXT</small> _Bottom_
|
|
||||||
|
|
||||||
- `left` <small>TEXT</small> _Left_
|
|
||||||
|
|
||||||
- `right` <small>TEXT</small> _Right_
|
|
||||||
|
|
||||||
- `width` <small>TEXT</small> _Width_
|
|
||||||
|
|
||||||
- `height` <small>TEXT</small> _Height_
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-grid.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-grid
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-grid
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,45 +4,113 @@ component: oh-chart-legend
|
||||||
label: Legend
|
label: Legend
|
||||||
description: Reference documentation for the oh-chart-legend component
|
description: Reference documentation for the oh-chart-legend component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-legend.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-legend.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-legend - Legend
|
# oh-chart-legend - Legend
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `show` <small>BOOLEAN</small> _Show_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Whether to show or not this component
|
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||||
|
<PropDescription>
|
||||||
- `orient` <small>TEXT</small> _Orientation_
|
Whether to show or not this component
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
</PropBlock>
|
||||||
|--------|-------|
|
<PropBlock type="TEXT" name="orient" label="Orientation">
|
||||||
| `horizontal` | Horizontal |
|
<PropOptions>
|
||||||
| `vertical` | Vertical |
|
<PropOption value="horizontal" label="Horizontal" />
|
||||||
|
<PropOption value="vertical" label="Vertical" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Position
|
### Position
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="position" label="Position">
|
||||||
|
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
||||||
|
<PropBlock type="TEXT" name="top" label="Top">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="bottom" label="Bottom">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="left" label="Left">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="right" label="Right">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="width" label="Width">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="height" label="Height">
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
|
||||||
|
|
||||||
|
|
||||||
- `top` <small>TEXT</small> _Top_
|
|
||||||
|
|
||||||
- `bottom` <small>TEXT</small> _Bottom_
|
|
||||||
|
|
||||||
- `left` <small>TEXT</small> _Left_
|
|
||||||
|
|
||||||
- `right` <small>TEXT</small> _Right_
|
|
||||||
|
|
||||||
- `width` <small>TEXT</small> _Width_
|
|
||||||
|
|
||||||
- `height` <small>TEXT</small> _Height_
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-legend.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-legend
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-legend
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,52 +4,117 @@ component: oh-chart-page
|
||||||
label: Chart Page
|
label: Chart Page
|
||||||
description: Visualize historical series
|
description: Visualize historical series
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-page.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-page.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-page - Chart Page
|
# oh-chart-page - Chart Page
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Visualize historical series
|
Visualize historical series
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `chartType` <small>TEXT</small> _Chart Type_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Define a fixed period for the chart, aligned at the beginning of the period, e.g. January 1st at midnight for a year chart. If not set (or set to dynamic), the length of the period will be configurable but certain combinations like aggregated series might not work
|
<PropBlock type="TEXT" name="chartType" label="Chart Type" required="true">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Define a fixed period for the chart, aligned at the beginning of the period, e.g. January 1st at midnight for a year chart. If not set (or set to dynamic), the length of the period will be configurable but certain combinations like aggregated series might not work
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `(empty)` | Dynamic period |
|
<PropOptions>
|
||||||
| `day` | Day |
|
<PropOption value="(empty)" label="Dynamic period" />
|
||||||
| `isoWeek` | Week (starting on Monday) |
|
<PropOption value="day" label="Day" />
|
||||||
| `week` | Week (starting on Sunday) |
|
<PropOption value="isoWeek" label="Week (starting on Monday)" />
|
||||||
| `month` | Month |
|
<PropOption value="week" label="Week (starting on Sunday)" />
|
||||||
| `year` | Year |
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
- `period` <small>TEXT</small> _Initial Period_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="period" label="Initial Period">
|
||||||
The initial period for the chart
|
<PropDescription>
|
||||||
|
The initial period for the chart
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions>
|
||||||
| `h` | h |
|
<PropOption value="h" label="h" />
|
||||||
| `2h` | 2h |
|
<PropOption value="2h" label="2h" />
|
||||||
| `4h` | 4h |
|
<PropOption value="4h" label="4h" />
|
||||||
| `12h` | 12h |
|
<PropOption value="12h" label="12h" />
|
||||||
| `D` | D |
|
<PropOption value="D" label="D" />
|
||||||
| `2D` | 2D |
|
<PropOption value="2D" label="2D" />
|
||||||
| `3D` | 3D |
|
<PropOption value="3D" label="3D" />
|
||||||
| `W` | W |
|
<PropOption value="W" label="W" />
|
||||||
| `2W` | 2W |
|
<PropOption value="2W" label="2W" />
|
||||||
| `M` | M |
|
<PropOption value="M" label="M" />
|
||||||
| `2M` | 2M |
|
<PropOption value="2M" label="2M" />
|
||||||
| `4M` | 4M |
|
<PropOption value="4M" label="4M" />
|
||||||
| `6M` | 6M |
|
<PropOption value="6M" label="6M" />
|
||||||
| `Y` | Y |
|
<PropOption value="Y" label="Y" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-page.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-page
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-page
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,41 +4,111 @@ component: oh-chart-title
|
||||||
label: Title
|
label: Title
|
||||||
description: Reference documentation for the oh-chart-title component
|
description: Reference documentation for the oh-chart-title component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-title.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-title.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-title - Title
|
# oh-chart-title - Title
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `show` <small>BOOLEAN</small> _Show_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Whether to show or not this component
|
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||||
|
<PropDescription>
|
||||||
- `text` <small>TEXT</small> _Title_
|
Whether to show or not this component
|
||||||
|
</PropDescription>
|
||||||
- `subtext` <small>TEXT</small> _Subtitle_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="text" label="Title">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtext" label="Subtitle">
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Position
|
### Position
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="position" label="Position">
|
||||||
|
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
||||||
|
<PropBlock type="TEXT" name="top" label="Top">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="bottom" label="Bottom">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="left" label="Left">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="right" label="Right">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="width" label="Width">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="height" label="Height">
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
|
||||||
|
|
||||||
|
|
||||||
- `top` <small>TEXT</small> _Top_
|
|
||||||
|
|
||||||
- `bottom` <small>TEXT</small> _Bottom_
|
|
||||||
|
|
||||||
- `left` <small>TEXT</small> _Left_
|
|
||||||
|
|
||||||
- `right` <small>TEXT</small> _Right_
|
|
||||||
|
|
||||||
- `width` <small>TEXT</small> _Width_
|
|
||||||
|
|
||||||
- `height` <small>TEXT</small> _Height_
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-title.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-title
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-title
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,50 +4,116 @@ component: oh-chart-toolbox
|
||||||
label: Toolbox
|
label: Toolbox
|
||||||
description: Reference documentation for the oh-chart-toolbox component
|
description: Reference documentation for the oh-chart-toolbox component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-toolbox.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-toolbox.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-toolbox - Toolbox
|
# oh-chart-toolbox - Toolbox
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `show` <small>BOOLEAN</small> _Show_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Whether to show or not this component
|
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||||
|
<PropDescription>
|
||||||
- `presetFeatures` <small>TEXT</small> _Features_
|
Whether to show or not this component
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
</PropBlock>
|
||||||
|--------|-------|
|
<PropBlock type="TEXT" name="presetFeatures" label="Features" required="true">
|
||||||
| `saveAsImage` | Save as Image |
|
<PropOptions multiple="true">
|
||||||
| `restore` | Restore |
|
<PropOption value="saveAsImage" label="Save as Image" />
|
||||||
| `dataView` | Data Table |
|
<PropOption value="restore" label="Restore" />
|
||||||
| `dataZoom` | Drag Range to Zoom |
|
<PropOption value="dataView" label="Data Table" />
|
||||||
| `magicType` | Change Chart Type |
|
<PropOption value="dataZoom" label="Drag Range to Zoom" />
|
||||||
|
<PropOption value="magicType" label="Change Chart Type" />
|
||||||
Multiple options are allowed.
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Position
|
### Position
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="position" label="Position">
|
||||||
|
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
||||||
|
<PropBlock type="TEXT" name="top" label="Top">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="bottom" label="Bottom">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="left" label="Left">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="right" label="Right">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="width" label="Width">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="height" label="Height">
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
|
||||||
|
|
||||||
|
|
||||||
- `top` <small>TEXT</small> _Top_
|
|
||||||
|
|
||||||
- `bottom` <small>TEXT</small> _Bottom_
|
|
||||||
|
|
||||||
- `left` <small>TEXT</small> _Left_
|
|
||||||
|
|
||||||
- `right` <small>TEXT</small> _Right_
|
|
||||||
|
|
||||||
- `width` <small>TEXT</small> _Width_
|
|
||||||
|
|
||||||
- `height` <small>TEXT</small> _Height_
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-toolbox.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-toolbox
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-toolbox
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,32 +4,99 @@ component: oh-chart-tooltip
|
||||||
label: Tooltip
|
label: Tooltip
|
||||||
description: Reference documentation for the oh-chart-tooltip component
|
description: Reference documentation for the oh-chart-tooltip component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-tooltip.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-tooltip.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-tooltip - Tooltip
|
# oh-chart-tooltip - Tooltip
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||||
|
<PropDescription>
|
||||||
|
Whether to show or not this component
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="orient" label="Orientation">
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="horizontal" label="Horizontal" />
|
||||||
|
<PropOption value="vertical" label="Vertical" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="confine" label="Confine">
|
||||||
|
<PropDescription>
|
||||||
|
Keep the tooltip within the chart bounds
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `show` <small>BOOLEAN</small> _Show_
|
|
||||||
|
|
||||||
Whether to show or not this component
|
|
||||||
|
|
||||||
- `orient` <small>TEXT</small> _Orientation_
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `horizontal` | Horizontal |
|
|
||||||
| `vertical` | Vertical |
|
|
||||||
|
|
||||||
|
|
||||||
- `confine` <small>BOOLEAN</small> _Confine_
|
|
||||||
|
|
||||||
Keep the tooltip within the chart bounds
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-tooltip.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-tooltip
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-tooltip
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,90 +4,165 @@ component: oh-chart-visualmap
|
||||||
label: Visual Map
|
label: Visual Map
|
||||||
description: Reference documentation for the oh-chart-visualmap component
|
description: Reference documentation for the oh-chart-visualmap component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-visualmap.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart-visualmap.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart-visualmap - Visual Map
|
# oh-chart-visualmap - Visual Map
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `show` <small>BOOLEAN</small> _Show_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Whether to show or not this component
|
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||||
|
<PropDescription>
|
||||||
|
Whether to show or not this component
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Boundaries
|
### Boundaries
|
||||||
|
<div class="props">
|
||||||
Values considered in range for this visual map (by default [0, 200])<br/><strong>These cannot be determined from the series and have to be defined manually!</strong>
|
<PropGroup name="boundariesGroup" label="Boundaries">
|
||||||
|
Values considered in range for this visual map (by default [0, 200])<br/><strong>These cannot be determined from the series and have to be defined manually!</strong>
|
||||||
|
<PropBlock type="TEXT" name="min" label="Min">
|
||||||
- `min` <small>TEXT</small> _Min_
|
<PropDescription>
|
||||||
|
Minimum boundary
|
||||||
Minimum boundary
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `max` <small>TEXT</small> _Max_
|
<PropBlock type="TEXT" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
Maximum boundary
|
Maximum boundary
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Appearance
|
### Appearance
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="appearanceGroup" label="Appearance">
|
||||||
- `type` <small>TEXT</small> _Type_
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
Type of visual map - continuous or piecewise
|
Type of visual map - continuous or piecewise
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
<PropOptions>
|
||||||
|--------|-------|
|
<PropOption value="continuous" label="Continuous" />
|
||||||
| `continuous` | Continuous |
|
<PropOption value="piecewise" label="Piecewise" />
|
||||||
| `piecewise` | Piecewise |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="orient" label="Orientation">
|
||||||
- `orient` <small>TEXT</small> _Orientation_
|
<PropOptions>
|
||||||
|
<PropOption value="horizontal" label="Horizontal" />
|
||||||
| Option | Label |
|
<PropOption value="vertical" label="Vertical" />
|
||||||
|--------|-------|
|
</PropOptions>
|
||||||
| `horizontal` | Horizontal |
|
</PropBlock>
|
||||||
| `vertical` | Vertical |
|
<PropBlock type="BOOLEAN" name="calculable" label="Show handles">
|
||||||
|
<PropDescription>
|
||||||
|
Show handles to filter data in continuous mode
|
||||||
- `calculable` <small>BOOLEAN</small> _Show handles_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Show handles to filter data in continuous mode
|
<PropBlock type="INTEGER" name="pieces" label="Number of pieces">
|
||||||
|
<PropDescription>
|
||||||
- `pieces` <small>INTEGER</small> _Number of pieces_
|
Number of pieces in piecewise mode
|
||||||
|
</PropDescription>
|
||||||
Number of pieces in piecewise mode
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="presetPalette" label="Preset color palette">
|
||||||
- `presetPalette` <small>TEXT</small> _Preset color palette_
|
<PropDescription>
|
||||||
|
Choose from a selection of preset color palettes for the values in range. The default is a yellow (low) to red (high) gradient
|
||||||
Choose from a selection of preset color palettes for the values in range. The default is a yellow (low) to red (high) gradient
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
| Option | Label |
|
<PropOption value="greenred" label="Green-Yellow-Red" />
|
||||||
|--------|-------|
|
<PropOption value="whiteblue" label="White-Blue" />
|
||||||
| `greenred` | Green-Yellow-Red |
|
<PropOption value="bluered" label="Blue-red" />
|
||||||
| `whiteblue` | White-Blue |
|
</PropOptions>
|
||||||
| `bluered` | Blue-red |
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Position
|
### Position
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="position" label="Position">
|
||||||
|
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
||||||
|
<PropBlock type="TEXT" name="top" label="Top">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="bottom" label="Bottom">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="left" label="Left">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="right" label="Right">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="width" label="Width">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="height" label="Height">
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Each parameter accepts pixel values or percentages. Additionally, top accepts "top", "middle" and "bottom" to align the component vertically, and left accepts "left", "center" and "right" to align the component horizontally
|
|
||||||
|
|
||||||
|
|
||||||
- `top` <small>TEXT</small> _Top_
|
|
||||||
|
|
||||||
- `bottom` <small>TEXT</small> _Bottom_
|
|
||||||
|
|
||||||
- `left` <small>TEXT</small> _Left_
|
|
||||||
|
|
||||||
- `right` <small>TEXT</small> _Right_
|
|
||||||
|
|
||||||
- `width` <small>TEXT</small> _Width_
|
|
||||||
|
|
||||||
- `height` <small>TEXT</small> _Height_
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart-visualmap.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-visualmap
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart-visualmap
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,52 +4,117 @@ component: oh-chart
|
||||||
label: Chart
|
label: Chart
|
||||||
description: Visualize series of data
|
description: Visualize series of data
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-chart.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-chart - Chart
|
# oh-chart - Chart
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Visualize series of data
|
Visualize series of data
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `chartType` <small>TEXT</small> _Chart Type_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Define a fixed period for the chart, aligned at the beginning of the period, e.g. January 1st at midnight for a year chart. If not set (or set to dynamic), the length of the period will be configurable but certain combinations like aggregated series might not work
|
<PropBlock type="TEXT" name="chartType" label="Chart Type" required="true">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Define a fixed period for the chart, aligned at the beginning of the period, e.g. January 1st at midnight for a year chart. If not set (or set to dynamic), the length of the period will be configurable but certain combinations like aggregated series might not work
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `(empty)` | Dynamic period |
|
<PropOptions>
|
||||||
| `day` | Day |
|
<PropOption value="(empty)" label="Dynamic period" />
|
||||||
| `isoWeek` | Week (starting on Monday) |
|
<PropOption value="day" label="Day" />
|
||||||
| `week` | Week (starting on Sunday) |
|
<PropOption value="isoWeek" label="Week (starting on Monday)" />
|
||||||
| `month` | Month |
|
<PropOption value="week" label="Week (starting on Sunday)" />
|
||||||
| `year` | Year |
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
- `period` <small>TEXT</small> _Initial Period_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="period" label="Initial Period">
|
||||||
The initial period for the chart
|
<PropDescription>
|
||||||
|
The initial period for the chart
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions>
|
||||||
| `h` | h |
|
<PropOption value="h" label="h" />
|
||||||
| `2h` | 2h |
|
<PropOption value="2h" label="2h" />
|
||||||
| `4h` | 4h |
|
<PropOption value="4h" label="4h" />
|
||||||
| `12h` | 12h |
|
<PropOption value="12h" label="12h" />
|
||||||
| `D` | D |
|
<PropOption value="D" label="D" />
|
||||||
| `2D` | 2D |
|
<PropOption value="2D" label="2D" />
|
||||||
| `3D` | 3D |
|
<PropOption value="3D" label="3D" />
|
||||||
| `W` | W |
|
<PropOption value="W" label="W" />
|
||||||
| `2W` | 2W |
|
<PropOption value="2W" label="2W" />
|
||||||
| `M` | M |
|
<PropOption value="M" label="M" />
|
||||||
| `2M` | 2M |
|
<PropOption value="2M" label="2M" />
|
||||||
| `4M` | 4M |
|
<PropOption value="4M" label="4M" />
|
||||||
| `6M` | 6M |
|
<PropOption value="6M" label="6M" />
|
||||||
| `Y` | Y |
|
<PropOption value="Y" label="Y" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-chart.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-chart
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-chart
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,234 +4,323 @@ component: oh-clock-card
|
||||||
label: Digital Clock Card
|
label: Digital Clock Card
|
||||||
description: Display a digital clock in a card
|
description: Display a digital clock in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-clock-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-clock-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-clock-card - Digital Clock Card
|
# oh-clock-card - Digital Clock Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a digital clock in a card
|
Display a digital clock in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Clock
|
### Clock
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="clock" label="Clock">
|
||||||
- `timeFormat` <small>TEXT</small> _Time Format_
|
<PropBlock type="TEXT" name="timeFormat" label="Time Format">
|
||||||
|
<PropDescription>
|
||||||
Time format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>
|
Time format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
<PropOptions>
|
||||||
|--------|-------|
|
<PropOption value="LTS" label="Localized time including seconds ('LTS', e.g. '8:02:18 PM')" />
|
||||||
| `LTS` | Localized time including seconds ('LTS', e.g. '8:02:18 PM') |
|
<PropOption value="LT" label="Localized time ('LT'. e.g. '8:02 PM')" />
|
||||||
| `LT` | Localized time ('LT'. e.g. '8:02 PM') |
|
<PropOption value="HH:mm:ss" label="Current time ('HH:mm:ss')" />
|
||||||
| `HH:mm:ss` | Current time ('HH:mm:ss') |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="background" label="Background style">
|
||||||
- `background` <small>TEXT</small> _Background style_
|
<PropDescription>
|
||||||
|
Background style (in CSS "background" attribute format)
|
||||||
Background style (in CSS "background" attribute format)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `timeFontSize` <small>TEXT</small> _Time Font Size_
|
<PropBlock type="TEXT" name="timeFontSize" label="Time Font Size">
|
||||||
|
<PropDescription>
|
||||||
Time font size (e.g. "34px")
|
Time font size (e.g. "34px")
|
||||||
|
</PropDescription>
|
||||||
- `timeFontWeight` <small>TEXT</small> _Time Font Weight_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="timeFontWeight" label="Time Font Weight">
|
||||||
Time font weight (e.g. "normal" or "bold")
|
<PropDescription>
|
||||||
|
Time font weight (e.g. "normal" or "bold")
|
||||||
- `showDate` <small>BOOLEAN</small> _Show the date_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Show the current date in addition to the time
|
<PropBlock type="BOOLEAN" name="showDate" label="Show the date">
|
||||||
|
<PropDescription>
|
||||||
- `dateFormat` <small>TEXT</small> _Date Format_
|
Show the current date in addition to the time
|
||||||
|
</PropDescription>
|
||||||
Date format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="dateFormat" label="Date Format">
|
||||||
| Option | Label |
|
<PropDescription>
|
||||||
|--------|-------|
|
Date format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>
|
||||||
| `LL` | Localized long date ('LL', e.g. 'August 16, 2018') |
|
</PropDescription>
|
||||||
| `L` | Localized short date ('L', e.g. '08/16/2018') |
|
<PropOptions>
|
||||||
| `MM/DD/YYYY` | Current date ('MM/DD/YYYY') |
|
<PropOption value="LL" label="Localized long date ('LL', e.g. 'August 16, 2018')" />
|
||||||
|
<PropOption value="L" label="Localized short date ('L', e.g. '08/16/2018')" />
|
||||||
|
<PropOption value="MM/DD/YYYY" label="Current date ('MM/DD/YYYY')" />
|
||||||
- `datePos` <small>TEXT</small> _Date Position_
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
Where to show the date
|
<PropBlock type="TEXT" name="datePos" label="Date Position">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Where to show the date
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `above` | Above time |
|
<PropOptions>
|
||||||
| `below` | Below time |
|
<PropOption value="above" label="Above time" />
|
||||||
|
<PropOption value="below" label="Below time" />
|
||||||
|
</PropOptions>
|
||||||
- `dateFontSize` <small>TEXT</small> _Date Font Size_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="dateFontSize" label="Date Font Size">
|
||||||
Date font size (e.g. "34px")
|
<PropDescription>
|
||||||
|
Date font size (e.g. "34px")
|
||||||
- `dateFontWeight` <small>TEXT</small> _Date Font Weight_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Date font weight (e.g. "normal" or "bold")
|
<PropBlock type="TEXT" name="dateFontWeight" label="Date Font Weight">
|
||||||
|
<PropDescription>
|
||||||
|
Date font weight (e.g. "normal" or "bold")
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the clock is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the clock is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-clock-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-clock-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-clock-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,69 +4,138 @@ component: oh-colorpicker-card
|
||||||
label: Color Picker Card
|
label: Color Picker Card
|
||||||
description: Display a color picker in a card
|
description: Display a color picker in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-colorpicker-card - Color Picker Card
|
# oh-colorpicker-card - Color Picker Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a color picker in a card
|
Display a color picker in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Color picker
|
### Color picker
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="colorpicker" label="Color picker">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to control
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
- `modules` <small>TEXT</small> _Modules_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="modules" label="Modules">
|
||||||
Modules to display
|
<PropDescription>
|
||||||
|
Modules to display
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions multiple="true">
|
||||||
| `wheel` | Color wheel |
|
<PropOption value="wheel" label="Color wheel" />
|
||||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||||
| `hue-slider` | Hue slider |
|
<PropOption value="hue-slider" label="Hue slider" />
|
||||||
| `hs-spectrum` | Hue/saturation spectrum |
|
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||||
| `brightness-slider` | Brightness spectrum |
|
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||||
| `rgb-sliders` | RGB sliders |
|
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||||
| `hsb-sliders` | HSB sliders |
|
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||||
| `rgb-bars` | RGB bars |
|
<PropOption value="rgb-bars" label="RGB bars" />
|
||||||
| `palette` | Palette |
|
<PropOption value="palette" label="Palette" />
|
||||||
| `current-color` | Current color |
|
<PropOption value="current-color" label="Current color" />
|
||||||
| `initial-current-colors` | Initial current colors |
|
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||||
|
</PropOptions>
|
||||||
Multiple options are allowed.
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-colorpicker-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,211 +4,297 @@ component: oh-colorpicker-cell
|
||||||
label: Colorpicker Cell
|
label: Colorpicker Cell
|
||||||
description: A cell expanding to a color picker
|
description: A cell expanding to a color picker
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker-cell.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker-cell.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-colorpicker-cell - Colorpicker Cell
|
# oh-colorpicker-cell - Colorpicker Cell
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A cell expanding to a color picker
|
A cell expanding to a color picker
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Cell
|
### Cell
|
||||||
|
<div class="props">
|
||||||
General settings of the cell
|
<PropGroup name="cell" label="Cell">
|
||||||
|
General settings of the cell
|
||||||
|
<PropBlock type="TEXT" name="header" label="Header">
|
||||||
- `header` <small>TEXT</small> _Header_
|
<PropDescription>
|
||||||
|
Header of the cell
|
||||||
Header of the cell
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
Title of the cell
|
Title of the cell
|
||||||
|
</PropDescription>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
Subtitle of the cell
|
<PropDescription>
|
||||||
|
Subtitle of the cell
|
||||||
- `footer` <small>TEXT</small> _Footer_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Footer of the cell
|
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||||
|
<PropDescription>
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
Footer of the cell
|
||||||
|
</PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
- `color` <small>TEXT</small> _Highlight Color_
|
<PropDescription>
|
||||||
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
Color to use when highlighted
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `on` <small>TEXT</small> _"On" expression_
|
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||||
|
<PropDescription>
|
||||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
Color to use when highlighted
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="on" label=""On" expression">
|
||||||
|
<PropDescription>
|
||||||
|
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Color Picker
|
### Color Picker
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="colorpicker" label="Color Picker">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to control
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
- `modules` <small>TEXT</small> _Modules_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="modules" label="Modules">
|
||||||
Modules to display
|
<PropDescription>
|
||||||
|
Modules to display
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions multiple="true">
|
||||||
| `wheel` | Color wheel |
|
<PropOption value="wheel" label="Color wheel" />
|
||||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||||
| `hue-slider` | Hue slider |
|
<PropOption value="hue-slider" label="Hue slider" />
|
||||||
| `hs-spectrum` | Hue/saturation spectrum |
|
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||||
| `brightness-slider` | Brightness spectrum |
|
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||||
| `rgb-sliders` | RGB sliders |
|
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||||
| `hsb-sliders` | HSB sliders |
|
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||||
| `rgb-bars` | RGB bars |
|
<PropOption value="rgb-bars" label="RGB bars" />
|
||||||
| `palette` | Palette |
|
<PropOption value="palette" label="Palette" />
|
||||||
| `current-color` | Current color |
|
<PropOption value="current-color" label="Current color" />
|
||||||
| `initial-current-colors` | Initial current colors |
|
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||||
|
</PropOptions>
|
||||||
Multiple options are allowed.
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-colorpicker-cell.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,73 +4,143 @@ component: oh-colorpicker-item
|
||||||
label: Color Picker List Item
|
label: Color Picker List Item
|
||||||
description: Display a color picker in a list
|
description: Display a color picker in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-colorpicker-item - Color Picker List Item
|
# oh-colorpicker-item - Color Picker List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a color picker in a list
|
Display a color picker in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Color picker
|
### Color picker
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="colorpicker" label="Color picker">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to control
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
- `modules` <small>TEXT</small> _Modules_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="modules" label="Modules">
|
||||||
Modules to display
|
<PropDescription>
|
||||||
|
Modules to display
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions multiple="true">
|
||||||
| `wheel` | Color wheel |
|
<PropOption value="wheel" label="Color wheel" />
|
||||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||||
| `hue-slider` | Hue slider |
|
<PropOption value="hue-slider" label="Hue slider" />
|
||||||
| `hs-spectrum` | Hue/saturation spectrum |
|
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||||
| `brightness-slider` | Brightness spectrum |
|
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||||
| `rgb-sliders` | RGB sliders |
|
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||||
| `hsb-sliders` | HSB sliders |
|
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||||
| `rgb-bars` | RGB bars |
|
<PropOption value="rgb-bars" label="RGB bars" />
|
||||||
| `palette` | Palette |
|
<PropOption value="palette" label="Palette" />
|
||||||
| `current-color` | Current color |
|
<PropOption value="current-color" label="Current color" />
|
||||||
| `initial-current-colors` | Initial current colors |
|
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||||
|
</PropOptions>
|
||||||
Multiple options are allowed.
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-colorpicker-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,41 +4,106 @@ component: oh-colorpicker
|
||||||
label: Colorpicker
|
label: Colorpicker
|
||||||
description: Control to pick a color
|
description: Control to pick a color
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-colorpicker.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-colorpicker - Colorpicker
|
# oh-colorpicker - Colorpicker
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Control to pick a color
|
Control to pick a color
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `item` <small>TEXT</small> _Item_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Item to control
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
- `modules` <small>TEXT</small> _Modules_
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
Modules to display
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="modules" label="Modules">
|
||||||
| Option | Label |
|
<PropDescription>
|
||||||
|--------|-------|
|
Modules to display
|
||||||
| `wheel` | Color wheel |
|
</PropDescription>
|
||||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
<PropOptions multiple="true">
|
||||||
| `hue-slider` | Hue slider |
|
<PropOption value="wheel" label="Color wheel" />
|
||||||
| `hs-spectrum` | Hue/saturation spectrum |
|
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||||
| `brightness-slider` | Brightness spectrum |
|
<PropOption value="hue-slider" label="Hue slider" />
|
||||||
| `rgb-sliders` | RGB sliders |
|
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||||
| `hsb-sliders` | HSB sliders |
|
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||||
| `rgb-bars` | RGB bars |
|
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||||
| `palette` | Palette |
|
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||||
| `current-color` | Current color |
|
<PropOption value="rgb-bars" label="RGB bars" />
|
||||||
| `initial-current-colors` | Initial current colors |
|
<PropOption value="palette" label="Palette" />
|
||||||
|
<PropOption value="current-color" label="Current color" />
|
||||||
Multiple options are allowed.
|
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-colorpicker.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-colorpicker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,26 +4,92 @@ component: oh-data-series
|
||||||
label: Data Series
|
label: Data Series
|
||||||
description: Reference documentation for the oh-data-series component
|
description: Reference documentation for the oh-data-series component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-data-series.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-data-series.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-data-series - Data Series
|
# oh-data-series - Data Series
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `type` <small>TEXT</small> _Type_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `gauge` | undefined |
|
<PropOptions>
|
||||||
| `pie` | undefined |
|
<PropOption value="gauge" label="undefined" />
|
||||||
|
<PropOption value="pie" label="undefined" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-data-series.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-data-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-data-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,59 +4,125 @@ component: oh-equipment-card
|
||||||
label: Equipment Class Card
|
label: Equipment Class Card
|
||||||
description: A card showing model items belonging to a certain equipment class
|
description: A card showing model items belonging to a certain equipment class
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-equipment-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-equipment-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-equipment-card - Equipment Class Card
|
# oh-equipment-card - Equipment Class Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A card showing model items belonging to a certain equipment class
|
A card showing model items belonging to a certain equipment class
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Model Card
|
### Model Card
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="card" label="Model Card">
|
||||||
|
General settings for this card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
|
Subtitle of the card
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="backgroundColor" label="Background Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the card's background; if unset, choose automatically from built-in defaults for certain semantic classes
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="red" label="Red" />
|
||||||
|
<PropOption value="green" label="Green" />
|
||||||
|
<PropOption value="blue" label="Blue" />
|
||||||
|
<PropOption value="pink" label="Pink" />
|
||||||
|
<PropOption value="yellow" label="Yellow" />
|
||||||
|
<PropOption value="(empty)" label="Orange" />
|
||||||
|
<PropOption value="purple" label="Purple" />
|
||||||
|
<PropOption value="deeppurple" label="Deep Purple" />
|
||||||
|
<PropOption value="lightblue" label="Light Blue" />
|
||||||
|
<PropOption value="teal" label="Teal" />
|
||||||
|
<PropOption value="lime" label="Lime" />
|
||||||
|
<PropOption value="deeporange" label="Deep Orange" />
|
||||||
|
<PropOption value="gray" label="Gray" />
|
||||||
|
<PropOption value="black" label="Black" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="backgroundImage" label="Background Image">
|
||||||
|
<PropDescription>
|
||||||
|
URL of an image to display in the background
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="invertText" label="Invert Text">
|
||||||
|
<PropDescription>
|
||||||
|
Display the text in black (for light backgrounds)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
General settings for this card
|
|
||||||
|
|
||||||
|
|
||||||
- `title` <small>TEXT</small> _Title_
|
|
||||||
|
|
||||||
Title of the card
|
|
||||||
|
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
|
||||||
|
|
||||||
Subtitle of the card
|
|
||||||
|
|
||||||
- `backgroundColor` <small>TEXT</small> _Background Color_
|
|
||||||
|
|
||||||
Color of the card's background; if unset, choose automatically from built-in defaults for certain semantic classes
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `red` | Red |
|
|
||||||
| `green` | Green |
|
|
||||||
| `blue` | Blue |
|
|
||||||
| `pink` | Pink |
|
|
||||||
| `yellow` | Yellow |
|
|
||||||
| `(empty)` | Orange |
|
|
||||||
| `purple` | Purple |
|
|
||||||
| `deeppurple` | Deep Purple |
|
|
||||||
| `lightblue` | Light Blue |
|
|
||||||
| `teal` | Teal |
|
|
||||||
| `lime` | Lime |
|
|
||||||
| `deeporange` | Deep Orange |
|
|
||||||
| `gray` | Gray |
|
|
||||||
| `black` | Black |
|
|
||||||
|
|
||||||
|
|
||||||
- `backgroundImage` <small>TEXT</small> _Background Image_
|
|
||||||
|
|
||||||
URL of an image to display in the background
|
|
||||||
|
|
||||||
- `invertText` <small>BOOLEAN</small> _Invert Text_
|
|
||||||
|
|
||||||
Display the text in black (for light backgrounds)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-equipment-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-equipment-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-equipment-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,124 +4,210 @@ component: oh-gauge-card
|
||||||
label: Gauge Card
|
label: Gauge Card
|
||||||
description: Display a read-only gauge in a card to visualize a quantifiable item
|
description: Display a read-only gauge in a card to visualize a quantifiable item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-gauge-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-gauge-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-gauge-card - Gauge Card
|
# oh-gauge-card - Gauge Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a read-only gauge in a card to visualize a quantifiable item
|
Display a read-only gauge in a card to visualize a quantifiable item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Gauge
|
### Gauge
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="gauge" label="Gauge">
|
||||||
|
Parameters are passed to the underlying <a target="_blank" class="external text-color-blue" href="https://framework7.io/vue/gauge.html#gauge-properties">Gauge control</a>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value (default 0)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value (default 100)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
|
Type of the gauge
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="circle" label="Circle" />
|
||||||
|
<PropOption value="semicircle" label="Semicircle" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="value" label="Value">
|
||||||
|
<PropDescription>
|
||||||
|
Value, if the item is not set - between min & max (for instance, defined with an expression)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="size" label="Size">
|
||||||
|
<PropDescription>
|
||||||
|
Visual size of the control in px (default 200)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="bgColor" label="Background Color">
|
||||||
|
<PropDescription>
|
||||||
|
Gauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="borderBgColor" label="Border Background Color">
|
||||||
|
<PropDescription>
|
||||||
|
Main border/stroke background color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="borderColor" label="Border Color">
|
||||||
|
<PropDescription>
|
||||||
|
Main border/stroke color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="borderWidth" label="Border Width">
|
||||||
|
<PropDescription>
|
||||||
|
Main border/stroke width
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueText" label="Value Text">
|
||||||
|
<PropDescription>
|
||||||
|
Value text, if the item is not set (for instance, defined with an expression)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueTextColor" label="Value Text Color">
|
||||||
|
<PropDescription>
|
||||||
|
Value text color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueFontSize" label="Value Font Size">
|
||||||
|
<PropDescription>
|
||||||
|
Value text font size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueFontWeight" label="Value Font Weight">
|
||||||
|
<PropDescription>
|
||||||
|
Value text font weight
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelText" label="Label Text">
|
||||||
|
<PropDescription>
|
||||||
|
Label text, displayed below the value (optional)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelTextColor" label="Label Text Color">
|
||||||
|
<PropDescription>
|
||||||
|
Label text color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelFontSize" label="Label Font Size">
|
||||||
|
<PropDescription>
|
||||||
|
Label text font size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelFontWeight" label="Label Font Weight">
|
||||||
|
<PropDescription>
|
||||||
|
Label text font weight
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Parameters are passed to the underlying <a target="_blank" class="external text-color-blue" href="https://framework7.io/vue/gauge.html#gauge-properties">Gauge control</a>
|
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>INTEGER</small> _Min_
|
|
||||||
|
|
||||||
Minimum value (default 0)
|
|
||||||
|
|
||||||
- `max` <small>INTEGER</small> _Max_
|
|
||||||
|
|
||||||
Maximum value (default 100)
|
|
||||||
|
|
||||||
- `type` <small>TEXT</small> _Type_
|
|
||||||
|
|
||||||
Type of the gauge
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `circle` | Circle |
|
|
||||||
| `semicircle` | Semicircle |
|
|
||||||
|
|
||||||
|
|
||||||
- `value` <small>TEXT</small> _Value_
|
|
||||||
|
|
||||||
Value, if the item is not set - between min & max (for instance, defined with an expression)
|
|
||||||
|
|
||||||
- `size` <small>INTEGER</small> _Size_
|
|
||||||
|
|
||||||
Visual size of the control in px (default 200)
|
|
||||||
|
|
||||||
- `bgColor` <small>TEXT</small> _Background Color_
|
|
||||||
|
|
||||||
Gauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc.
|
|
||||||
|
|
||||||
- `borderBgColor` <small>TEXT</small> _Border Background Color_
|
|
||||||
|
|
||||||
Main border/stroke background color
|
|
||||||
|
|
||||||
- `borderColor` <small>TEXT</small> _Border Color_
|
|
||||||
|
|
||||||
Main border/stroke color
|
|
||||||
|
|
||||||
- `borderWidth` <small>TEXT</small> _Border Width_
|
|
||||||
|
|
||||||
Main border/stroke width
|
|
||||||
|
|
||||||
- `valueText` <small>TEXT</small> _Value Text_
|
|
||||||
|
|
||||||
Value text, if the item is not set (for instance, defined with an expression)
|
|
||||||
|
|
||||||
- `valueTextColor` <small>TEXT</small> _Value Text Color_
|
|
||||||
|
|
||||||
Value text color
|
|
||||||
|
|
||||||
- `valueFontSize` <small>TEXT</small> _Value Font Size_
|
|
||||||
|
|
||||||
Value text font size
|
|
||||||
|
|
||||||
- `valueFontWeight` <small>TEXT</small> _Value Font Weight_
|
|
||||||
|
|
||||||
Value text font weight
|
|
||||||
|
|
||||||
- `labelText` <small>TEXT</small> _Label Text_
|
|
||||||
|
|
||||||
Label text, displayed below the value (optional)
|
|
||||||
|
|
||||||
- `labelTextColor` <small>TEXT</small> _Label Text Color_
|
|
||||||
|
|
||||||
Label text color
|
|
||||||
|
|
||||||
- `labelFontSize` <small>TEXT</small> _Label Font Size_
|
|
||||||
|
|
||||||
Label text font size
|
|
||||||
|
|
||||||
- `labelFontWeight` <small>TEXT</small> _Label Font Weight_
|
|
||||||
|
|
||||||
Label text font weight
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-gauge-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-gauge-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-gauge-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,94 +4,177 @@ component: oh-gauge
|
||||||
label: Gauge
|
label: Gauge
|
||||||
description: Circular or semi-circular read-only gauge
|
description: Circular or semi-circular read-only gauge
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-gauge.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-gauge.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-gauge - Gauge
|
# oh-gauge - Gauge
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Circular or semi-circular read-only gauge
|
Circular or semi-circular read-only gauge
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value (default 0)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value (default 100)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
|
Type of the gauge
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="circle" label="Circle" />
|
||||||
|
<PropOption value="semicircle" label="Semicircle" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="value" label="Value">
|
||||||
|
<PropDescription>
|
||||||
|
Value, if the item is not set - between min & max (for instance, defined with an expression)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="size" label="Size">
|
||||||
|
<PropDescription>
|
||||||
|
Visual size of the control in px (default 200)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="bgColor" label="Background Color">
|
||||||
|
<PropDescription>
|
||||||
|
Gauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="borderBgColor" label="Border Background Color">
|
||||||
|
<PropDescription>
|
||||||
|
Main border/stroke background color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="borderColor" label="Border Color">
|
||||||
|
<PropDescription>
|
||||||
|
Main border/stroke color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="borderWidth" label="Border Width">
|
||||||
|
<PropDescription>
|
||||||
|
Main border/stroke width
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueText" label="Value Text">
|
||||||
|
<PropDescription>
|
||||||
|
Value text, if the item is not set (for instance, defined with an expression)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueTextColor" label="Value Text Color">
|
||||||
|
<PropDescription>
|
||||||
|
Value text color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueFontSize" label="Value Font Size">
|
||||||
|
<PropDescription>
|
||||||
|
Value text font size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="valueFontWeight" label="Value Font Weight">
|
||||||
|
<PropDescription>
|
||||||
|
Value text font weight
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelText" label="Label Text">
|
||||||
|
<PropDescription>
|
||||||
|
Label text, displayed below the value (optional)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelTextColor" label="Label Text Color">
|
||||||
|
<PropDescription>
|
||||||
|
Label text color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelFontSize" label="Label Font Size">
|
||||||
|
<PropDescription>
|
||||||
|
Label text font size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="labelFontWeight" label="Label Font Weight">
|
||||||
|
<PropDescription>
|
||||||
|
Label text font weight
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>INTEGER</small> _Min_
|
|
||||||
|
|
||||||
Minimum value (default 0)
|
|
||||||
|
|
||||||
- `max` <small>INTEGER</small> _Max_
|
|
||||||
|
|
||||||
Maximum value (default 100)
|
|
||||||
|
|
||||||
- `type` <small>TEXT</small> _Type_
|
|
||||||
|
|
||||||
Type of the gauge
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `circle` | Circle |
|
|
||||||
| `semicircle` | Semicircle |
|
|
||||||
|
|
||||||
|
|
||||||
- `value` <small>TEXT</small> _Value_
|
|
||||||
|
|
||||||
Value, if the item is not set - between min & max (for instance, defined with an expression)
|
|
||||||
|
|
||||||
- `size` <small>INTEGER</small> _Size_
|
|
||||||
|
|
||||||
Visual size of the control in px (default 200)
|
|
||||||
|
|
||||||
- `bgColor` <small>TEXT</small> _Background Color_
|
|
||||||
|
|
||||||
Gauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc.
|
|
||||||
|
|
||||||
- `borderBgColor` <small>TEXT</small> _Border Background Color_
|
|
||||||
|
|
||||||
Main border/stroke background color
|
|
||||||
|
|
||||||
- `borderColor` <small>TEXT</small> _Border Color_
|
|
||||||
|
|
||||||
Main border/stroke color
|
|
||||||
|
|
||||||
- `borderWidth` <small>TEXT</small> _Border Width_
|
|
||||||
|
|
||||||
Main border/stroke width
|
|
||||||
|
|
||||||
- `valueText` <small>TEXT</small> _Value Text_
|
|
||||||
|
|
||||||
Value text, if the item is not set (for instance, defined with an expression)
|
|
||||||
|
|
||||||
- `valueTextColor` <small>TEXT</small> _Value Text Color_
|
|
||||||
|
|
||||||
Value text color
|
|
||||||
|
|
||||||
- `valueFontSize` <small>TEXT</small> _Value Font Size_
|
|
||||||
|
|
||||||
Value text font size
|
|
||||||
|
|
||||||
- `valueFontWeight` <small>TEXT</small> _Value Font Weight_
|
|
||||||
|
|
||||||
Value text font weight
|
|
||||||
|
|
||||||
- `labelText` <small>TEXT</small> _Label Text_
|
|
||||||
|
|
||||||
Label text, displayed below the value (optional)
|
|
||||||
|
|
||||||
- `labelTextColor` <small>TEXT</small> _Label Text Color_
|
|
||||||
|
|
||||||
Label text color
|
|
||||||
|
|
||||||
- `labelFontSize` <small>TEXT</small> _Label Font Size_
|
|
||||||
|
|
||||||
Label text font size
|
|
||||||
|
|
||||||
- `labelFontWeight` <small>TEXT</small> _Label Font Weight_
|
|
||||||
|
|
||||||
Label text font weight
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-gauge.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-gauge
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-gauge
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,196 +4,257 @@ component: oh-grid-col
|
||||||
label: Layout Grid Column
|
label: Layout Grid Column
|
||||||
description: A column in a grid layout
|
description: A column in a grid layout
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-grid-col.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-grid-col.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-grid-col - Layout Grid Column
|
# oh-grid-col - Layout Grid Column
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A column in a grid layout
|
A column in a grid layout
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `width` <small>TEXT</small> _Width_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Standard Width
|
<PropBlock type="TEXT" name="width" label="Width">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Standard Width
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `5` | 5 % |
|
<PropOptions>
|
||||||
| `10` | 10 % |
|
<PropOption value="5" label="5 %" />
|
||||||
| `15` | 15 % |
|
<PropOption value="10" label="10 %" />
|
||||||
| `20` | 20 % |
|
<PropOption value="15" label="15 %" />
|
||||||
| `25` | 25 % |
|
<PropOption value="20" label="20 %" />
|
||||||
| `30` | 30 % |
|
<PropOption value="25" label="25 %" />
|
||||||
| `33` | 33 % |
|
<PropOption value="30" label="30 %" />
|
||||||
| `35` | 35 % |
|
<PropOption value="33" label="33 %" />
|
||||||
| `40` | 40 % |
|
<PropOption value="35" label="35 %" />
|
||||||
| `45` | 45 % |
|
<PropOption value="40" label="40 %" />
|
||||||
| `50` | 50 % |
|
<PropOption value="45" label="45 %" />
|
||||||
| `55` | 55 % |
|
<PropOption value="50" label="50 %" />
|
||||||
| `60` | 60 % |
|
<PropOption value="55" label="55 %" />
|
||||||
| `65` | 65 % |
|
<PropOption value="60" label="60 %" />
|
||||||
| `66` | 66 % |
|
<PropOption value="65" label="65 %" />
|
||||||
| `70` | 70 % |
|
<PropOption value="66" label="66 %" />
|
||||||
| `75` | 75 % |
|
<PropOption value="70" label="70 %" />
|
||||||
| `80` | 80 % |
|
<PropOption value="75" label="75 %" />
|
||||||
| `85` | 85 % |
|
<PropOption value="80" label="80 %" />
|
||||||
| `90` | 90 % |
|
<PropOption value="85" label="85 %" />
|
||||||
| `95` | 95 % |
|
<PropOption value="90" label="90 %" />
|
||||||
| `100` | 100 % |
|
<PropOption value="95" label="95 %" />
|
||||||
|
<PropOption value="100" label="100 %" />
|
||||||
|
</PropOptions>
|
||||||
- `xsmall` <small>TEXT</small> _Width (XS)_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="xsmall" label="Width (XS)">
|
||||||
Column width when app width >= 480px
|
<PropDescription>
|
||||||
|
Column width when app width >= 480px
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions>
|
||||||
| `5` | 5 % |
|
<PropOption value="5" label="5 %" />
|
||||||
| `10` | 10 % |
|
<PropOption value="10" label="10 %" />
|
||||||
| `15` | 15 % |
|
<PropOption value="15" label="15 %" />
|
||||||
| `20` | 20 % |
|
<PropOption value="20" label="20 %" />
|
||||||
| `25` | 25 % |
|
<PropOption value="25" label="25 %" />
|
||||||
| `30` | 30 % |
|
<PropOption value="30" label="30 %" />
|
||||||
| `33` | 33 % |
|
<PropOption value="33" label="33 %" />
|
||||||
| `35` | 35 % |
|
<PropOption value="35" label="35 %" />
|
||||||
| `40` | 40 % |
|
<PropOption value="40" label="40 %" />
|
||||||
| `45` | 45 % |
|
<PropOption value="45" label="45 %" />
|
||||||
| `50` | 50 % |
|
<PropOption value="50" label="50 %" />
|
||||||
| `55` | 55 % |
|
<PropOption value="55" label="55 %" />
|
||||||
| `60` | 60 % |
|
<PropOption value="60" label="60 %" />
|
||||||
| `65` | 65 % |
|
<PropOption value="65" label="65 %" />
|
||||||
| `66` | 66 % |
|
<PropOption value="66" label="66 %" />
|
||||||
| `70` | 70 % |
|
<PropOption value="70" label="70 %" />
|
||||||
| `75` | 75 % |
|
<PropOption value="75" label="75 %" />
|
||||||
| `80` | 80 % |
|
<PropOption value="80" label="80 %" />
|
||||||
| `85` | 85 % |
|
<PropOption value="85" label="85 %" />
|
||||||
| `90` | 90 % |
|
<PropOption value="90" label="90 %" />
|
||||||
| `95` | 95 % |
|
<PropOption value="95" label="95 %" />
|
||||||
| `100` | 100 % |
|
<PropOption value="100" label="100 %" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
- `small` <small>TEXT</small> _Width (S)_
|
<PropBlock type="TEXT" name="small" label="Width (S)">
|
||||||
|
<PropDescription>
|
||||||
Column width when app width >= 568px
|
Column width when app width >= 568px
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
<PropOptions>
|
||||||
|--------|-------|
|
<PropOption value="5" label="5 %" />
|
||||||
| `5` | 5 % |
|
<PropOption value="10" label="10 %" />
|
||||||
| `10` | 10 % |
|
<PropOption value="15" label="15 %" />
|
||||||
| `15` | 15 % |
|
<PropOption value="20" label="20 %" />
|
||||||
| `20` | 20 % |
|
<PropOption value="25" label="25 %" />
|
||||||
| `25` | 25 % |
|
<PropOption value="30" label="30 %" />
|
||||||
| `30` | 30 % |
|
<PropOption value="33" label="33 %" />
|
||||||
| `33` | 33 % |
|
<PropOption value="35" label="35 %" />
|
||||||
| `35` | 35 % |
|
<PropOption value="40" label="40 %" />
|
||||||
| `40` | 40 % |
|
<PropOption value="45" label="45 %" />
|
||||||
| `45` | 45 % |
|
<PropOption value="50" label="50 %" />
|
||||||
| `50` | 50 % |
|
<PropOption value="55" label="55 %" />
|
||||||
| `55` | 55 % |
|
<PropOption value="60" label="60 %" />
|
||||||
| `60` | 60 % |
|
<PropOption value="65" label="65 %" />
|
||||||
| `65` | 65 % |
|
<PropOption value="66" label="66 %" />
|
||||||
| `66` | 66 % |
|
<PropOption value="70" label="70 %" />
|
||||||
| `70` | 70 % |
|
<PropOption value="75" label="75 %" />
|
||||||
| `75` | 75 % |
|
<PropOption value="80" label="80 %" />
|
||||||
| `80` | 80 % |
|
<PropOption value="85" label="85 %" />
|
||||||
| `85` | 85 % |
|
<PropOption value="90" label="90 %" />
|
||||||
| `90` | 90 % |
|
<PropOption value="95" label="95 %" />
|
||||||
| `95` | 95 % |
|
<PropOption value="100" label="100 %" />
|
||||||
| `100` | 100 % |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="medium" label="Width (M)">
|
||||||
- `medium` <small>TEXT</small> _Width (M)_
|
<PropDescription>
|
||||||
|
Column width when app width >= 720px
|
||||||
Column width when app width >= 720px
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
| Option | Label |
|
<PropOption value="5" label="5 %" />
|
||||||
|--------|-------|
|
<PropOption value="10" label="10 %" />
|
||||||
| `5` | 5 % |
|
<PropOption value="15" label="15 %" />
|
||||||
| `10` | 10 % |
|
<PropOption value="20" label="20 %" />
|
||||||
| `15` | 15 % |
|
<PropOption value="25" label="25 %" />
|
||||||
| `20` | 20 % |
|
<PropOption value="30" label="30 %" />
|
||||||
| `25` | 25 % |
|
<PropOption value="33" label="33 %" />
|
||||||
| `30` | 30 % |
|
<PropOption value="35" label="35 %" />
|
||||||
| `33` | 33 % |
|
<PropOption value="40" label="40 %" />
|
||||||
| `35` | 35 % |
|
<PropOption value="45" label="45 %" />
|
||||||
| `40` | 40 % |
|
<PropOption value="50" label="50 %" />
|
||||||
| `45` | 45 % |
|
<PropOption value="55" label="55 %" />
|
||||||
| `50` | 50 % |
|
<PropOption value="60" label="60 %" />
|
||||||
| `55` | 55 % |
|
<PropOption value="65" label="65 %" />
|
||||||
| `60` | 60 % |
|
<PropOption value="66" label="66 %" />
|
||||||
| `65` | 65 % |
|
<PropOption value="70" label="70 %" />
|
||||||
| `66` | 66 % |
|
<PropOption value="75" label="75 %" />
|
||||||
| `70` | 70 % |
|
<PropOption value="80" label="80 %" />
|
||||||
| `75` | 75 % |
|
<PropOption value="85" label="85 %" />
|
||||||
| `80` | 80 % |
|
<PropOption value="90" label="90 %" />
|
||||||
| `85` | 85 % |
|
<PropOption value="95" label="95 %" />
|
||||||
| `90` | 90 % |
|
<PropOption value="100" label="100 %" />
|
||||||
| `95` | 95 % |
|
</PropOptions>
|
||||||
| `100` | 100 % |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="large" label="Width (L)">
|
||||||
|
<PropDescription>
|
||||||
- `large` <small>TEXT</small> _Width (L)_
|
Column width when app width >= 1024px
|
||||||
|
</PropDescription>
|
||||||
Column width when app width >= 1024px
|
<PropOptions>
|
||||||
|
<PropOption value="5" label="5 %" />
|
||||||
| Option | Label |
|
<PropOption value="10" label="10 %" />
|
||||||
|--------|-------|
|
<PropOption value="15" label="15 %" />
|
||||||
| `5` | 5 % |
|
<PropOption value="20" label="20 %" />
|
||||||
| `10` | 10 % |
|
<PropOption value="25" label="25 %" />
|
||||||
| `15` | 15 % |
|
<PropOption value="30" label="30 %" />
|
||||||
| `20` | 20 % |
|
<PropOption value="33" label="33 %" />
|
||||||
| `25` | 25 % |
|
<PropOption value="35" label="35 %" />
|
||||||
| `30` | 30 % |
|
<PropOption value="40" label="40 %" />
|
||||||
| `33` | 33 % |
|
<PropOption value="45" label="45 %" />
|
||||||
| `35` | 35 % |
|
<PropOption value="50" label="50 %" />
|
||||||
| `40` | 40 % |
|
<PropOption value="55" label="55 %" />
|
||||||
| `45` | 45 % |
|
<PropOption value="60" label="60 %" />
|
||||||
| `50` | 50 % |
|
<PropOption value="65" label="65 %" />
|
||||||
| `55` | 55 % |
|
<PropOption value="66" label="66 %" />
|
||||||
| `60` | 60 % |
|
<PropOption value="70" label="70 %" />
|
||||||
| `65` | 65 % |
|
<PropOption value="75" label="75 %" />
|
||||||
| `66` | 66 % |
|
<PropOption value="80" label="80 %" />
|
||||||
| `70` | 70 % |
|
<PropOption value="85" label="85 %" />
|
||||||
| `75` | 75 % |
|
<PropOption value="90" label="90 %" />
|
||||||
| `80` | 80 % |
|
<PropOption value="95" label="95 %" />
|
||||||
| `85` | 85 % |
|
<PropOption value="100" label="100 %" />
|
||||||
| `90` | 90 % |
|
</PropOptions>
|
||||||
| `95` | 95 % |
|
</PropBlock>
|
||||||
| `100` | 100 % |
|
<PropBlock type="TEXT" name="xlarge" label="Width (XL)">
|
||||||
|
<PropDescription>
|
||||||
|
Column width when app width >= 1200px
|
||||||
- `xlarge` <small>TEXT</small> _Width (XL)_
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
Column width when app width >= 1200px
|
<PropOption value="5" label="5 %" />
|
||||||
|
<PropOption value="10" label="10 %" />
|
||||||
| Option | Label |
|
<PropOption value="15" label="15 %" />
|
||||||
|--------|-------|
|
<PropOption value="20" label="20 %" />
|
||||||
| `5` | 5 % |
|
<PropOption value="25" label="25 %" />
|
||||||
| `10` | 10 % |
|
<PropOption value="30" label="30 %" />
|
||||||
| `15` | 15 % |
|
<PropOption value="33" label="33 %" />
|
||||||
| `20` | 20 % |
|
<PropOption value="35" label="35 %" />
|
||||||
| `25` | 25 % |
|
<PropOption value="40" label="40 %" />
|
||||||
| `30` | 30 % |
|
<PropOption value="45" label="45 %" />
|
||||||
| `33` | 33 % |
|
<PropOption value="50" label="50 %" />
|
||||||
| `35` | 35 % |
|
<PropOption value="55" label="55 %" />
|
||||||
| `40` | 40 % |
|
<PropOption value="60" label="60 %" />
|
||||||
| `45` | 45 % |
|
<PropOption value="65" label="65 %" />
|
||||||
| `50` | 50 % |
|
<PropOption value="66" label="66 %" />
|
||||||
| `55` | 55 % |
|
<PropOption value="70" label="70 %" />
|
||||||
| `60` | 60 % |
|
<PropOption value="75" label="75 %" />
|
||||||
| `65` | 65 % |
|
<PropOption value="80" label="80 %" />
|
||||||
| `66` | 66 % |
|
<PropOption value="85" label="85 %" />
|
||||||
| `70` | 70 % |
|
<PropOption value="90" label="90 %" />
|
||||||
| `75` | 75 % |
|
<PropOption value="95" label="95 %" />
|
||||||
| `80` | 80 % |
|
<PropOption value="100" label="100 %" />
|
||||||
| `85` | 85 % |
|
</PropOptions>
|
||||||
| `90` | 90 % |
|
</PropBlock>
|
||||||
| `95` | 95 % |
|
</PropGroup>
|
||||||
| `100` | 100 % |
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-grid-col.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-grid-col
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-grid-col
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,77 @@ component: oh-grid-row
|
||||||
label: Layout Grid Row
|
label: Layout Grid Row
|
||||||
description: A row in a grid layout
|
description: A row in a grid layout
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-grid-row.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-grid-row.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-grid-row - Layout Grid Row
|
# oh-grid-row - Layout Grid Row
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A row in a grid layout
|
A row in a grid layout
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-grid-row.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-grid-row
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-grid-row
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,188 +4,279 @@ component: oh-icon
|
||||||
label: Icon
|
label: Icon
|
||||||
description: Display an openHAB icon
|
description: Display an openHAB icon
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-icon.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-icon.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-icon - Icon
|
# oh-icon - Icon
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display an openHAB icon
|
Display an openHAB icon
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `icon` <small>BOOLEAN</small> _Icon_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>
|
<PropBlock type="BOOLEAN" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `width` <small>TEXT</small> _Width_
|
<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>
|
||||||
|
</PropDescription>
|
||||||
- `inputmode` <small>TEXT</small> _Input Mode_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="width" label="Width">
|
||||||
Type of data that might be entered: see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="inputmode" label="Input Mode">
|
||||||
- `placeholder` <small>TEXT</small> _Placeholder_
|
<PropDescription>
|
||||||
|
Type of data that might be entered: see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>
|
||||||
Placeholder text
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `clearButton` <small>BOOLEAN</small> _Clear button_
|
<PropBlock type="TEXT" name="placeholder" label="Placeholder">
|
||||||
|
<PropDescription>
|
||||||
Display input clear button
|
Placeholder text
|
||||||
|
</PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="clearButton" label="Clear button">
|
||||||
Makes input outline
|
<PropDescription>
|
||||||
|
Display input clear button
|
||||||
- `required` <small>BOOLEAN</small> _Required_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Display an error message if left empty
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
- `item` <small>TEXT</small> _Item_
|
Makes input outline
|
||||||
|
</PropDescription>
|
||||||
Link the input value to the state of this item
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="required" label="Required">
|
||||||
- `value` <small>TEXT</small> _Value_
|
<PropDescription>
|
||||||
|
Display an error message if left empty
|
||||||
Value when not found in item state or variable
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
<PropBlock type="TEXT" name="item" label="Item">
|
||||||
|
<PropDescription>
|
||||||
Name of the variable to set when the input changes
|
Link the input value to the state of this item
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="value" label="Value">
|
||||||
|
<PropDescription>
|
||||||
|
Value when not found in item state or variable
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set when the input changes
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-icon.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-icon
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-icon
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,198 +4,289 @@ component: oh-image-card
|
||||||
label: Image Card
|
label: Image Card
|
||||||
description: Display an image (URL or Image item ) in a card
|
description: Display an image (URL or Image item ) in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-image-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-image-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-image-card - Image Card
|
# oh-image-card - Image Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display an image (URL or Image item ) in a card
|
Display an image (URL or Image item ) in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Image
|
### Image
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="image" label="Image">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Image item to show - preferred if the image changes
|
Image item to show - preferred if the image changes
|
||||||
|
</PropDescription>
|
||||||
- `url` <small>TEXT</small> _URL_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="url" label="URL">
|
||||||
URL to show (if item if not specified)
|
<PropDescription>
|
||||||
|
URL to show (if item if not specified)
|
||||||
- `lazy` <small>BOOLEAN</small> _Lazy Load_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Load the image only when in view
|
<PropBlock type="BOOLEAN" name="lazy" label="Lazy Load">
|
||||||
|
<PropDescription>
|
||||||
- `lazyFadeIn` <small>BOOLEAN</small> _Lazy Load Fade-in_
|
Load the image only when in view
|
||||||
|
</PropDescription>
|
||||||
Transition the image with a fade-in effect after it has loaded
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="lazyFadeIn" label="Lazy Load Fade-in">
|
||||||
- `refreshInterval` <small>INTEGER</small> _Refresh Interval_
|
<PropDescription>
|
||||||
|
Transition the image with a fade-in effect after it has loaded
|
||||||
Refresh interval in milliseconds
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="refreshInterval" label="Refresh Interval">
|
||||||
|
<PropDescription>
|
||||||
|
Refresh interval in milliseconds
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the image is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the image is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-image-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-image-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-image-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,170 +4,257 @@ component: oh-image
|
||||||
label: Image
|
label: Image
|
||||||
description: Displays an image from a URL or an item
|
description: Displays an image from a URL or an item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-image.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-image.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-image - Image
|
# oh-image - Image
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Displays an image from a URL or an item
|
Displays an image from a URL or an item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `item` <small>TEXT</small> _Item_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Image item to show - preferred if the image changes
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
- `url` <small>TEXT</small> _URL_
|
Image item to show - preferred if the image changes
|
||||||
|
</PropDescription>
|
||||||
URL to show (if item if not specified)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="url" label="URL">
|
||||||
- `lazy` <small>BOOLEAN</small> _Lazy Load_
|
<PropDescription>
|
||||||
|
URL to show (if item if not specified)
|
||||||
Load the image only when in view
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `lazyFadeIn` <small>BOOLEAN</small> _Lazy Load Fade-in_
|
<PropBlock type="BOOLEAN" name="lazy" label="Lazy Load">
|
||||||
|
<PropDescription>
|
||||||
Transition the image with a fade-in effect after it has loaded
|
Load the image only when in view
|
||||||
|
</PropDescription>
|
||||||
- `refreshInterval` <small>INTEGER</small> _Refresh Interval_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="lazyFadeIn" label="Lazy Load Fade-in">
|
||||||
Refresh interval in milliseconds
|
<PropDescription>
|
||||||
|
Transition the image with a fade-in effect after it has loaded
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="refreshInterval" label="Refresh Interval">
|
||||||
|
<PropDescription>
|
||||||
|
Refresh interval in milliseconds
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-image.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-image
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-image
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,96 +4,180 @@ component: oh-input-card
|
||||||
label: Input Card
|
label: Input Card
|
||||||
description: Display an input in a card
|
description: Display an input in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-input-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-input-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-input-card - Input Card
|
# oh-input-card - Input Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display an input in a card
|
Display an input in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Input
|
### Input
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="input" label="Input">
|
||||||
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
|
Input name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
|
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="inputmode" label="Input Mode">
|
||||||
|
<PropDescription>
|
||||||
|
Type of data that might be entered: see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="placeholder" label="Placeholder">
|
||||||
|
<PropDescription>
|
||||||
|
Placeholder text
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="sendButton" label="Send button">
|
||||||
|
<PropDescription>
|
||||||
|
Display Send button to update the state with a command (needs a configured item)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="clearButton" label="Clear button">
|
||||||
|
<PropDescription>
|
||||||
|
Display input clear button when applicable
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Makes input outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="required" label="Required">
|
||||||
|
<PropDescription>
|
||||||
|
Display an error message if left empty
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="validate" label="Validate">
|
||||||
|
<PropDescription>
|
||||||
|
When enabled, input value will be validated based on input type
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="validate-on-blur" label="Validate on blur">
|
||||||
|
<PropDescription>
|
||||||
|
Only validate when focus moves away from input field
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Link the input value to the state of this item
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="defaultValue" label="Default value">
|
||||||
|
<PropDescription>
|
||||||
|
Default value when not found in item state or variable
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set when the input changes
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `name` <small>TEXT</small> _Name_
|
|
||||||
|
|
||||||
Input name
|
|
||||||
|
|
||||||
- `type` <small>TEXT</small> _Type_
|
|
||||||
|
|
||||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>)
|
|
||||||
|
|
||||||
- `inputmode` <small>TEXT</small> _Input Mode_
|
|
||||||
|
|
||||||
Type of data that might be entered (see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>)
|
|
||||||
|
|
||||||
- `placeholder` <small>TEXT</small> _Placeholder_
|
|
||||||
|
|
||||||
Placeholder text
|
|
||||||
|
|
||||||
- `sendButton` <small>BOOLEAN</small> _Send button_
|
|
||||||
|
|
||||||
Display Send button to update the state with a command (needs a configured item)
|
|
||||||
|
|
||||||
- `clearButton` <small>BOOLEAN</small> _Clear button_
|
|
||||||
|
|
||||||
Display input clear button when applicable
|
|
||||||
|
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
|
||||||
|
|
||||||
Makes input outline
|
|
||||||
|
|
||||||
- `required` <small>BOOLEAN</small> _Required_
|
|
||||||
|
|
||||||
Display an error message if left empty
|
|
||||||
|
|
||||||
- `validate` <small>BOOLEAN</small> _Validate_
|
|
||||||
|
|
||||||
When enabled, input value will be validated based on input type
|
|
||||||
|
|
||||||
- `validate-on-blur` <small>BOOLEAN</small> _Validate on blur_
|
|
||||||
|
|
||||||
Only validate when focus moves away from input field
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Link the input value to the state of this item
|
|
||||||
|
|
||||||
- `defaultValue` <small>TEXT</small> _Default value_
|
|
||||||
|
|
||||||
Default value when not found in item state or variable
|
|
||||||
|
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
Name of the variable to set when the input changes
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-input-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-input-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-input-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,100 +4,185 @@ component: oh-input-item
|
||||||
label: Input List Item
|
label: Input List Item
|
||||||
description: Display an input field in a list
|
description: Display an input field in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-input-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-input-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-input-item - Input List Item
|
# oh-input-item - Input List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display an input field in a list
|
Display an input field in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Input
|
### Input
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="input" label="Input">
|
||||||
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
|
Input name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
|
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="inputmode" label="Input Mode">
|
||||||
|
<PropDescription>
|
||||||
|
Type of data that might be entered: see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="placeholder" label="Placeholder">
|
||||||
|
<PropDescription>
|
||||||
|
Placeholder text
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="sendButton" label="Send button">
|
||||||
|
<PropDescription>
|
||||||
|
Display Send button to update the state with a command (needs a configured item)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="clearButton" label="Clear button">
|
||||||
|
<PropDescription>
|
||||||
|
Display input clear button when applicable
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Makes input outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="required" label="Required">
|
||||||
|
<PropDescription>
|
||||||
|
Display an error message if left empty
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="validate" label="Validate">
|
||||||
|
<PropDescription>
|
||||||
|
When enabled, input value will be validated based on input type
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="validate-on-blur" label="Validate on blur">
|
||||||
|
<PropDescription>
|
||||||
|
Only validate when focus moves away from input field
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Link the input value to the state of this item
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="defaultValue" label="Default value">
|
||||||
|
<PropDescription>
|
||||||
|
Default value when not found in item state or variable
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set when the input changes
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `name` <small>TEXT</small> _Name_
|
|
||||||
|
|
||||||
Input name
|
|
||||||
|
|
||||||
- `type` <small>TEXT</small> _Type_
|
|
||||||
|
|
||||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>)
|
|
||||||
|
|
||||||
- `inputmode` <small>TEXT</small> _Input Mode_
|
|
||||||
|
|
||||||
Type of data that might be entered (see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>)
|
|
||||||
|
|
||||||
- `placeholder` <small>TEXT</small> _Placeholder_
|
|
||||||
|
|
||||||
Placeholder text
|
|
||||||
|
|
||||||
- `sendButton` <small>BOOLEAN</small> _Send button_
|
|
||||||
|
|
||||||
Display Send button to update the state with a command (needs a configured item)
|
|
||||||
|
|
||||||
- `clearButton` <small>BOOLEAN</small> _Clear button_
|
|
||||||
|
|
||||||
Display input clear button when applicable
|
|
||||||
|
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
|
||||||
|
|
||||||
Makes input outline
|
|
||||||
|
|
||||||
- `required` <small>BOOLEAN</small> _Required_
|
|
||||||
|
|
||||||
Display an error message if left empty
|
|
||||||
|
|
||||||
- `validate` <small>BOOLEAN</small> _Validate_
|
|
||||||
|
|
||||||
When enabled, input value will be validated based on input type
|
|
||||||
|
|
||||||
- `validate-on-blur` <small>BOOLEAN</small> _Validate on blur_
|
|
||||||
|
|
||||||
Only validate when focus moves away from input field
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Link the input value to the state of this item
|
|
||||||
|
|
||||||
- `defaultValue` <small>TEXT</small> _Default value_
|
|
||||||
|
|
||||||
Default value when not found in item state or variable
|
|
||||||
|
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
Name of the variable to set when the input changes
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-input-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-input-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-input-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,68 +4,148 @@ component: oh-input
|
||||||
label: Input
|
label: Input
|
||||||
description: Displays an input field, used to set a variable
|
description: Displays an input field, used to set a variable
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-input.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-input.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-input - Input
|
# oh-input - Input
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Displays an input field, used to set a variable
|
Displays an input field, used to set a variable
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
|
Input name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
|
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="inputmode" label="Input Mode">
|
||||||
|
<PropDescription>
|
||||||
|
Type of data that might be entered: see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="placeholder" label="Placeholder">
|
||||||
|
<PropDescription>
|
||||||
|
Placeholder text
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="sendButton" label="Send button">
|
||||||
|
<PropDescription>
|
||||||
|
Display Send button to update the state with a command (needs a configured item)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="clearButton" label="Clear button">
|
||||||
|
<PropDescription>
|
||||||
|
Display input clear button when applicable
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Makes input outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="required" label="Required">
|
||||||
|
<PropDescription>
|
||||||
|
Display an error message if left empty
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="validate" label="Validate">
|
||||||
|
<PropDescription>
|
||||||
|
When enabled, input value will be validated based on input type
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="validate-on-blur" label="Validate on blur">
|
||||||
|
<PropDescription>
|
||||||
|
Only validate when focus moves away from input field
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Link the input value to the state of this item
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="defaultValue" label="Default value">
|
||||||
|
<PropDescription>
|
||||||
|
Default value when not found in item state or variable
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set when the input changes
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `name` <small>TEXT</small> _Name_
|
|
||||||
|
|
||||||
Input name
|
|
||||||
|
|
||||||
- `type` <small>TEXT</small> _Type_
|
|
||||||
|
|
||||||
Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>)
|
|
||||||
|
|
||||||
- `inputmode` <small>TEXT</small> _Input Mode_
|
|
||||||
|
|
||||||
Type of data that might be entered (see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>)
|
|
||||||
|
|
||||||
- `placeholder` <small>TEXT</small> _Placeholder_
|
|
||||||
|
|
||||||
Placeholder text
|
|
||||||
|
|
||||||
- `sendButton` <small>BOOLEAN</small> _Send button_
|
|
||||||
|
|
||||||
Display Send button to update the state with a command (needs a configured item)
|
|
||||||
|
|
||||||
- `clearButton` <small>BOOLEAN</small> _Clear button_
|
|
||||||
|
|
||||||
Display input clear button when applicable
|
|
||||||
|
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
|
||||||
|
|
||||||
Makes input outline
|
|
||||||
|
|
||||||
- `required` <small>BOOLEAN</small> _Required_
|
|
||||||
|
|
||||||
Display an error message if left empty
|
|
||||||
|
|
||||||
- `validate` <small>BOOLEAN</small> _Validate_
|
|
||||||
|
|
||||||
When enabled, input value will be validated based on input type
|
|
||||||
|
|
||||||
- `validate-on-blur` <small>BOOLEAN</small> _Validate on blur_
|
|
||||||
|
|
||||||
Only validate when focus moves away from input field
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Link the input value to the state of this item
|
|
||||||
|
|
||||||
- `defaultValue` <small>TEXT</small> _Default value_
|
|
||||||
|
|
||||||
Default value when not found in item state or variable
|
|
||||||
|
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
Name of the variable to set when the input changes
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-input.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-input
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-input
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,90 +4,171 @@ component: oh-knob-card
|
||||||
label: Knob Card
|
label: Knob Card
|
||||||
description: Display a knob in a card to visualize and control a quantifiable item
|
description: Display a knob in a card to visualize and control a quantifiable item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-knob-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-knob-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-knob-card - Knob Card
|
# oh-knob-card - Knob Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a knob in a card to visualize and control a quantifiable item
|
Display a knob in a card to visualize and control a quantifiable item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Knob
|
### Knob
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="knob" label="Knob">
|
||||||
|
Parameters are passed to the underlying <a target="_blank" class="external text-color-blue" href="https://github.com/kramer99/vue-knob-control#properties">Knob control</a>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value (default 0)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value (default 100)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="stepSize" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values (default 1)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="disabled" label="Disabled">
|
||||||
|
<PropDescription>
|
||||||
|
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="size" label="Size">
|
||||||
|
<PropDescription>
|
||||||
|
Visual size of the control in px (or % if responsive is true)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="primaryColor" label="Primary Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the value arc (HTML value, default #409eff)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="secondaryColor" label="Secondary Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the rest of the control (HTML value, default #dcdfe6)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="textColor" label="Text Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the value text (HTML value, default #000000)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="strokeWidth" label="Stroke Width">
|
||||||
|
<PropDescription>
|
||||||
|
Thickness of the arcs, default 17
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="responsive" label="Responsive">
|
||||||
|
<PropDescription>
|
||||||
|
Size the control using percentages instead of pixels
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Parameters are passed to the underlying <a target="_blank" class="external text-color-blue" href="https://github.com/kramer99/vue-knob-control#properties">Knob control</a>
|
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>INTEGER</small> _Min_
|
|
||||||
|
|
||||||
Minimum value (default 0)
|
|
||||||
|
|
||||||
- `max` <small>INTEGER</small> _Max_
|
|
||||||
|
|
||||||
Maximum value (default 100)
|
|
||||||
|
|
||||||
- `stepSize` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values (default 1)
|
|
||||||
|
|
||||||
- `disabled` <small>BOOLEAN</small> _Disabled_
|
|
||||||
|
|
||||||
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
|
|
||||||
|
|
||||||
- `size` <small>INTEGER</small> _Size_
|
|
||||||
|
|
||||||
Visual size of the control in px (or % if responsive is true)
|
|
||||||
|
|
||||||
- `primaryColor` <small>TEXT</small> _Primary Color_
|
|
||||||
|
|
||||||
Color of the value arc (HTML value, default #409eff)
|
|
||||||
|
|
||||||
- `secondaryColor` <small>TEXT</small> _Secondary Color_
|
|
||||||
|
|
||||||
Color of the rest of the control (HTML value, default #dcdfe6)
|
|
||||||
|
|
||||||
- `textColor` <small>TEXT</small> _Text Color_
|
|
||||||
|
|
||||||
Color of the value text (HTML value, default #000000)
|
|
||||||
|
|
||||||
- `strokeWidth` <small>TEXT</small> _Stroke Width_
|
|
||||||
|
|
||||||
Thickness of the arcs, default 17
|
|
||||||
|
|
||||||
- `responsive` <small>BOOLEAN</small> _Responsive_
|
|
||||||
|
|
||||||
Size the control using percentages instead of pixels
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-knob-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-knob-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-knob-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,230 +4,329 @@ component: oh-knob-cell
|
||||||
label: Knob Cell
|
label: Knob Cell
|
||||||
description: A cell expanding to a knob control
|
description: A cell expanding to a knob control
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-knob-cell.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-knob-cell.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-knob-cell - Knob Cell
|
# oh-knob-cell - Knob Cell
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A cell expanding to a knob control
|
A cell expanding to a knob control
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Cell
|
### Cell
|
||||||
|
<div class="props">
|
||||||
General settings of the cell
|
<PropGroup name="cell" label="Cell">
|
||||||
|
General settings of the cell
|
||||||
|
<PropBlock type="TEXT" name="header" label="Header">
|
||||||
- `header` <small>TEXT</small> _Header_
|
<PropDescription>
|
||||||
|
Header of the cell
|
||||||
Header of the cell
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
Title of the cell
|
Title of the cell
|
||||||
|
</PropDescription>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
Subtitle of the cell
|
<PropDescription>
|
||||||
|
Subtitle of the cell
|
||||||
- `footer` <small>TEXT</small> _Footer_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Footer of the cell
|
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||||
|
<PropDescription>
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
Footer of the cell
|
||||||
|
</PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
- `color` <small>TEXT</small> _Highlight Color_
|
<PropDescription>
|
||||||
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
Color to use when highlighted
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `on` <small>TEXT</small> _"On" expression_
|
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||||
|
<PropDescription>
|
||||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
Color to use when highlighted
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="on" label=""On" expression">
|
||||||
|
<PropDescription>
|
||||||
|
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Knob
|
### Knob
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="knob" label="Knob">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to control
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
- `min` <small>INTEGER</small> _Min_
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="min" label="Min">
|
||||||
Minimum value (default 0)
|
<PropDescription>
|
||||||
|
Minimum value (default 0)
|
||||||
- `max` <small>INTEGER</small> _Max_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Maximum value (default 100)
|
<PropBlock type="INTEGER" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
- `stepSize` <small>DECIMAL</small> _Step_
|
Maximum value (default 100)
|
||||||
|
</PropDescription>
|
||||||
Minimum interval between values (default 1)
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="stepSize" label="Step">
|
||||||
- `disabled` <small>BOOLEAN</small> _Disabled_
|
<PropDescription>
|
||||||
|
Minimum interval between values (default 1)
|
||||||
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `size` <small>INTEGER</small> _Size_
|
<PropBlock type="BOOLEAN" name="disabled" label="Disabled">
|
||||||
|
<PropDescription>
|
||||||
Visual size of the control in px (or % if responsive is true)
|
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
|
||||||
|
</PropDescription>
|
||||||
- `primaryColor` <small>TEXT</small> _Primary Color_
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="size" label="Size">
|
||||||
Color of the value arc (HTML value, default #409eff)
|
<PropDescription>
|
||||||
|
Visual size of the control in px (or % if responsive is true)
|
||||||
- `secondaryColor` <small>TEXT</small> _Secondary Color_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Color of the rest of the control (HTML value, default #dcdfe6)
|
<PropBlock type="TEXT" name="primaryColor" label="Primary Color">
|
||||||
|
<PropDescription>
|
||||||
- `textColor` <small>TEXT</small> _Text Color_
|
Color of the value arc (HTML value, default #409eff)
|
||||||
|
</PropDescription>
|
||||||
Color of the value text (HTML value, default #000000)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="secondaryColor" label="Secondary Color">
|
||||||
- `strokeWidth` <small>TEXT</small> _Stroke Width_
|
<PropDescription>
|
||||||
|
Color of the rest of the control (HTML value, default #dcdfe6)
|
||||||
Thickness of the arcs, default 17
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `responsive` <small>BOOLEAN</small> _Responsive_
|
<PropBlock type="TEXT" name="textColor" label="Text Color">
|
||||||
|
<PropDescription>
|
||||||
Size the control using percentages instead of pixels
|
Color of the value text (HTML value, default #000000)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="strokeWidth" label="Stroke Width">
|
||||||
|
<PropDescription>
|
||||||
|
Thickness of the arcs, default 17
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="responsive" label="Responsive">
|
||||||
|
<PropDescription>
|
||||||
|
Size the control using percentages instead of pixels
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-knob-cell.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-knob-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-knob-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,64 +4,143 @@ component: oh-knob
|
||||||
label: Knob
|
label: Knob
|
||||||
description: Knob control, allow to change a number value on a circular track
|
description: Knob control, allow to change a number value on a circular track
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-knob.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-knob.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-knob - Knob
|
# oh-knob - Knob
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Knob control, allow to change a number value on a circular track
|
Knob control, allow to change a number value on a circular track
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value (default 0)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value (default 100)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="stepSize" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values (default 1)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="disabled" label="Disabled">
|
||||||
|
<PropDescription>
|
||||||
|
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="size" label="Size">
|
||||||
|
<PropDescription>
|
||||||
|
Visual size of the control in px (or % if responsive is true)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="primaryColor" label="Primary Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the value arc (HTML value, default #409eff)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="secondaryColor" label="Secondary Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the rest of the control (HTML value, default #dcdfe6)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="textColor" label="Text Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the value text (HTML value, default #000000)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="strokeWidth" label="Stroke Width">
|
||||||
|
<PropDescription>
|
||||||
|
Thickness of the arcs, default 17
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="responsive" label="Responsive">
|
||||||
|
<PropDescription>
|
||||||
|
Size the control using percentages instead of pixels
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set on input change
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>INTEGER</small> _Min_
|
|
||||||
|
|
||||||
Minimum value (default 0)
|
|
||||||
|
|
||||||
- `max` <small>INTEGER</small> _Max_
|
|
||||||
|
|
||||||
Maximum value (default 100)
|
|
||||||
|
|
||||||
- `stepSize` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values (default 1)
|
|
||||||
|
|
||||||
- `disabled` <small>BOOLEAN</small> _Disabled_
|
|
||||||
|
|
||||||
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
|
|
||||||
|
|
||||||
- `size` <small>INTEGER</small> _Size_
|
|
||||||
|
|
||||||
Visual size of the control in px (or % if responsive is true)
|
|
||||||
|
|
||||||
- `primaryColor` <small>TEXT</small> _Primary Color_
|
|
||||||
|
|
||||||
Color of the value arc (HTML value, default #409eff)
|
|
||||||
|
|
||||||
- `secondaryColor` <small>TEXT</small> _Secondary Color_
|
|
||||||
|
|
||||||
Color of the rest of the control (HTML value, default #dcdfe6)
|
|
||||||
|
|
||||||
- `textColor` <small>TEXT</small> _Text Color_
|
|
||||||
|
|
||||||
Color of the value text (HTML value, default #000000)
|
|
||||||
|
|
||||||
- `strokeWidth` <small>TEXT</small> _Stroke Width_
|
|
||||||
|
|
||||||
Thickness of the arcs, default 17
|
|
||||||
|
|
||||||
- `responsive` <small>BOOLEAN</small> _Responsive_
|
|
||||||
|
|
||||||
Size the control using percentages instead of pixels
|
|
||||||
|
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
Name of the variable to set on input change
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-knob.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-knob
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-knob
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,241 +4,342 @@ component: oh-label-card
|
||||||
label: Label Card
|
label: Label Card
|
||||||
description: Display the state of an item in a card
|
description: Display the state of an item in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-label-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-label-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-label-card - Label Card
|
# oh-label-card - Label Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display the state of an item in a card
|
Display the state of an item in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
Action to perform when the element is clicked
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
- `action` <small>TEXT</small> _Action_
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
Type of action to perform
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
| Option | Label |
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|--------|-------|
|
<PropOption value="command" label="Send command" />
|
||||||
| `navigate` | Navigate to page |
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
| `command` | Send command |
|
<PropOption value="options" label="Command options" />
|
||||||
| `toggle` | Toggle item |
|
<PropOption value="rule" label="Run rule" />
|
||||||
| `options` | Command options |
|
<PropOption value="popup" label="Open popup" />
|
||||||
| `rule` | Run rule |
|
<PropOption value="popover" label="Open popover" />
|
||||||
| `popup` | Open popup |
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
| `popover` | Open popover |
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
| `sheet` | Open sheet |
|
<PropOption value="group" label="Group details" />
|
||||||
| `photos` | Open photo browser |
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
| `group` | Group details |
|
<PropOption value="url" label="External URL" />
|
||||||
| `analyzer` | Analyze item(s) |
|
<PropOption value="variable" label="Set Variable" />
|
||||||
| `url` | External URL |
|
</PropOptions>
|
||||||
| `variable` | Set Variable |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
URL to navigate to
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to perform the action on
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
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
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
- `actionOptions` <small>TEXT</small> _Command Options_
|
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
|
||||||
|
</PropDescription>
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
Rule to run
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
Page to navigate to
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `f7-circle` | Circle |
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
| `f7-cover` | Cover |
|
<PropDescription>
|
||||||
| `f7-cover-v` | Cover from bottom |
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
| `f7-dive` | Dive |
|
</PropDescription>
|
||||||
| `f7-fade` | Fade |
|
<PropOptions>
|
||||||
| `f7-flip` | Flip |
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
| `f7-parallax` | Parallax |
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
| `f7-push` | Push |
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
- `actionModal` <small>TEXT</small> _Modal Page or Widget_
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
Page or widget to display in the modal
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
Configuration (prop values) for the target modal page or widget
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
Group item whose members to show in a popup
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
Start analyzing with the specified (set of) item(s)
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `(empty)` | Dynamic |
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
| `day` | Day |
|
<PropDescription>
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
Start analyzing with the specified (set of) item(s)
|
||||||
| `month` | Month |
|
</PropDescription>
|
||||||
| `year` | Year |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
| Option | Label |
|
<PropOption value="day" label="Day" />
|
||||||
|--------|-------|
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
| `time` | Time |
|
<PropOption value="month" label="Month" />
|
||||||
| `aggregate` | Aggregate |
|
<PropOption value="year" label="Year" />
|
||||||
| `calendar` | Calendar |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
The variable name to set
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
The value to set the variable to
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Label
|
### Label
|
||||||
|
<div class="props">
|
||||||
Parameters of the label
|
<PropGroup name="label" label="Label">
|
||||||
|
Parameters of the label
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropDescription>
|
||||||
|
Item to display
|
||||||
Item to display
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `label` <small>TEXT</small> _Label_
|
<PropBlock type="TEXT" name="label" label="Label">
|
||||||
|
<PropDescription>
|
||||||
Display this text (or expression result) instead of the item's state
|
Display this text (or expression result) instead of the item's state
|
||||||
|
</PropDescription>
|
||||||
- `background` <small>TEXT</small> _Background style_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="background" label="Background style">
|
||||||
Background style (in CSS "background" attribute format)
|
<PropDescription>
|
||||||
|
Background style (in CSS "background" attribute format)
|
||||||
- `fontSize` <small>TEXT</small> _Font Size_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Font size (e.g. "34px")
|
<PropBlock type="TEXT" name="fontSize" label="Font Size">
|
||||||
|
<PropDescription>
|
||||||
- `fontWeight` <small>TEXT</small> _Font Weight_
|
Font size (e.g. "34px")
|
||||||
|
</PropDescription>
|
||||||
Font weight (e.g. "normal" or "bold")
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="fontWeight" label="Font Weight">
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
<PropDescription>
|
||||||
|
Font weight (e.g. "normal" or "bold")
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
Not applicable to openHAB icons
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
- `iconSize` <small>INTEGER</small> _Icon Size_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
Size of the icon in px
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
|
||||||
|
<PropDescription>
|
||||||
- `vertical` <small>BOOLEAN</small> _Vertical arrangement_
|
Size of the icon in px
|
||||||
|
</PropDescription>
|
||||||
Display label below icon
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="vertical" label="Vertical arrangement">
|
||||||
|
<PropDescription>
|
||||||
|
Display label below icon
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Trend Line
|
### Trend Line
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="trend" label="Trend Line">
|
||||||
|
Show a trend line in the background
|
||||||
|
<PropBlock type="TEXT" name="trendItem" label="Trend Line Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to show as a trend line in the background
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendStrokeWidth" label="Trend Stroke Width">
|
||||||
|
<PropDescription>
|
||||||
|
Thickness of the trend line
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendWidth" label="Trend Line Width">
|
||||||
|
<PropDescription>
|
||||||
|
Width of the trend line (leave blank to set automatically)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendGradient" label="Trend Line Gradient">
|
||||||
|
<PropDescription>
|
||||||
|
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Show a trend line in the background
|
|
||||||
|
|
||||||
|
|
||||||
- `trendItem` <small>TEXT</small> _Trend Line Item_
|
|
||||||
|
|
||||||
Item to show as a trend line in the background
|
|
||||||
|
|
||||||
- `trendStrokeWidth` <small>TEXT</small> _Trend Stroke Width_
|
|
||||||
|
|
||||||
Thickness of the trend line
|
|
||||||
|
|
||||||
- `trendWidth` <small>TEXT</small> _Trend Line Width_
|
|
||||||
|
|
||||||
Width of the trend line (leave blank to set automatically)
|
|
||||||
|
|
||||||
- `trendGradient` <small>TEXT</small> _Trend Line Gradient_
|
|
||||||
|
|
||||||
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-label-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-label-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-label-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,215 +4,311 @@ component: oh-label-cell
|
||||||
label: Label Cell
|
label: Label Cell
|
||||||
description: A cell with a big label to show a short item state value
|
description: A cell with a big label to show a short item state value
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-label-cell.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-label-cell.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-label-cell - Label Cell
|
# oh-label-cell - Label Cell
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A cell with a big label to show a short item state value
|
A cell with a big label to show a short item state value
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Cell
|
### Cell
|
||||||
|
<div class="props">
|
||||||
General settings of the cell
|
<PropGroup name="cell" label="Cell">
|
||||||
|
General settings of the cell
|
||||||
|
<PropBlock type="TEXT" name="header" label="Header">
|
||||||
- `header` <small>TEXT</small> _Header_
|
<PropDescription>
|
||||||
|
Header of the cell
|
||||||
Header of the cell
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
Title of the cell
|
Title of the cell
|
||||||
|
</PropDescription>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
Subtitle of the cell
|
<PropDescription>
|
||||||
|
Subtitle of the cell
|
||||||
- `footer` <small>TEXT</small> _Footer_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Footer of the cell
|
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||||
|
<PropDescription>
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
Footer of the cell
|
||||||
|
</PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
- `color` <small>TEXT</small> _Highlight Color_
|
<PropDescription>
|
||||||
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
Color to use when highlighted
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `on` <small>TEXT</small> _"On" expression_
|
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||||
|
<PropDescription>
|
||||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
Color to use when highlighted
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="on" label=""On" expression">
|
||||||
|
<PropDescription>
|
||||||
|
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Label
|
### Label
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="label" label="Label">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to display
|
Item to display
|
||||||
|
</PropDescription>
|
||||||
- `label` <small>TEXT</small> _Label_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="label" label="Label">
|
||||||
Display this text (or expression result) instead of the item's state
|
<PropDescription>
|
||||||
|
Display this text (or expression result) instead of the item's state
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
Action to perform when the element is clicked
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
- `action` <small>TEXT</small> _Action_
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
Type of action to perform
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
| Option | Label |
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|--------|-------|
|
<PropOption value="command" label="Send command" />
|
||||||
| `navigate` | Navigate to page |
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
| `command` | Send command |
|
<PropOption value="options" label="Command options" />
|
||||||
| `toggle` | Toggle item |
|
<PropOption value="rule" label="Run rule" />
|
||||||
| `options` | Command options |
|
<PropOption value="popup" label="Open popup" />
|
||||||
| `rule` | Run rule |
|
<PropOption value="popover" label="Open popover" />
|
||||||
| `popup` | Open popup |
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
| `popover` | Open popover |
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
| `sheet` | Open sheet |
|
<PropOption value="group" label="Group details" />
|
||||||
| `photos` | Open photo browser |
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
| `group` | Group details |
|
<PropOption value="url" label="External URL" />
|
||||||
| `analyzer` | Analyze item(s) |
|
<PropOption value="variable" label="Set Variable" />
|
||||||
| `url` | External URL |
|
</PropOptions>
|
||||||
| `variable` | Set Variable |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
URL to navigate to
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to perform the action on
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
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
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
- `actionOptions` <small>TEXT</small> _Command Options_
|
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
|
||||||
|
</PropDescription>
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
Rule to run
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
Page to navigate to
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `f7-circle` | Circle |
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
| `f7-cover` | Cover |
|
<PropDescription>
|
||||||
| `f7-cover-v` | Cover from bottom |
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
| `f7-dive` | Dive |
|
</PropDescription>
|
||||||
| `f7-fade` | Fade |
|
<PropOptions>
|
||||||
| `f7-flip` | Flip |
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
| `f7-parallax` | Parallax |
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
| `f7-push` | Push |
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
- `actionModal` <small>TEXT</small> _Modal Page or Widget_
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
Page or widget to display in the modal
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
Configuration (prop values) for the target modal page or widget
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
Group item whose members to show in a popup
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
Start analyzing with the specified (set of) item(s)
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `(empty)` | Dynamic |
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
| `day` | Day |
|
<PropDescription>
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
Start analyzing with the specified (set of) item(s)
|
||||||
| `month` | Month |
|
</PropDescription>
|
||||||
| `year` | Year |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
| Option | Label |
|
<PropOption value="day" label="Day" />
|
||||||
|--------|-------|
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
| `time` | Time |
|
<PropOption value="month" label="Month" />
|
||||||
| `aggregate` | Aggregate |
|
<PropOption value="year" label="Year" />
|
||||||
| `calendar` | Calendar |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
The variable name to set
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
The value to set the variable to
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Trend Line
|
### Trend Line
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="trend" label="Trend Line">
|
||||||
|
Trend Line Background Options
|
||||||
|
<PropBlock type="TEXT" name="trendItem" label="Trend Line Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to show as a trend line in the background
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendStrokeWidth" label="Trend Stroke Width">
|
||||||
|
<PropDescription>
|
||||||
|
Thickness of the trend line
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendWidth" label="Trend Line Width">
|
||||||
|
<PropDescription>
|
||||||
|
Width of the trend line (leave blank to set automatically)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendGradient" label="Trend Line Gradient">
|
||||||
|
<PropDescription>
|
||||||
|
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Trend Line Background Options
|
|
||||||
|
|
||||||
|
|
||||||
- `trendItem` <small>TEXT</small> _Trend Line Item_
|
|
||||||
|
|
||||||
Item to show as a trend line in the background
|
|
||||||
|
|
||||||
- `trendStrokeWidth` <small>TEXT</small> _Trend Stroke Width_
|
|
||||||
|
|
||||||
Thickness of the trend line
|
|
||||||
|
|
||||||
- `trendWidth` <small>TEXT</small> _Trend Line Width_
|
|
||||||
|
|
||||||
Width of the trend line (leave blank to set automatically)
|
|
||||||
|
|
||||||
- `trendGradient` <small>TEXT</small> _Trend Line Gradient_
|
|
||||||
|
|
||||||
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-label-cell.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-label-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-label-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,183 +4,274 @@ component: oh-label-item
|
||||||
label: Label List Item
|
label: Label List Item
|
||||||
description: Display the state of an item in a list
|
description: Display the state of an item in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-label-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-label-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-label-item - Label List Item
|
# oh-label-item - Label List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display the state of an item in a list
|
Display the state of an item in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `item` <small>TEXT</small> _Item_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Item to display
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to display
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-label-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-label-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-label-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,190 +4,282 @@ component: oh-link
|
||||||
label: Link
|
label: Link
|
||||||
description: Link performing an action
|
description: Link performing an action
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-link.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-link.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-link - Link
|
# oh-link - Link
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Link performing an action
|
Link performing an action
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `text` <small>TEXT</small> _Text_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Link label
|
<PropBlock type="TEXT" name="text" label="Text">
|
||||||
|
<PropDescription>
|
||||||
- `iconF7` <small>TEXT</small> _Icon_
|
Link label
|
||||||
|
</PropDescription>
|
||||||
Framework7 icon to display (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconF7" label="Icon">
|
||||||
- `iconMaterial` <small>TEXT</small> _Icon_
|
<PropDescription>
|
||||||
|
Framework7 icon to display (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
Material design icon to display
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
<PropBlock type="TEXT" name="iconMaterial" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
Color of the icon
|
Material design icon to display
|
||||||
|
</PropDescription>
|
||||||
- `iconSize` <small>INTEGER</small> _Icon Size_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
Size of the icon in px
|
<PropDescription>
|
||||||
|
Color of the icon
|
||||||
- `badge` <small>TEXT</small> _Badge_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Text to display in a badge on the opposite side of the item (set either this or "after")
|
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
|
||||||
|
<PropDescription>
|
||||||
- `badgeColor` <small>TEXT</small> _Badge color_
|
Size of the icon in px
|
||||||
|
</PropDescription>
|
||||||
Color of the badge
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="badge" label="Badge">
|
||||||
- `tooltip` <small>TEXT</small> _Tooltip_
|
<PropDescription>
|
||||||
|
Text to display in a badge on the opposite side of the item (set either this or "after")
|
||||||
Button tooltip text to show on button hover/press
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
<PropBlock type="TEXT" name="badgeColor" label="Badge color">
|
||||||
|
<PropDescription>
|
||||||
Name of the variable to set on input change
|
Color of the badge
|
||||||
|
</PropDescription>
|
||||||
- `clearVariable` <small>BOOLEAN</small> _Clear Variable After Action_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="tooltip" label="Tooltip">
|
||||||
Name of the variable to clear after performing the action
|
<PropDescription>
|
||||||
|
Button tooltip text to show on button hover/press
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set on input change
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="clearVariable" label="Clear Variable After Action">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to clear after performing the action
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-link.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-link
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-link
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,56 +4,130 @@ component: oh-list-card
|
||||||
label: List Card
|
label: List Card
|
||||||
description: Display a list in a card
|
description: Display a list in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-list-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-list-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-list-card - List Card
|
# oh-list-card - List Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a list in a card
|
Display a list in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### List
|
### List
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="list" label="List">
|
||||||
|
<PropBlock type="BOOLEAN" name="simpleList" label="Simple List">
|
||||||
|
<PropDescription>
|
||||||
|
Use for simple lists
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="mediaList" label="Media List">
|
||||||
|
<PropDescription>
|
||||||
|
Use for list with rich list items with icons
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="accordionList" label="Accordion List">
|
||||||
|
<PropDescription>
|
||||||
|
Use for lists with accordion (collapsible) items
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `simpleList` <small>BOOLEAN</small> _Simple List_
|
|
||||||
|
|
||||||
Use for simple lists
|
|
||||||
|
|
||||||
- `mediaList` <small>BOOLEAN</small> _Media List_
|
|
||||||
|
|
||||||
Use for list with rich list items with icons
|
|
||||||
|
|
||||||
- `accordionList` <small>BOOLEAN</small> _Accordion List_
|
|
||||||
|
|
||||||
Use for lists with accordion (collapsible) items
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-list-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-list-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-list-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,201 +4,295 @@ component: oh-list-item
|
||||||
label: List Item
|
label: List Item
|
||||||
description: A list item
|
description: A list item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-list-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-list-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-list-item - List Item
|
# oh-list-item - List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A list item
|
A list item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
Action to perform when the element is clicked
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
- `action` <small>TEXT</small> _Action_
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
Type of action to perform
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
| Option | Label |
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|--------|-------|
|
<PropOption value="command" label="Send command" />
|
||||||
| `navigate` | Navigate to page |
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
| `command` | Send command |
|
<PropOption value="options" label="Command options" />
|
||||||
| `toggle` | Toggle item |
|
<PropOption value="rule" label="Run rule" />
|
||||||
| `options` | Command options |
|
<PropOption value="popup" label="Open popup" />
|
||||||
| `rule` | Run rule |
|
<PropOption value="popover" label="Open popover" />
|
||||||
| `popup` | Open popup |
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
| `popover` | Open popover |
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
| `sheet` | Open sheet |
|
<PropOption value="group" label="Group details" />
|
||||||
| `photos` | Open photo browser |
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
| `group` | Group details |
|
<PropOption value="url" label="External URL" />
|
||||||
| `analyzer` | Analyze item(s) |
|
<PropOption value="variable" label="Set Variable" />
|
||||||
| `url` | External URL |
|
</PropOptions>
|
||||||
| `variable` | Set Variable |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
URL to navigate to
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to perform the action on
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
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
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
- `actionOptions` <small>TEXT</small> _Command Options_
|
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
|
||||||
|
</PropDescription>
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
Rule to run
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
Page to navigate to
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `f7-circle` | Circle |
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
| `f7-cover` | Cover |
|
<PropDescription>
|
||||||
| `f7-cover-v` | Cover from bottom |
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
| `f7-dive` | Dive |
|
</PropDescription>
|
||||||
| `f7-fade` | Fade |
|
<PropOptions>
|
||||||
| `f7-flip` | Flip |
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
| `f7-parallax` | Parallax |
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
| `f7-push` | Push |
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
- `actionModal` <small>TEXT</small> _Modal Page or Widget_
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
Page or widget to display in the modal
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
Configuration (prop values) for the target modal page or widget
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
Group item whose members to show in a popup
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
Start analyzing with the specified (set of) item(s)
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `(empty)` | Dynamic |
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
| `day` | Day |
|
<PropDescription>
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
Start analyzing with the specified (set of) item(s)
|
||||||
| `month` | Month |
|
</PropDescription>
|
||||||
| `year` | Year |
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
| Option | Label |
|
<PropOption value="day" label="Day" />
|
||||||
|--------|-------|
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
| `time` | Time |
|
<PropOption value="month" label="Month" />
|
||||||
| `aggregate` | Aggregate |
|
<PropOption value="year" label="Year" />
|
||||||
| `calendar` | Calendar |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
The variable name to set
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
The value to set the variable to
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Badge
|
### Badge
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="badge" label="Badge">
|
||||||
- `badge` <small>TEXT</small> _Badge_
|
<PropBlock type="TEXT" name="badge" label="Badge">
|
||||||
|
<PropDescription>
|
||||||
Text to display in a badge on the opposite side of the item (set either this or "after")
|
Text to display in a badge on the opposite side of the item (set either this or "after")
|
||||||
|
</PropDescription>
|
||||||
- `badgeColor` <small>TEXT</small> _Badge color_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="badgeColor" label="Badge color">
|
||||||
Color of the badge
|
<PropDescription>
|
||||||
|
Color of the badge
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### List Button Settings
|
### List Button Settings
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="listButton" label="List Button Settings">
|
||||||
|
<PropBlock type="BOOLEAN" name="listButton" label="List Button">
|
||||||
|
<PropDescription>
|
||||||
|
This item will be styled as a list button (clickable link). All other options except title and color will be ignored.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="listButtonColor" label="List Button Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color (for list buttons)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `listButton` <small>BOOLEAN</small> _List Button_
|
|
||||||
|
|
||||||
This item will be styled as a list button (clickable link). All other options except title and color will be ignored.
|
|
||||||
|
|
||||||
- `listButtonColor` <small>TEXT</small> _List Button Color_
|
|
||||||
|
|
||||||
Color (for list buttons)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-list-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-list-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-list-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,98 @@ component: oh-list
|
||||||
label: List
|
label: List
|
||||||
description: List control, hosts list items
|
description: List control, hosts list items
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-list.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-list.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-list - List
|
# oh-list - List
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
List control, hosts list items
|
List control, hosts list items
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="BOOLEAN" name="simpleList" label="Simple List">
|
||||||
|
<PropDescription>
|
||||||
|
Use for simple lists
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="mediaList" label="Media List">
|
||||||
|
<PropDescription>
|
||||||
|
Use for list with rich list items with icons
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="accordionList" label="Accordion List">
|
||||||
|
<PropDescription>
|
||||||
|
Use for lists with accordion (collapsible) items
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `simpleList` <small>BOOLEAN</small> _Simple List_
|
|
||||||
|
|
||||||
Use for simple lists
|
|
||||||
|
|
||||||
- `mediaList` <small>BOOLEAN</small> _Media List_
|
|
||||||
|
|
||||||
Use for list with rich list items with icons
|
|
||||||
|
|
||||||
- `accordionList` <small>BOOLEAN</small> _Accordion List_
|
|
||||||
|
|
||||||
Use for lists with accordion (collapsible) items
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-list.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-list
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-list
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,90 +4,157 @@ component: oh-location-card
|
||||||
label: Location Card
|
label: Location Card
|
||||||
description: A card showing model items in a certain location
|
description: A card showing model items in a certain location
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-location-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-location-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-location-card - Location Card
|
# oh-location-card - Location Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A card showing model items in a certain location
|
A card showing model items in a certain location
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Model Card
|
### Model Card
|
||||||
|
<div class="props">
|
||||||
General settings for this card
|
<PropGroup name="card" label="Model Card">
|
||||||
|
General settings for this card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the card
|
Subtitle of the card
|
||||||
|
</PropDescription>
|
||||||
- `backgroundColor` <small>TEXT</small> _Background Color_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="backgroundColor" label="Background Color">
|
||||||
Color of the card's background; if unset, choose automatically from built-in defaults for certain semantic classes
|
<PropDescription>
|
||||||
|
Color of the card's background; if unset, choose automatically from built-in defaults for certain semantic classes
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions>
|
||||||
| `red` | Red |
|
<PropOption value="red" label="Red" />
|
||||||
| `green` | Green |
|
<PropOption value="green" label="Green" />
|
||||||
| `blue` | Blue |
|
<PropOption value="blue" label="Blue" />
|
||||||
| `pink` | Pink |
|
<PropOption value="pink" label="Pink" />
|
||||||
| `yellow` | Yellow |
|
<PropOption value="yellow" label="Yellow" />
|
||||||
| `(empty)` | Orange |
|
<PropOption value="(empty)" label="Orange" />
|
||||||
| `purple` | Purple |
|
<PropOption value="purple" label="Purple" />
|
||||||
| `deeppurple` | Deep Purple |
|
<PropOption value="deeppurple" label="Deep Purple" />
|
||||||
| `lightblue` | Light Blue |
|
<PropOption value="lightblue" label="Light Blue" />
|
||||||
| `teal` | Teal |
|
<PropOption value="teal" label="Teal" />
|
||||||
| `lime` | Lime |
|
<PropOption value="lime" label="Lime" />
|
||||||
| `deeporange` | Deep Orange |
|
<PropOption value="deeporange" label="Deep Orange" />
|
||||||
| `gray` | Gray |
|
<PropOption value="gray" label="Gray" />
|
||||||
| `black` | Black |
|
<PropOption value="black" label="Black" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
- `backgroundImage` <small>TEXT</small> _Background Image_
|
<PropBlock type="TEXT" name="backgroundImage" label="Background Image">
|
||||||
|
<PropDescription>
|
||||||
URL of an image to display in the background
|
URL of an image to display in the background
|
||||||
|
</PropDescription>
|
||||||
- `invertText` <small>BOOLEAN</small> _Invert Text_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="invertText" label="Invert Text">
|
||||||
Display the text in black (for light backgrounds)
|
<PropDescription>
|
||||||
|
Display the text in black (for light backgrounds)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Card at-a-glance badges
|
### Card at-a-glance badges
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="glance" label="Card at-a-glance badges">
|
||||||
- `disableBadges` <small>BOOLEAN</small> _Disable badges_
|
<PropBlock type="BOOLEAN" name="disableBadges" label="Disable badges">
|
||||||
|
<PropDescription>
|
||||||
Do not examine items to display badges - can help with performance if you don't need them.
|
Do not examine items to display badges - can help with performance if you don't need them.
|
||||||
|
</PropDescription>
|
||||||
- `badges` <small>TEXT</small> _Enabled badges_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="badges" label="Enabled badges">
|
||||||
Select the badges you wish to show in the header of the card. Display all if none are selected.
|
<PropDescription>
|
||||||
|
Select the badges you wish to show in the header of the card. Display all if none are selected.
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions multiple="true">
|
||||||
| `lights` | Lights On |
|
<PropOption value="lights" label="Lights On" />
|
||||||
| `windows` | Open Windows |
|
<PropOption value="windows" label="Open Windows" />
|
||||||
| `doors` | Open Doors |
|
<PropOption value="doors" label="Open Doors" />
|
||||||
| `garagedoors` | Open Garage Doors |
|
<PropOption value="garagedoors" label="Open Garage Doors" />
|
||||||
| `blinds` | Open Blinds |
|
<PropOption value="blinds" label="Open Blinds" />
|
||||||
| `presence` | Presence Detected |
|
<PropOption value="presence" label="Presence Detected" />
|
||||||
| `lock` | Locks |
|
<PropOption value="lock" label="Locks" />
|
||||||
| `climate` | Climate Control Powered On |
|
<PropOption value="climate" label="Climate Control Powered On" />
|
||||||
| `screens` | Screens Powered On |
|
<PropOption value="screens" label="Screens Powered On" />
|
||||||
| `projectors` | Projectors Powered On |
|
<PropOption value="projectors" label="Projectors Powered On" />
|
||||||
| `speakers` | Speakers/AV Receivers Powered On |
|
<PropOption value="speakers" label="Speakers/AV Receivers Powered On" />
|
||||||
| `temperature` | Average Temperature (+ Setpoint) |
|
<PropOption value="temperature" label="Average Temperature (+ Setpoint)" />
|
||||||
| `humidity` | Average Humidity |
|
<PropOption value="humidity" label="Average Humidity" />
|
||||||
| `luminance` | Average Luminance |
|
<PropOption value="luminance" label="Average Luminance" />
|
||||||
|
</PropOptions>
|
||||||
Multiple options are allowed.
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-location-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-location-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-location-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,187 +4,276 @@ component: oh-map-circle-marker
|
||||||
label: Circle Marker
|
label: Circle Marker
|
||||||
description: A circle on a map, to represent a radius
|
description: A circle on a map, to represent a radius
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-map-circle-marker.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-map-circle-marker.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-map-circle-marker - Circle Marker
|
# oh-map-circle-marker - Circle Marker
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A circle on a map, to represent a radius
|
A circle on a map, to represent a radius
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Marker
|
### Marker
|
||||||
|
<div class="props">
|
||||||
General marker settings
|
<PropGroup name="marker" label="Marker">
|
||||||
|
General marker settings
|
||||||
|
<PropBlock type="TEXT" name="label" label="Label">
|
||||||
- `label` <small>TEXT</small> _Label_
|
<PropDescription>
|
||||||
|
The label on the marker
|
||||||
The label on the marker
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `color` <small>TEXT</small> _Circle color_
|
<PropBlock type="TEXT" name="color" label="Circle color">
|
||||||
|
<PropDescription>
|
||||||
The color of the circle (e.g. "blue", "red", "yellow"...)
|
The color of the circle (e.g. "blue", "red", "yellow"...)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Center Position
|
### Center Position
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="position" label="Center Position">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
The Location item this marker will be centered on
|
The Location item this marker will be centered on
|
||||||
|
</PropDescription>
|
||||||
- `location` <small>TEXT</small> _Fixed location_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="location" label="Fixed location" context="location">
|
||||||
The fixed position of the marker if no item is configured or its coordinates are invalid
|
<PropDescription>
|
||||||
|
The fixed position of the marker if no item is configured or its coordinates are invalid
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Radius
|
### Radius
|
||||||
|
<div class="props">
|
||||||
Radius of the circle
|
<PropGroup name="radius" label="Radius">
|
||||||
|
Radius of the circle
|
||||||
|
<PropBlock type="TEXT" name="radiusItem" label="Radius Item" context="item">
|
||||||
- `radiusItem` <small>TEXT</small> _Radius Item_
|
<PropDescription>
|
||||||
|
The item whose state holds the radius of the circle, in meters
|
||||||
The item whose state holds the radius of the circle, in meters
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `radius` <small>DECIMAL</small> _Fixed radius_
|
<PropBlock type="DECIMAL" name="radius" label="Fixed radius">
|
||||||
|
<PropDescription>
|
||||||
The fixed radius of the circle in meters if no item is configured or its state is invalid
|
The fixed radius of the circle in meters if no item is configured or its state is invalid
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the circle is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the circle is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-map-circle-marker.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-map-circle-marker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-map-circle-marker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,176 +4,260 @@ component: oh-map-marker
|
||||||
label: Map Marker
|
label: Map Marker
|
||||||
description: An icon on a map
|
description: An icon on a map
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-map-marker.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-map-marker.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-map-marker - Map Marker
|
# oh-map-marker - Map Marker
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
An icon on a map
|
An icon on a map
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Marker
|
### Marker
|
||||||
|
<div class="props">
|
||||||
General marker settings
|
<PropGroup name="marker" label="Marker">
|
||||||
|
General marker settings
|
||||||
|
<PropBlock type="TEXT" name="label" label="Label">
|
||||||
- `label` <small>TEXT</small> _Label_
|
<PropDescription>
|
||||||
|
The label on the marker
|
||||||
The label on the marker
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>)
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Position
|
### Position
|
||||||
|
<div class="props">
|
||||||
Position
|
<PropGroup name="position" label="Position">
|
||||||
|
Position
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropDescription>
|
||||||
|
The Location item this marker will be centered on
|
||||||
The Location item this marker will be centered on
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `location` <small>TEXT</small> _Fixed location_
|
<PropBlock type="TEXT" name="location" label="Fixed location" context="location">
|
||||||
|
<PropDescription>
|
||||||
The fixed position of the marker if no item is configured or its coordinates are invalid
|
The fixed position of the marker if no item is configured or its coordinates are invalid
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the marker is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the marker is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-map-marker.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-map-marker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-map-marker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,42 +4,115 @@ component: oh-map-page
|
||||||
label: Map page
|
label: Map page
|
||||||
description: Displays markers on a map
|
description: Displays markers on a map
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-map-page.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-map-page.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-map-page - Map page
|
# oh-map-page - Map page
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Displays markers on a map
|
Displays markers on a map
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="initialCenter" label="Initial Center" context="location">
|
||||||
|
<PropDescription>
|
||||||
|
The center to use when no markers are present or have valid positions
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="initialZoom" label="Initial Zoom Level">
|
||||||
|
<PropDescription>
|
||||||
|
The zoom level to use when no markers are present or have valid positions
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noZoomOrDrag" label="Disable Zooming & Dragging">
|
||||||
|
<PropDescription>
|
||||||
|
Disable the ability to zoom and drag
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noZoomAnimation" label="No Zoom Animation">
|
||||||
|
<PropDescription>
|
||||||
|
Change zoom levels without animation, can also avoid graphic glitches with persistent tooltips
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noMarkerZoomAnimation" label="Hide Markers during Zoom Animation">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="tileLayerProvider" label="Provider for the background tiles">
|
||||||
|
<PropDescription>
|
||||||
|
The provider of tiles to use for the background of the map. Use one from <a class="external text-color-blue" target="_blank" href="http://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers</a>, Some providers will not work until you set options, like access tokens, in the <code>tileLayerProviderOptions</code> parameter (in Code view). See <a class="external text-color-blue" target="_blank" href="https://github.com/leaflet-extras/leaflet-providers#providers-requiring-registration">here</a> for more info. The default is CartoDB, the variant depending on the dark mode setting.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="overlayTileLayerProvider" label="Provider for the overlay tiles">
|
||||||
|
<PropDescription>
|
||||||
|
The provider of tiles to use for the overlay layer above the background of the map. Use one from <a class="external text-color-blue" target="_blank" href="http://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers</a>, Some providers will not work until you set options, like access tokens, in the <code>overlayTileLayerProviderOptions</code> parameter (in Code view). See <a class="external text-color-blue" target="_blank" href="https://github.com/leaflet-extras/leaflet-providers#providers-requiring-registration">here</a> for more info.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `initialCenter` <small>TEXT</small> _Initial Center_
|
|
||||||
|
|
||||||
The center to use when no markers are present or have valid positions
|
|
||||||
|
|
||||||
- `initialZoom` <small>TEXT</small> _Initial Zoom Level_
|
|
||||||
|
|
||||||
The zoom level to use when no markers are present or have valid positions
|
|
||||||
|
|
||||||
- `noZoomOrDrag` <small>BOOLEAN</small> _Disable Zooming & Dragging_
|
|
||||||
|
|
||||||
Disable the ability to zoom and drag
|
|
||||||
|
|
||||||
- `noZoomAnimation` <small>BOOLEAN</small> _No Zoom Animation_
|
|
||||||
|
|
||||||
Change zoom levels without animation, can also avoid graphic glitches with persistent tooltips
|
|
||||||
|
|
||||||
- `noMarkerZoomAnimation` <small>BOOLEAN</small> _Hide Markers during Zoom Animation_
|
|
||||||
|
|
||||||
- `tileLayerProvider` <small>TEXT</small> _Provider for the background tiles_
|
|
||||||
|
|
||||||
The provider of tiles to use for the background of the map. Use one from <a class="external text-color-blue" target="_blank" href="http://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers</a>, Some providers will not work until you set options, like access tokens, in the <code>tileLayerProviderOptions</code> parameter (in Code view). See <a class="external text-color-blue" target="_blank" href="https://github.com/leaflet-extras/leaflet-providers#providers-requiring-registration">here</a> for more info. The default is CartoDB, the variant depending on the dark mode setting.
|
|
||||||
|
|
||||||
- `overlayTileLayerProvider` <small>TEXT</small> _Provider for the overlay tiles_
|
|
||||||
|
|
||||||
The provider of tiles to use for the overlay layer above the background of the map. Use one from <a class="external text-color-blue" target="_blank" href="http://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers</a>, Some providers will not work until you set options, like access tokens, in the <code>overlayTileLayerProviderOptions</code> parameter (in Code view). See <a class="external text-color-blue" target="_blank" href="https://github.com/leaflet-extras/leaflet-providers#providers-requiring-registration">here</a> for more info.
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-map-page.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-map-page
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-map-page
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,26 +4,92 @@ component: oh-masonry
|
||||||
label: Masonry Layout
|
label: Masonry Layout
|
||||||
description: Arranges widgets automatically depending on the screen size
|
description: Arranges widgets automatically depending on the screen size
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-masonry.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-masonry.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-masonry - Masonry Layout
|
# oh-masonry - Masonry Layout
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Arranges widgets automatically depending on the screen size
|
Arranges widgets automatically depending on the screen size
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `flavor` <small>TEXT</small> _Flavor_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Choose the implementation of the masonry layout
|
<PropBlock type="TEXT" name="flavor" label="Flavor">
|
||||||
|
<PropDescription>
|
||||||
| Option | Label |
|
Choose the implementation of the masonry layout
|
||||||
|--------|-------|
|
</PropDescription>
|
||||||
| `vue-masonry-css` | vue-masonry-css |
|
<PropOptions>
|
||||||
| `css-grid` | CSS Grid (no library) |
|
<PropOption value="vue-masonry-css" label="vue-masonry-css" />
|
||||||
|
<PropOption value="css-grid" label="CSS Grid (no library)" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-masonry.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-masonry
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-masonry
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,220 +4,319 @@ component: oh-plan-marker
|
||||||
label: Floor Plan Marker
|
label: Floor Plan Marker
|
||||||
description: A marker on a floor plan
|
description: A marker on a floor plan
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-plan-marker.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-plan-marker.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-plan-marker - Floor Plan Marker
|
# oh-plan-marker - Floor Plan Marker
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A marker on a floor plan
|
A marker on a floor plan
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Marker Settings
|
### Marker Settings
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="marker" label="Marker Settings">
|
||||||
- `name` <small>TEXT</small> _Name_
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
The name of the marker (for identification)
|
The name of the marker (for identification)
|
||||||
|
</PropDescription>
|
||||||
- `coords` <small>TEXT</small> _Coordinates_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="coords" label="Coordinates">
|
||||||
The coordinates of this marker in the floor plan Coordinate Reference System; usually set by dragging the marker at design time
|
<PropDescription>
|
||||||
|
The coordinates of this marker in the floor plan Coordinate Reference System; usually set by dragging the marker at design time
|
||||||
- `item` <small>TEXT</small> _Item_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
The item whose state to display on this marker
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
The item whose state to display on this marker
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Icon
|
### Icon
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="icon" label="Icon">
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
- `iconSize` <small>INTEGER</small> _Icon Size_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Size of the icon in pixels (40 by default)
|
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Size of the icon in pixels (40 by default)
|
||||||
|
</PropDescription>
|
||||||
Color of the icon (for Framework7/Material icons); use expression for dynamic colors
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the icon (for Framework7/Material icons); use expression for dynamic colors
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Tooltip
|
### Tooltip
|
||||||
|
<div class="props">
|
||||||
You can customize the styles further with CSS attributes in the <code>tooltipStyle</code> parameter (in YAML only)
|
<PropGroup name="tooltip" label="Tooltip">
|
||||||
|
You can customize the styles further with CSS attributes in the <code>tooltipStyle</code> parameter (in YAML only)
|
||||||
|
<PropBlock type="TEXT" name="tooltip" label="Tooltip Text">
|
||||||
- `tooltip` <small>TEXT</small> _Tooltip Text_
|
<PropDescription>
|
||||||
|
The tooltip text - leave blank to display the state of the item
|
||||||
The tooltip text - leave blank to display the state of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `tooltipPermanent` <small>BOOLEAN</small> _Always display the tooltip_
|
<PropBlock type="BOOLEAN" name="tooltipPermanent" label="Always display the tooltip">
|
||||||
|
</PropBlock>
|
||||||
- `useTooltipAsLabel` <small>BOOLEAN</small> _Use Tooltip as Label_
|
<PropBlock type="BOOLEAN" name="useTooltipAsLabel" label="Use Tooltip as Label">
|
||||||
|
<PropDescription>
|
||||||
Put the tooltip text directly over the plan instead of displaying an icon
|
Put the tooltip text directly over the plan instead of displaying an icon
|
||||||
|
</PropDescription>
|
||||||
- `tooltipFontSize` <small>TEXT</small> _Tooltip Font Size_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="tooltipFontSize" label="Tooltip Font Size">
|
||||||
Font size of the tooltip text
|
<PropDescription>
|
||||||
|
Font size of the tooltip text
|
||||||
- `tooltipColor` <small>TEXT</small> _Tooltip color_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Color of the tooltip
|
<PropBlock type="TEXT" name="tooltipColor" label="Tooltip color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the tooltip
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Zoom Visibility
|
### Zoom Visibility
|
||||||
|
<div class="props">
|
||||||
Hide this marker outside certain zoom labels
|
<PropGroup name="zoomVisibility" label="Zoom Visibility">
|
||||||
|
Hide this marker outside certain zoom labels
|
||||||
|
<PropBlock type="INTEGER" name="zoomVisibilityMin" label="Zoom Visibility Minimum">
|
||||||
- `zoomVisibilityMin` <small>INTEGER</small> _Zoom Visibility Minimum_
|
<PropDescription>
|
||||||
|
Visible only when zoomed to above this level (no limit if empty)
|
||||||
Visible only when zoomed to above this level (no limit if empty)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `zoomVisibilityMax` <small>INTEGER</small> _Zoom Visibility Maximum_
|
<PropBlock type="INTEGER" name="zoomVisibilityMax" label="Zoom Visibility Maximum">
|
||||||
|
<PropDescription>
|
||||||
Visible only when zoomed to below this level (no limit if empty)
|
Visible only when zoomed to below this level (no limit if empty)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the marker is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the marker is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-plan-marker.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-plan-marker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-plan-marker
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,54 +4,126 @@ component: oh-plan-page
|
||||||
label: Floor plan
|
label: Floor plan
|
||||||
description: Displays markers on an image overlay
|
description: Displays markers on an image overlay
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-plan-page.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-plan-page.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-plan-page - Floor plan
|
# oh-plan-page - Floor plan
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Displays markers on an image overlay
|
Displays markers on an image overlay
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="imageUrl" label="Image URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
The URL of the image to display as background
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="imageWidth" label="Image Width">
|
||||||
|
<PropDescription>
|
||||||
|
The width of the image (by default 1000 pixels). Please specify if the image is not square to compute the aspect ratio
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="imageHeight" label="Image Height">
|
||||||
|
<PropDescription>
|
||||||
|
The height of the image (by default 1000 pixels). Please specify if the image is not square to compute the aspect ratio
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noZoomOrDrag" label="Disable Zooming & Dragging">
|
||||||
|
<PropDescription>
|
||||||
|
Disable the ability to zoom and drag
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noZoomAnimation" label="No Zoom Animation">
|
||||||
|
<PropDescription>
|
||||||
|
Change zoom levels without animation, can also avoid graphic glitches with persistent tooltips
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noMarkerZoomAnimation" label="Hide Markers during Zoom Animation">
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="backgroundColor" label="Background Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color outside the bounds of the image. "Black or White" means it will be black in dark mode and white in light mode
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Default" />
|
||||||
|
<PropOption value="white" label="Always White" />
|
||||||
|
<PropOption value="black" label="Always Black" />
|
||||||
|
<PropOption value="blackwhite" label="Black or White" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="darkModeInvert" label="Invert Image in Dark Mode">
|
||||||
|
<PropDescription>
|
||||||
|
Apply an invert filter to the image in dark mode - use with images in black & white or grayscale for best results
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `imageUrl` <small>TEXT</small> _Image URL_
|
|
||||||
|
|
||||||
The URL of the image to display as background
|
|
||||||
|
|
||||||
- `imageWidth` <small>INTEGER</small> _Image Width_
|
|
||||||
|
|
||||||
The width of the image (by default 1000 pixels). Please specify if the image is not square to compute the aspect ratio
|
|
||||||
|
|
||||||
- `imageHeight` <small>INTEGER</small> _Image Height_
|
|
||||||
|
|
||||||
The height of the image (by default 1000 pixels). Please specify if the image is not square to compute the aspect ratio
|
|
||||||
|
|
||||||
- `noZoomOrDrag` <small>BOOLEAN</small> _Disable Zooming & Dragging_
|
|
||||||
|
|
||||||
Disable the ability to zoom and drag
|
|
||||||
|
|
||||||
- `noZoomAnimation` <small>BOOLEAN</small> _No Zoom Animation_
|
|
||||||
|
|
||||||
Change zoom levels without animation, can also avoid graphic glitches with persistent tooltips
|
|
||||||
|
|
||||||
- `noMarkerZoomAnimation` <small>BOOLEAN</small> _Hide Markers during Zoom Animation_
|
|
||||||
|
|
||||||
- `backgroundColor` <small>TEXT</small> _Background Color_
|
|
||||||
|
|
||||||
Color outside the bounds of the image. "Black or White" means it will be black in dark mode and white in light mode
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Default |
|
|
||||||
| `white` | Always White |
|
|
||||||
| `black` | Always Black |
|
|
||||||
| `blackwhite` | Black or White |
|
|
||||||
|
|
||||||
|
|
||||||
- `darkModeInvert` <small>BOOLEAN</small> _Invert Image in Dark Mode_
|
|
||||||
|
|
||||||
Apply an invert filter to the image in dark mode - use with images in black & white or grayscale for best results
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-plan-page.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-plan-page
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-plan-page
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,63 +4,141 @@ component: oh-player-card
|
||||||
label: Player Card
|
label: Player Card
|
||||||
description: Display player controls in a card
|
description: Display player controls in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-player-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-player-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-player-card - Player Card
|
# oh-player-card - Player Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display player controls in a card
|
Display player controls in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Player Controls
|
### Player Controls
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="player" label="Player Controls">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Player item to control
|
Player item to control
|
||||||
|
</PropDescription>
|
||||||
- `showRewindFFward` <small>BOOLEAN</small> _Rewind/Fast Forward_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="showRewindFFward" label="Rewind/Fast Forward">
|
||||||
Show Rewind and Fast Forward buttons
|
<PropDescription>
|
||||||
|
Show Rewind and Fast Forward buttons
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Currently playing track information
|
### Currently playing track information
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="Current Track Info" label="Currently playing track information">
|
||||||
|
<PropBlock type="TEXT" name="artistItem" label="Artist Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item holding the artist name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trackItem" label="Track Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item holding the track name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `artistItem` <small>TEXT</small> _Artist Item_
|
|
||||||
|
|
||||||
Item holding the artist name
|
|
||||||
|
|
||||||
- `trackItem` <small>TEXT</small> _Track Item_
|
|
||||||
|
|
||||||
Item holding the track name
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-player-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-player-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-player-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,67 +4,146 @@ component: oh-player-item
|
||||||
label: Player List Item
|
label: Player List Item
|
||||||
description: Display player controls in a list
|
description: Display player controls in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-player-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-player-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-player-item - Player List Item
|
# oh-player-item - Player List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display player controls in a list
|
Display player controls in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Player Controls
|
### Player Controls
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="player" label="Player Controls">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Player item to control
|
Player item to control
|
||||||
|
</PropDescription>
|
||||||
- `showRewindFFward` <small>BOOLEAN</small> _Rewind/Fast Forward_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="showRewindFFward" label="Rewind/Fast Forward">
|
||||||
Show Rewind and Fast Forward buttons
|
<PropDescription>
|
||||||
|
Show Rewind and Fast Forward buttons
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Currently playing track information
|
### Currently playing track information
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="Current Track Info" label="Currently playing track information">
|
||||||
|
<PropBlock type="TEXT" name="artistItem" label="Artist Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item holding the artist name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trackItem" label="Track Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item holding the track name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `artistItem` <small>TEXT</small> _Artist Item_
|
|
||||||
|
|
||||||
Item holding the artist name
|
|
||||||
|
|
||||||
- `trackItem` <small>TEXT</small> _Track Item_
|
|
||||||
|
|
||||||
Item holding the track name
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-player-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-player-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-player-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,24 +4,93 @@ component: oh-player
|
||||||
label: Media player
|
label: Media player
|
||||||
description: Media player controls, with previous track/pause/play/next buttons
|
description: Media player controls, with previous track/pause/play/next buttons
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-player.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-player.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-player - Media player
|
# oh-player - Media player
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Media player controls, with previous track/pause/play/next buttons
|
Media player controls, with previous track/pause/play/next buttons
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Player item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="showRewindFFward" label="Rewind/Fast Forward">
|
||||||
|
<PropDescription>
|
||||||
|
Show Rewind and Fast Forward buttons
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Player item to control
|
|
||||||
|
|
||||||
- `showRewindFFward` <small>BOOLEAN</small> _Rewind/Fast Forward_
|
|
||||||
|
|
||||||
Show Rewind and Fast Forward buttons
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-player.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-player
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-player
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,59 +4,125 @@ component: oh-property-card
|
||||||
label: Property Card
|
label: Property Card
|
||||||
description: A card showing model items related to a certain property
|
description: A card showing model items related to a certain property
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-property-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-property-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-property-card - Property Card
|
# oh-property-card - Property Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A card showing model items related to a certain property
|
A card showing model items related to a certain property
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Model Card
|
### Model Card
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="card" label="Model Card">
|
||||||
|
General settings for this card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
|
Subtitle of the card
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="backgroundColor" label="Background Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the card's background; if unset, choose automatically from built-in defaults for certain semantic classes
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="red" label="Red" />
|
||||||
|
<PropOption value="green" label="Green" />
|
||||||
|
<PropOption value="blue" label="Blue" />
|
||||||
|
<PropOption value="pink" label="Pink" />
|
||||||
|
<PropOption value="yellow" label="Yellow" />
|
||||||
|
<PropOption value="(empty)" label="Orange" />
|
||||||
|
<PropOption value="purple" label="Purple" />
|
||||||
|
<PropOption value="deeppurple" label="Deep Purple" />
|
||||||
|
<PropOption value="lightblue" label="Light Blue" />
|
||||||
|
<PropOption value="teal" label="Teal" />
|
||||||
|
<PropOption value="lime" label="Lime" />
|
||||||
|
<PropOption value="deeporange" label="Deep Orange" />
|
||||||
|
<PropOption value="gray" label="Gray" />
|
||||||
|
<PropOption value="black" label="Black" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="backgroundImage" label="Background Image">
|
||||||
|
<PropDescription>
|
||||||
|
URL of an image to display in the background
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="invertText" label="Invert Text">
|
||||||
|
<PropDescription>
|
||||||
|
Display the text in black (for light backgrounds)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
General settings for this card
|
|
||||||
|
|
||||||
|
|
||||||
- `title` <small>TEXT</small> _Title_
|
|
||||||
|
|
||||||
Title of the card
|
|
||||||
|
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
|
||||||
|
|
||||||
Subtitle of the card
|
|
||||||
|
|
||||||
- `backgroundColor` <small>TEXT</small> _Background Color_
|
|
||||||
|
|
||||||
Color of the card's background; if unset, choose automatically from built-in defaults for certain semantic classes
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `red` | Red |
|
|
||||||
| `green` | Green |
|
|
||||||
| `blue` | Blue |
|
|
||||||
| `pink` | Pink |
|
|
||||||
| `yellow` | Yellow |
|
|
||||||
| `(empty)` | Orange |
|
|
||||||
| `purple` | Purple |
|
|
||||||
| `deeppurple` | Deep Purple |
|
|
||||||
| `lightblue` | Light Blue |
|
|
||||||
| `teal` | Teal |
|
|
||||||
| `lime` | Lime |
|
|
||||||
| `deeporange` | Deep Orange |
|
|
||||||
| `gray` | Gray |
|
|
||||||
| `black` | Black |
|
|
||||||
|
|
||||||
|
|
||||||
- `backgroundImage` <small>TEXT</small> _Background Image_
|
|
||||||
|
|
||||||
URL of an image to display in the background
|
|
||||||
|
|
||||||
- `invertText` <small>BOOLEAN</small> _Invert Text_
|
|
||||||
|
|
||||||
Display the text in black (for light backgrounds)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-property-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-property-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-property-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,90 +4,171 @@ component: oh-repeater
|
||||||
label: Repeater
|
label: Repeater
|
||||||
description: Iterate over an array and repeat the children components in the default slot
|
description: Iterate over an array and repeat the children components in the default slot
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-repeater.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-repeater.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-repeater - Repeater
|
# oh-repeater - Repeater
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Iterate over an array and repeat the children components in the default slot
|
Iterate over an array and repeat the children components in the default slot
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="for" label="Current element variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable holding the current element in the iteration, it will be propagated to the children components in the default slot. 2 additional variables with the <code>"_idx"</code> and <code>"_source"</code> suffixes will also be defined to hold the current index and source array, respectively.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="sourceType" label="Source type">
|
||||||
|
<PropDescription>
|
||||||
|
What to iterate on
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="array" label="Array (default) in the "in" parameter" />
|
||||||
|
<PropOption value="range" label="Range of integers defined by "rangeStart", "rangeStop", "rangeStep"" />
|
||||||
|
<PropOption value="itemsInGroup" label="Member of the group defined in the "groupItem" parameter" />
|
||||||
|
<PropOption value="itemsWithTags" label="Items with tags in the "itemTags" parameter" />
|
||||||
|
<PropOption value="itemStateOptions" label="State options of the item specified in "itemOptions"" />
|
||||||
|
<PropOption value="itemCommandOptions" label="Command options of the item specified in "itemOptions"" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="in" label="Source array">
|
||||||
|
<PropDescription>
|
||||||
|
Source array (for "array" source type)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="rangeStart" label="Range Start">
|
||||||
|
<PropDescription>
|
||||||
|
Start of range (for "range" source type)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="rangeStop" label="Range Stop">
|
||||||
|
<PropDescription>
|
||||||
|
End of range (for "range" source type)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="rangeStep" label="Range Step">
|
||||||
|
<PropDescription>
|
||||||
|
Step of range (for "range" source type)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="groupItem" label="Group Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item to whose members will be iterated (for "itemsInGroup" source type)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="itemTags" label="Item Tags">
|
||||||
|
<PropDescription>
|
||||||
|
Iterate over items with the given tags (comma-separated, for "itemsWithTags" source type)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="itemOptions" label="Item with Options">
|
||||||
|
<PropDescription>
|
||||||
|
Iterate over the state options or command options of this item (for "itemStateOptions" or "itemCommandOptions" source type)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="fetchMetadata" label="Fetch Item Metadata Namespaces">
|
||||||
|
<PropDescription>
|
||||||
|
Fetch the metadata from these namespaces (for "itemsInGroup" and "itemsWithTags" source types)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="filter" label="Filter expression">
|
||||||
|
<PropDescription>
|
||||||
|
Specify an expression WITHOUT THE = PREFIX to filter the resulting array
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="map" label="Map expression">
|
||||||
|
<PropDescription>
|
||||||
|
Specify an expression WITHOUT THE = PREFIX to transform the resulting array elements
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="listContainer" label="List container">
|
||||||
|
<PropDescription>
|
||||||
|
The child components will be wrapped in a <code>ul</code> HTML elements instead of a <code>div</code>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="containerClasses" label="Classes of the container">
|
||||||
|
<PropDescription>
|
||||||
|
Add these CSS classes to the container
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="containerStyle" label="Styles of the container">
|
||||||
|
<PropDescription>
|
||||||
|
Add these CSS styles to the container
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="fragment" label="No container (fragment)">
|
||||||
|
<PropDescription>
|
||||||
|
Render all children directly under the repeater's parent, without any container
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `for` <small>TEXT</small> _Current element variable_
|
|
||||||
|
|
||||||
Name of the variable holding the current element in the iteration, it will be propagated to the children components in the default slot. 2 additional variables with the <code>"_idx"</code> and <code>"_source"</code> suffixes will also be defined to hold the current index and source array, respectively.
|
|
||||||
|
|
||||||
- `sourceType` <small>TEXT</small> _Source type_
|
|
||||||
|
|
||||||
What to iterate on
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `array` | Array (default) in the "in" parameter |
|
|
||||||
| `range` | Range of integers defined by "rangeStart", "rangeStop", "rangeStep" |
|
|
||||||
| `itemsInGroup` | Member of the group defined in the "groupItem" parameter |
|
|
||||||
| `itemsWithTags` | Items with tags in the "itemTags" parameter |
|
|
||||||
| `itemStateOptions` | State options of the item specified in "itemOptions" |
|
|
||||||
| `itemCommandOptions` | Command options of the item specified in "itemOptions" |
|
|
||||||
|
|
||||||
|
|
||||||
- `in` <small>TEXT</small> _Source array_
|
|
||||||
|
|
||||||
Source array (for "array" source type)
|
|
||||||
|
|
||||||
- `rangeStart` <small>INTEGER</small> _Range Start_
|
|
||||||
|
|
||||||
Start of range (for "range" source type)
|
|
||||||
|
|
||||||
- `rangeStop` <small>INTEGER</small> _Range Stop_
|
|
||||||
|
|
||||||
End of range (for "range" source type)
|
|
||||||
|
|
||||||
- `rangeStep` <small>INTEGER</small> _Range Step_
|
|
||||||
|
|
||||||
Step of range (for "range" source type)
|
|
||||||
|
|
||||||
- `groupItem` <small>TEXT</small> _Group Item_
|
|
||||||
|
|
||||||
Group item to whose members will be iterated (for "itemsInGroup" source type)
|
|
||||||
|
|
||||||
- `itemTags` <small>TEXT</small> _Item Tags_
|
|
||||||
|
|
||||||
Iterate over items with the given tags (comma-separated, for "itemsWithTags" source type)
|
|
||||||
|
|
||||||
- `itemOptions` <small>TEXT</small> _Item with Options_
|
|
||||||
|
|
||||||
Iterate over the state options or command options of this item (for "itemStateOptions" or "itemCommandOptions" source type)
|
|
||||||
|
|
||||||
- `fetchMetadata` <small>TEXT</small> _Fetch Item Metadata Namespaces_
|
|
||||||
|
|
||||||
Fetch the metadata from these namespaces (for "itemsInGroup" and "itemsWithTags" source types)
|
|
||||||
|
|
||||||
- `filter` <small>TEXT</small> _Filter expression_
|
|
||||||
|
|
||||||
Specify an expression WITHOUT THE = PREFIX to filter the resulting array
|
|
||||||
|
|
||||||
- `map` <small>TEXT</small> _Map expression_
|
|
||||||
|
|
||||||
Specify an expression WITHOUT THE = PREFIX to transform the resulting array elements
|
|
||||||
|
|
||||||
- `listContainer` <small>BOOLEAN</small> _List container_
|
|
||||||
|
|
||||||
The child components will be wrapped in a <code>ul</code> HTML elements instead of a <code>div</code>
|
|
||||||
|
|
||||||
- `containerClasses` <small>TEXT</small> _Classes of the container_
|
|
||||||
|
|
||||||
Add these CSS classes to the container
|
|
||||||
|
|
||||||
- `containerStyle` <small>TEXT</small> _Styles of the container_
|
|
||||||
|
|
||||||
Add these CSS styles to the container
|
|
||||||
|
|
||||||
- `fragment` <small>BOOLEAN</small> _No container (fragment)_
|
|
||||||
|
|
||||||
Render all children directly under the repeater's parent, without any container
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-repeater.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-repeater
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-repeater
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,106 +4,181 @@ component: oh-rollershutter-card
|
||||||
label: Rollershutter Card
|
label: Rollershutter Card
|
||||||
description: Display rollershutter controls in a card
|
description: Display rollershutter controls in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-rollershutter-card - Rollershutter Card
|
# oh-rollershutter-card - Rollershutter Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display rollershutter controls in a card
|
Display rollershutter controls in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Orientation
|
### Orientation
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="orientation" label="Orientation">
|
||||||
- `vertical` <small>BOOLEAN</small> _Vertical_
|
<PropBlock type="BOOLEAN" name="vertical" label="Vertical">
|
||||||
|
<PropDescription>
|
||||||
Vertical orientation
|
Vertical orientation
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Rollershutter Controls
|
### Rollershutter Controls
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="controls" label="Rollershutter Controls">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Rollershutter item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="dirIconsStyle" label="Direction Icons Style">
|
||||||
|
<PropDescription>
|
||||||
|
Icons to use for the UP/DOWN buttons
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="arrowtriangle_{dir}" label="arrowtriangle_{dir}" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_fill" label="arrowtriangle_{dir}_fill" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_circle" label="arrowtriangle_{dir}_circle" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_circle_fill" label="arrowtriangle_{dir}_circle_fill" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_square" label="arrowtriangle_{dir}_square" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_square_fill" label="arrowtriangle_{dir}_square_fill" />
|
||||||
|
<PropOption value="chevron_{dir}" label="chevron_{dir}" />
|
||||||
|
<PropOption value="chevron_{dir}_2" label="chevron_{dir}_2" />
|
||||||
|
<PropOption value="chevron_compact_{dir}_2" label="chevron_compact_{dir}_2" />
|
||||||
|
<PropOption value="chevron_{dir}_fill" label="chevron_{dir}_fill" />
|
||||||
|
<PropOption value="chevron_{dir}_circle" label="chevron_{dir}_circle" />
|
||||||
|
<PropOption value="chevron_{dir}_circle_fill" label="chevron_{dir}_circle_fill" />
|
||||||
|
<PropOption value="chevron_{dir}_square" label="chevron_{dir}_square" />
|
||||||
|
<PropOption value="chevron_{dir}_square_fill" label="chevron_{dir}_square_fill" />
|
||||||
|
<PropOption value="arrow_{dir}" label="arrow_{dir}" />
|
||||||
|
<PropOption value="arrow_{dir}_2" label="arrow_{dir}_2" />
|
||||||
|
<PropOption value="arrow_{dir}_fill" label="arrow_{dir}_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_circle" label="arrow_{dir}_circle" />
|
||||||
|
<PropOption value="arrow_{dir}_circle_fill" label="arrow_{dir}_circle_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_square" label="arrow_{dir}_square" />
|
||||||
|
<PropOption value="arrow_{dir}_square_fill" label="arrow_{dir}_square_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_to_line" label="arrow_{dir}_to_line" />
|
||||||
|
<PropOption value="arrow_{dir}_to_line_alt" label="arrow_{dir}_to_line_alt" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="stopIconStyle" label="Stop Icon Style">
|
||||||
|
<PropDescription>
|
||||||
|
Icons to use for the STOP button
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="stop" label="stop" />
|
||||||
|
<PropOption value="stop_fill" label="stop_fill" />
|
||||||
|
<PropOption value="stop_circle" label="stop_circle" />
|
||||||
|
<PropOption value="stop_circle_fill" label="stop_circle_fill" />
|
||||||
|
<PropOption value="multiply" label="multiply" />
|
||||||
|
<PropOption value="multiply_fill" label="multiply_fill" />
|
||||||
|
<PropOption value="multiply_circle" label="multiply_circle" />
|
||||||
|
<PropOption value="multiply_circle_fill" label="multiply_circle_fill" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="stateInCenter" label="State in Center">
|
||||||
|
<PropDescription>
|
||||||
|
Display state value inside the STOP button instead of icon
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Rollershutter item to control
|
|
||||||
|
|
||||||
- `dirIconsStyle` <small>TEXT</small> _Direction Icons Style_
|
|
||||||
|
|
||||||
Icons to use for the UP/DOWN buttons
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `arrowtriangle_{dir}` | arrowtriangle_{dir} |
|
|
||||||
| `arrowtriangle_{dir}_fill` | arrowtriangle_{dir}_fill |
|
|
||||||
| `arrowtriangle_{dir}_circle` | arrowtriangle_{dir}_circle |
|
|
||||||
| `arrowtriangle_{dir}_circle_fill` | arrowtriangle_{dir}_circle_fill |
|
|
||||||
| `arrowtriangle_{dir}_square` | arrowtriangle_{dir}_square |
|
|
||||||
| `arrowtriangle_{dir}_square_fill` | arrowtriangle_{dir}_square_fill |
|
|
||||||
| `chevron_{dir}` | chevron_{dir} |
|
|
||||||
| `chevron_{dir}_2` | chevron_{dir}_2 |
|
|
||||||
| `chevron_compact_{dir}_2` | chevron_compact_{dir}_2 |
|
|
||||||
| `chevron_{dir}_fill` | chevron_{dir}_fill |
|
|
||||||
| `chevron_{dir}_circle` | chevron_{dir}_circle |
|
|
||||||
| `chevron_{dir}_circle_fill` | chevron_{dir}_circle_fill |
|
|
||||||
| `chevron_{dir}_square` | chevron_{dir}_square |
|
|
||||||
| `chevron_{dir}_square_fill` | chevron_{dir}_square_fill |
|
|
||||||
| `arrow_{dir}` | arrow_{dir} |
|
|
||||||
| `arrow_{dir}_2` | arrow_{dir}_2 |
|
|
||||||
| `arrow_{dir}_fill` | arrow_{dir}_fill |
|
|
||||||
| `arrow_{dir}_circle` | arrow_{dir}_circle |
|
|
||||||
| `arrow_{dir}_circle_fill` | arrow_{dir}_circle_fill |
|
|
||||||
| `arrow_{dir}_square` | arrow_{dir}_square |
|
|
||||||
| `arrow_{dir}_square_fill` | arrow_{dir}_square_fill |
|
|
||||||
| `arrow_{dir}_to_line` | arrow_{dir}_to_line |
|
|
||||||
| `arrow_{dir}_to_line_alt` | arrow_{dir}_to_line_alt |
|
|
||||||
|
|
||||||
|
|
||||||
- `stopIconStyle` <small>TEXT</small> _Stop Icon Style_
|
|
||||||
|
|
||||||
Icons to use for the STOP button
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `stop` | stop |
|
|
||||||
| `stop_fill` | stop_fill |
|
|
||||||
| `stop_circle` | stop_circle |
|
|
||||||
| `stop_circle_fill` | stop_circle_fill |
|
|
||||||
| `multiply` | multiply |
|
|
||||||
| `multiply_fill` | multiply_fill |
|
|
||||||
| `multiply_circle` | multiply_circle |
|
|
||||||
| `multiply_circle_fill` | multiply_circle_fill |
|
|
||||||
|
|
||||||
|
|
||||||
- `stateInCenter` <small>BOOLEAN</small> _State in Center_
|
|
||||||
|
|
||||||
Display state value inside the STOP button instead of icon
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-rollershutter-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,241 +4,329 @@ component: oh-rollershutter-cell
|
||||||
label: Rollershutter Cell
|
label: Rollershutter Cell
|
||||||
description: A cell expanding to rollershutter controls
|
description: A cell expanding to rollershutter controls
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter-cell.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter-cell.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-rollershutter-cell - Rollershutter Cell
|
# oh-rollershutter-cell - Rollershutter Cell
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A cell expanding to rollershutter controls
|
A cell expanding to rollershutter controls
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Cell
|
### Cell
|
||||||
|
<div class="props">
|
||||||
General settings of the cell
|
<PropGroup name="cell" label="Cell">
|
||||||
|
General settings of the cell
|
||||||
|
<PropBlock type="TEXT" name="header" label="Header">
|
||||||
- `header` <small>TEXT</small> _Header_
|
<PropDescription>
|
||||||
|
Header of the cell
|
||||||
Header of the cell
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
Title of the cell
|
Title of the cell
|
||||||
|
</PropDescription>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
Subtitle of the cell
|
<PropDescription>
|
||||||
|
Subtitle of the cell
|
||||||
- `footer` <small>TEXT</small> _Footer_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Footer of the cell
|
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||||
|
<PropDescription>
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
Footer of the cell
|
||||||
|
</PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
- `color` <small>TEXT</small> _Highlight Color_
|
<PropDescription>
|
||||||
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
Color to use when highlighted
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `on` <small>TEXT</small> _"On" expression_
|
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||||
|
<PropDescription>
|
||||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
Color to use when highlighted
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="on" label=""On" expression">
|
||||||
|
<PropDescription>
|
||||||
|
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Roller Shutter
|
### Roller Shutter
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="rollershutter" label="Roller Shutter">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Rollershutter item to control
|
Rollershutter item to control
|
||||||
|
</PropDescription>
|
||||||
- `dirIconsStyle` <small>TEXT</small> _Direction Icons Style_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="dirIconsStyle" label="Direction Icons Style">
|
||||||
Icons to use for the UP/DOWN buttons
|
<PropDescription>
|
||||||
|
Icons to use for the UP/DOWN buttons
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
<PropOptions>
|
||||||
| `arrowtriangle_{dir}` | arrowtriangle_{dir} |
|
<PropOption value="arrowtriangle_{dir}" label="arrowtriangle_{dir}" />
|
||||||
| `arrowtriangle_{dir}_fill` | arrowtriangle_{dir}_fill |
|
<PropOption value="arrowtriangle_{dir}_fill" label="arrowtriangle_{dir}_fill" />
|
||||||
| `arrowtriangle_{dir}_circle` | arrowtriangle_{dir}_circle |
|
<PropOption value="arrowtriangle_{dir}_circle" label="arrowtriangle_{dir}_circle" />
|
||||||
| `arrowtriangle_{dir}_circle_fill` | arrowtriangle_{dir}_circle_fill |
|
<PropOption value="arrowtriangle_{dir}_circle_fill" label="arrowtriangle_{dir}_circle_fill" />
|
||||||
| `arrowtriangle_{dir}_square` | arrowtriangle_{dir}_square |
|
<PropOption value="arrowtriangle_{dir}_square" label="arrowtriangle_{dir}_square" />
|
||||||
| `arrowtriangle_{dir}_square_fill` | arrowtriangle_{dir}_square_fill |
|
<PropOption value="arrowtriangle_{dir}_square_fill" label="arrowtriangle_{dir}_square_fill" />
|
||||||
| `chevron_{dir}` | chevron_{dir} |
|
<PropOption value="chevron_{dir}" label="chevron_{dir}" />
|
||||||
| `chevron_{dir}_2` | chevron_{dir}_2 |
|
<PropOption value="chevron_{dir}_2" label="chevron_{dir}_2" />
|
||||||
| `chevron_compact_{dir}_2` | chevron_compact_{dir}_2 |
|
<PropOption value="chevron_compact_{dir}_2" label="chevron_compact_{dir}_2" />
|
||||||
| `chevron_{dir}_fill` | chevron_{dir}_fill |
|
<PropOption value="chevron_{dir}_fill" label="chevron_{dir}_fill" />
|
||||||
| `chevron_{dir}_circle` | chevron_{dir}_circle |
|
<PropOption value="chevron_{dir}_circle" label="chevron_{dir}_circle" />
|
||||||
| `chevron_{dir}_circle_fill` | chevron_{dir}_circle_fill |
|
<PropOption value="chevron_{dir}_circle_fill" label="chevron_{dir}_circle_fill" />
|
||||||
| `chevron_{dir}_square` | chevron_{dir}_square |
|
<PropOption value="chevron_{dir}_square" label="chevron_{dir}_square" />
|
||||||
| `chevron_{dir}_square_fill` | chevron_{dir}_square_fill |
|
<PropOption value="chevron_{dir}_square_fill" label="chevron_{dir}_square_fill" />
|
||||||
| `arrow_{dir}` | arrow_{dir} |
|
<PropOption value="arrow_{dir}" label="arrow_{dir}" />
|
||||||
| `arrow_{dir}_2` | arrow_{dir}_2 |
|
<PropOption value="arrow_{dir}_2" label="arrow_{dir}_2" />
|
||||||
| `arrow_{dir}_fill` | arrow_{dir}_fill |
|
<PropOption value="arrow_{dir}_fill" label="arrow_{dir}_fill" />
|
||||||
| `arrow_{dir}_circle` | arrow_{dir}_circle |
|
<PropOption value="arrow_{dir}_circle" label="arrow_{dir}_circle" />
|
||||||
| `arrow_{dir}_circle_fill` | arrow_{dir}_circle_fill |
|
<PropOption value="arrow_{dir}_circle_fill" label="arrow_{dir}_circle_fill" />
|
||||||
| `arrow_{dir}_square` | arrow_{dir}_square |
|
<PropOption value="arrow_{dir}_square" label="arrow_{dir}_square" />
|
||||||
| `arrow_{dir}_square_fill` | arrow_{dir}_square_fill |
|
<PropOption value="arrow_{dir}_square_fill" label="arrow_{dir}_square_fill" />
|
||||||
| `arrow_{dir}_to_line` | arrow_{dir}_to_line |
|
<PropOption value="arrow_{dir}_to_line" label="arrow_{dir}_to_line" />
|
||||||
| `arrow_{dir}_to_line_alt` | arrow_{dir}_to_line_alt |
|
<PropOption value="arrow_{dir}_to_line_alt" label="arrow_{dir}_to_line_alt" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
- `stopIconStyle` <small>TEXT</small> _Stop Icon Style_
|
<PropBlock type="TEXT" name="stopIconStyle" label="Stop Icon Style">
|
||||||
|
<PropDescription>
|
||||||
Icons to use for the STOP button
|
Icons to use for the STOP button
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
<PropOptions>
|
||||||
|--------|-------|
|
<PropOption value="stop" label="stop" />
|
||||||
| `stop` | stop |
|
<PropOption value="stop_fill" label="stop_fill" />
|
||||||
| `stop_fill` | stop_fill |
|
<PropOption value="stop_circle" label="stop_circle" />
|
||||||
| `stop_circle` | stop_circle |
|
<PropOption value="stop_circle_fill" label="stop_circle_fill" />
|
||||||
| `stop_circle_fill` | stop_circle_fill |
|
<PropOption value="multiply" label="multiply" />
|
||||||
| `multiply` | multiply |
|
<PropOption value="multiply_fill" label="multiply_fill" />
|
||||||
| `multiply_fill` | multiply_fill |
|
<PropOption value="multiply_circle" label="multiply_circle" />
|
||||||
| `multiply_circle` | multiply_circle |
|
<PropOption value="multiply_circle_fill" label="multiply_circle_fill" />
|
||||||
| `multiply_circle_fill` | multiply_circle_fill |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="stateInCenter" label="State in Center">
|
||||||
- `stateInCenter` <small>BOOLEAN</small> _State in Center_
|
<PropDescription>
|
||||||
|
Display state value inside the STOP button instead of icon
|
||||||
Display state value inside the STOP button instead of icon
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-rollershutter-cell.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,110 +4,186 @@ component: oh-rollershutter-item
|
||||||
label: Rollershutter List Item
|
label: Rollershutter List Item
|
||||||
description: Display rollershutter controls in a list
|
description: Display rollershutter controls in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-rollershutter-item - Rollershutter List Item
|
# oh-rollershutter-item - Rollershutter List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display rollershutter controls in a list
|
Display rollershutter controls in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Orientation
|
### Orientation
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="orientation" label="Orientation">
|
||||||
- `vertical` <small>BOOLEAN</small> _Vertical_
|
<PropBlock type="BOOLEAN" name="vertical" label="Vertical">
|
||||||
|
<PropDescription>
|
||||||
Vertical orientation
|
Vertical orientation
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Rollershutter Controls
|
### Rollershutter Controls
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="controls" label="Rollershutter Controls">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Rollershutter item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="dirIconsStyle" label="Direction Icons Style">
|
||||||
|
<PropDescription>
|
||||||
|
Icons to use for the UP/DOWN buttons
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="arrowtriangle_{dir}" label="arrowtriangle_{dir}" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_fill" label="arrowtriangle_{dir}_fill" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_circle" label="arrowtriangle_{dir}_circle" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_circle_fill" label="arrowtriangle_{dir}_circle_fill" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_square" label="arrowtriangle_{dir}_square" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_square_fill" label="arrowtriangle_{dir}_square_fill" />
|
||||||
|
<PropOption value="chevron_{dir}" label="chevron_{dir}" />
|
||||||
|
<PropOption value="chevron_{dir}_2" label="chevron_{dir}_2" />
|
||||||
|
<PropOption value="chevron_compact_{dir}_2" label="chevron_compact_{dir}_2" />
|
||||||
|
<PropOption value="chevron_{dir}_fill" label="chevron_{dir}_fill" />
|
||||||
|
<PropOption value="chevron_{dir}_circle" label="chevron_{dir}_circle" />
|
||||||
|
<PropOption value="chevron_{dir}_circle_fill" label="chevron_{dir}_circle_fill" />
|
||||||
|
<PropOption value="chevron_{dir}_square" label="chevron_{dir}_square" />
|
||||||
|
<PropOption value="chevron_{dir}_square_fill" label="chevron_{dir}_square_fill" />
|
||||||
|
<PropOption value="arrow_{dir}" label="arrow_{dir}" />
|
||||||
|
<PropOption value="arrow_{dir}_2" label="arrow_{dir}_2" />
|
||||||
|
<PropOption value="arrow_{dir}_fill" label="arrow_{dir}_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_circle" label="arrow_{dir}_circle" />
|
||||||
|
<PropOption value="arrow_{dir}_circle_fill" label="arrow_{dir}_circle_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_square" label="arrow_{dir}_square" />
|
||||||
|
<PropOption value="arrow_{dir}_square_fill" label="arrow_{dir}_square_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_to_line" label="arrow_{dir}_to_line" />
|
||||||
|
<PropOption value="arrow_{dir}_to_line_alt" label="arrow_{dir}_to_line_alt" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="stopIconStyle" label="Stop Icon Style">
|
||||||
|
<PropDescription>
|
||||||
|
Icons to use for the STOP button
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="stop" label="stop" />
|
||||||
|
<PropOption value="stop_fill" label="stop_fill" />
|
||||||
|
<PropOption value="stop_circle" label="stop_circle" />
|
||||||
|
<PropOption value="stop_circle_fill" label="stop_circle_fill" />
|
||||||
|
<PropOption value="multiply" label="multiply" />
|
||||||
|
<PropOption value="multiply_fill" label="multiply_fill" />
|
||||||
|
<PropOption value="multiply_circle" label="multiply_circle" />
|
||||||
|
<PropOption value="multiply_circle_fill" label="multiply_circle_fill" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="stateInCenter" label="State in Center">
|
||||||
|
<PropDescription>
|
||||||
|
Display state value inside the STOP button instead of icon
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Rollershutter item to control
|
|
||||||
|
|
||||||
- `dirIconsStyle` <small>TEXT</small> _Direction Icons Style_
|
|
||||||
|
|
||||||
Icons to use for the UP/DOWN buttons
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `arrowtriangle_{dir}` | arrowtriangle_{dir} |
|
|
||||||
| `arrowtriangle_{dir}_fill` | arrowtriangle_{dir}_fill |
|
|
||||||
| `arrowtriangle_{dir}_circle` | arrowtriangle_{dir}_circle |
|
|
||||||
| `arrowtriangle_{dir}_circle_fill` | arrowtriangle_{dir}_circle_fill |
|
|
||||||
| `arrowtriangle_{dir}_square` | arrowtriangle_{dir}_square |
|
|
||||||
| `arrowtriangle_{dir}_square_fill` | arrowtriangle_{dir}_square_fill |
|
|
||||||
| `chevron_{dir}` | chevron_{dir} |
|
|
||||||
| `chevron_{dir}_2` | chevron_{dir}_2 |
|
|
||||||
| `chevron_compact_{dir}_2` | chevron_compact_{dir}_2 |
|
|
||||||
| `chevron_{dir}_fill` | chevron_{dir}_fill |
|
|
||||||
| `chevron_{dir}_circle` | chevron_{dir}_circle |
|
|
||||||
| `chevron_{dir}_circle_fill` | chevron_{dir}_circle_fill |
|
|
||||||
| `chevron_{dir}_square` | chevron_{dir}_square |
|
|
||||||
| `chevron_{dir}_square_fill` | chevron_{dir}_square_fill |
|
|
||||||
| `arrow_{dir}` | arrow_{dir} |
|
|
||||||
| `arrow_{dir}_2` | arrow_{dir}_2 |
|
|
||||||
| `arrow_{dir}_fill` | arrow_{dir}_fill |
|
|
||||||
| `arrow_{dir}_circle` | arrow_{dir}_circle |
|
|
||||||
| `arrow_{dir}_circle_fill` | arrow_{dir}_circle_fill |
|
|
||||||
| `arrow_{dir}_square` | arrow_{dir}_square |
|
|
||||||
| `arrow_{dir}_square_fill` | arrow_{dir}_square_fill |
|
|
||||||
| `arrow_{dir}_to_line` | arrow_{dir}_to_line |
|
|
||||||
| `arrow_{dir}_to_line_alt` | arrow_{dir}_to_line_alt |
|
|
||||||
|
|
||||||
|
|
||||||
- `stopIconStyle` <small>TEXT</small> _Stop Icon Style_
|
|
||||||
|
|
||||||
Icons to use for the STOP button
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `stop` | stop |
|
|
||||||
| `stop_fill` | stop_fill |
|
|
||||||
| `stop_circle` | stop_circle |
|
|
||||||
| `stop_circle_fill` | stop_circle_fill |
|
|
||||||
| `multiply` | multiply |
|
|
||||||
| `multiply_fill` | multiply_fill |
|
|
||||||
| `multiply_circle` | multiply_circle |
|
|
||||||
| `multiply_circle_fill` | multiply_circle_fill |
|
|
||||||
|
|
||||||
|
|
||||||
- `stateInCenter` <small>BOOLEAN</small> _State in Center_
|
|
||||||
|
|
||||||
Display state value inside the STOP button instead of icon
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-rollershutter-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,71 +4,138 @@ component: oh-rollershutter
|
||||||
label: Rollershutter
|
label: Rollershutter
|
||||||
description: Rollershutter control, with up/down/stop buttons
|
description: Rollershutter control, with up/down/stop buttons
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-rollershutter.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-rollershutter - Rollershutter
|
# oh-rollershutter - Rollershutter
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Rollershutter control, with up/down/stop buttons
|
Rollershutter control, with up/down/stop buttons
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Rollershutter item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="dirIconsStyle" label="Direction Icons Style">
|
||||||
|
<PropDescription>
|
||||||
|
Icons to use for the UP/DOWN buttons
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="arrowtriangle_{dir}" label="arrowtriangle_{dir}" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_fill" label="arrowtriangle_{dir}_fill" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_circle" label="arrowtriangle_{dir}_circle" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_circle_fill" label="arrowtriangle_{dir}_circle_fill" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_square" label="arrowtriangle_{dir}_square" />
|
||||||
|
<PropOption value="arrowtriangle_{dir}_square_fill" label="arrowtriangle_{dir}_square_fill" />
|
||||||
|
<PropOption value="chevron_{dir}" label="chevron_{dir}" />
|
||||||
|
<PropOption value="chevron_{dir}_2" label="chevron_{dir}_2" />
|
||||||
|
<PropOption value="chevron_compact_{dir}_2" label="chevron_compact_{dir}_2" />
|
||||||
|
<PropOption value="chevron_{dir}_fill" label="chevron_{dir}_fill" />
|
||||||
|
<PropOption value="chevron_{dir}_circle" label="chevron_{dir}_circle" />
|
||||||
|
<PropOption value="chevron_{dir}_circle_fill" label="chevron_{dir}_circle_fill" />
|
||||||
|
<PropOption value="chevron_{dir}_square" label="chevron_{dir}_square" />
|
||||||
|
<PropOption value="chevron_{dir}_square_fill" label="chevron_{dir}_square_fill" />
|
||||||
|
<PropOption value="arrow_{dir}" label="arrow_{dir}" />
|
||||||
|
<PropOption value="arrow_{dir}_2" label="arrow_{dir}_2" />
|
||||||
|
<PropOption value="arrow_{dir}_fill" label="arrow_{dir}_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_circle" label="arrow_{dir}_circle" />
|
||||||
|
<PropOption value="arrow_{dir}_circle_fill" label="arrow_{dir}_circle_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_square" label="arrow_{dir}_square" />
|
||||||
|
<PropOption value="arrow_{dir}_square_fill" label="arrow_{dir}_square_fill" />
|
||||||
|
<PropOption value="arrow_{dir}_to_line" label="arrow_{dir}_to_line" />
|
||||||
|
<PropOption value="arrow_{dir}_to_line_alt" label="arrow_{dir}_to_line_alt" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="stopIconStyle" label="Stop Icon Style">
|
||||||
|
<PropDescription>
|
||||||
|
Icons to use for the STOP button
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="stop" label="stop" />
|
||||||
|
<PropOption value="stop_fill" label="stop_fill" />
|
||||||
|
<PropOption value="stop_circle" label="stop_circle" />
|
||||||
|
<PropOption value="stop_circle_fill" label="stop_circle_fill" />
|
||||||
|
<PropOption value="multiply" label="multiply" />
|
||||||
|
<PropOption value="multiply_fill" label="multiply_fill" />
|
||||||
|
<PropOption value="multiply_circle" label="multiply_circle" />
|
||||||
|
<PropOption value="multiply_circle_fill" label="multiply_circle_fill" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="stateInCenter" label="State in Center">
|
||||||
|
<PropDescription>
|
||||||
|
Display state value inside the STOP button instead of icon
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Rollershutter item to control
|
|
||||||
|
|
||||||
- `dirIconsStyle` <small>TEXT</small> _Direction Icons Style_
|
|
||||||
|
|
||||||
Icons to use for the UP/DOWN buttons
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `arrowtriangle_{dir}` | arrowtriangle_{dir} |
|
|
||||||
| `arrowtriangle_{dir}_fill` | arrowtriangle_{dir}_fill |
|
|
||||||
| `arrowtriangle_{dir}_circle` | arrowtriangle_{dir}_circle |
|
|
||||||
| `arrowtriangle_{dir}_circle_fill` | arrowtriangle_{dir}_circle_fill |
|
|
||||||
| `arrowtriangle_{dir}_square` | arrowtriangle_{dir}_square |
|
|
||||||
| `arrowtriangle_{dir}_square_fill` | arrowtriangle_{dir}_square_fill |
|
|
||||||
| `chevron_{dir}` | chevron_{dir} |
|
|
||||||
| `chevron_{dir}_2` | chevron_{dir}_2 |
|
|
||||||
| `chevron_compact_{dir}_2` | chevron_compact_{dir}_2 |
|
|
||||||
| `chevron_{dir}_fill` | chevron_{dir}_fill |
|
|
||||||
| `chevron_{dir}_circle` | chevron_{dir}_circle |
|
|
||||||
| `chevron_{dir}_circle_fill` | chevron_{dir}_circle_fill |
|
|
||||||
| `chevron_{dir}_square` | chevron_{dir}_square |
|
|
||||||
| `chevron_{dir}_square_fill` | chevron_{dir}_square_fill |
|
|
||||||
| `arrow_{dir}` | arrow_{dir} |
|
|
||||||
| `arrow_{dir}_2` | arrow_{dir}_2 |
|
|
||||||
| `arrow_{dir}_fill` | arrow_{dir}_fill |
|
|
||||||
| `arrow_{dir}_circle` | arrow_{dir}_circle |
|
|
||||||
| `arrow_{dir}_circle_fill` | arrow_{dir}_circle_fill |
|
|
||||||
| `arrow_{dir}_square` | arrow_{dir}_square |
|
|
||||||
| `arrow_{dir}_square_fill` | arrow_{dir}_square_fill |
|
|
||||||
| `arrow_{dir}_to_line` | arrow_{dir}_to_line |
|
|
||||||
| `arrow_{dir}_to_line_alt` | arrow_{dir}_to_line_alt |
|
|
||||||
|
|
||||||
|
|
||||||
- `stopIconStyle` <small>TEXT</small> _Stop Icon Style_
|
|
||||||
|
|
||||||
Icons to use for the STOP button
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `stop` | stop |
|
|
||||||
| `stop_fill` | stop_fill |
|
|
||||||
| `stop_circle` | stop_circle |
|
|
||||||
| `stop_circle_fill` | stop_circle_fill |
|
|
||||||
| `multiply` | multiply |
|
|
||||||
| `multiply_fill` | multiply_fill |
|
|
||||||
| `multiply_circle` | multiply_circle |
|
|
||||||
| `multiply_circle_fill` | multiply_circle_fill |
|
|
||||||
|
|
||||||
|
|
||||||
- `stateInCenter` <small>BOOLEAN</small> _State in Center_
|
|
||||||
|
|
||||||
Display state value inside the STOP button instead of icon
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-rollershutter.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-rollershutter
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,84 +4,165 @@ component: oh-slider-card
|
||||||
label: Slider Card
|
label: Slider Card
|
||||||
description: Display a slider in a card to control an item
|
description: Display a slider in a card to control an item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-slider-card - Slider Card
|
# oh-slider-card - Slider Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a slider in a card to control an item
|
Display a slider in a card to control an item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Slider
|
### Slider
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="slider" label="Slider">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="step" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="vertical" label="Vertical">
|
||||||
|
<PropDescription>
|
||||||
|
Display the slider vertically
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="label" label="Display Label">
|
||||||
|
<PropDescription>
|
||||||
|
Display a label above the slider knob
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="scale" label="Display Scale">
|
||||||
|
<PropDescription>
|
||||||
|
Display a scale on the slider
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSteps" label="Scale steps">
|
||||||
|
<PropDescription>
|
||||||
|
Number of (major) scale markers
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSubSteps" label="Scale sub-steps">
|
||||||
|
<PropDescription>
|
||||||
|
Number of scale minor markers between each major marker
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="unit" label="Unit">
|
||||||
|
<PropDescription>
|
||||||
|
Text to append to the label while dragging the cursor
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>DECIMAL</small> _Min_
|
|
||||||
|
|
||||||
Minimum value
|
|
||||||
|
|
||||||
- `max` <small>DECIMAL</small> _Max_
|
|
||||||
|
|
||||||
Maximum value
|
|
||||||
|
|
||||||
- `step` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values
|
|
||||||
|
|
||||||
- `vertical` <small>DECIMAL</small> _Vertical_
|
|
||||||
|
|
||||||
Display the slider vertically
|
|
||||||
|
|
||||||
- `label` <small>BOOLEAN</small> _Display Label_
|
|
||||||
|
|
||||||
Display a label above the slider knob
|
|
||||||
|
|
||||||
- `scale` <small>BOOLEAN</small> _Display Scale_
|
|
||||||
|
|
||||||
Display a scale on the slider
|
|
||||||
|
|
||||||
- `scaleSteps` <small>INTEGER</small> _Scale steps_
|
|
||||||
|
|
||||||
Number of (major) scale markers
|
|
||||||
|
|
||||||
- `scaleSubSteps` <small>INTEGER</small> _Scale sub-steps_
|
|
||||||
|
|
||||||
Number of scale minor markers between each major marker
|
|
||||||
|
|
||||||
- `unit` <small>TEXT</small> _Unit_
|
|
||||||
|
|
||||||
Text to append to the label while dragging the cursor
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-slider-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-slider-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-slider-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,226 +4,324 @@ component: oh-slider-cell
|
||||||
label: Slider Cell
|
label: Slider Cell
|
||||||
description: A cell expanding to a big vertical slider
|
description: A cell expanding to a big vertical slider
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider-cell.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider-cell.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-slider-cell - Slider Cell
|
# oh-slider-cell - Slider Cell
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
A cell expanding to a big vertical slider
|
A cell expanding to a big vertical slider
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Cell
|
### Cell
|
||||||
|
<div class="props">
|
||||||
General settings of the cell
|
<PropGroup name="cell" label="Cell">
|
||||||
|
General settings of the cell
|
||||||
|
<PropBlock type="TEXT" name="header" label="Header">
|
||||||
- `header` <small>TEXT</small> _Header_
|
<PropDescription>
|
||||||
|
Header of the cell
|
||||||
Header of the cell
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
|
<PropDescription>
|
||||||
Title of the cell
|
Title of the cell
|
||||||
|
</PropDescription>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
Subtitle of the cell
|
<PropDescription>
|
||||||
|
Subtitle of the cell
|
||||||
- `footer` <small>TEXT</small> _Footer_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Footer of the cell
|
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||||
|
<PropDescription>
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
Footer of the cell
|
||||||
|
</PropDescription>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
- `color` <small>TEXT</small> _Highlight Color_
|
<PropDescription>
|
||||||
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
Color to use when highlighted
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `on` <small>TEXT</small> _"On" expression_
|
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||||
|
<PropDescription>
|
||||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
Color to use when highlighted
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="on" label=""On" expression">
|
||||||
|
<PropDescription>
|
||||||
|
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Slider
|
### Slider
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="slider" label="Slider">
|
||||||
- `item` <small>TEXT</small> _Item_
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
Item to control
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
- `min` <small>DECIMAL</small> _Min_
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="min" label="Min">
|
||||||
Minimum value
|
<PropDescription>
|
||||||
|
Minimum value
|
||||||
- `max` <small>DECIMAL</small> _Max_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Maximum value
|
<PropBlock type="DECIMAL" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
- `step` <small>DECIMAL</small> _Step_
|
Maximum value
|
||||||
|
</PropDescription>
|
||||||
Minimum interval between values
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="step" label="Step">
|
||||||
- `vertical` <small>DECIMAL</small> _Vertical_
|
<PropDescription>
|
||||||
|
Minimum interval between values
|
||||||
Display the slider vertically
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `label` <small>BOOLEAN</small> _Display Label_
|
<PropBlock type="DECIMAL" name="vertical" label="Vertical">
|
||||||
|
<PropDescription>
|
||||||
Display a label above the slider knob
|
Display the slider vertically
|
||||||
|
</PropDescription>
|
||||||
- `scale` <small>BOOLEAN</small> _Display Scale_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="label" label="Display Label">
|
||||||
Display a scale on the slider
|
<PropDescription>
|
||||||
|
Display a label above the slider knob
|
||||||
- `scaleSteps` <small>INTEGER</small> _Scale steps_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Number of (major) scale markers
|
<PropBlock type="BOOLEAN" name="scale" label="Display Scale">
|
||||||
|
<PropDescription>
|
||||||
- `scaleSubSteps` <small>INTEGER</small> _Scale sub-steps_
|
Display a scale on the slider
|
||||||
|
</PropDescription>
|
||||||
Number of scale minor markers between each major marker
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSteps" label="Scale steps">
|
||||||
- `unit` <small>TEXT</small> _Unit_
|
<PropDescription>
|
||||||
|
Number of (major) scale markers
|
||||||
Text to append to the label while dragging the cursor
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSubSteps" label="Scale sub-steps">
|
||||||
|
<PropDescription>
|
||||||
|
Number of scale minor markers between each major marker
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="unit" label="Unit">
|
||||||
|
<PropDescription>
|
||||||
|
Text to append to the label while dragging the cursor
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-slider-cell.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-slider-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-slider-cell
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,88 +4,170 @@ component: oh-slider-item
|
||||||
label: Slider List Item
|
label: Slider List Item
|
||||||
description: Display a slider control in a list
|
description: Display a slider control in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-slider-item - Slider List Item
|
# oh-slider-item - Slider List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a slider control in a list
|
Display a slider control in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Slider
|
### Slider
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="slider" label="Slider">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="step" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="vertical" label="Vertical">
|
||||||
|
<PropDescription>
|
||||||
|
Display the slider vertically
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="label" label="Display Label">
|
||||||
|
<PropDescription>
|
||||||
|
Display a label above the slider knob
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="scale" label="Display Scale">
|
||||||
|
<PropDescription>
|
||||||
|
Display a scale on the slider
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSteps" label="Scale steps">
|
||||||
|
<PropDescription>
|
||||||
|
Number of (major) scale markers
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSubSteps" label="Scale sub-steps">
|
||||||
|
<PropDescription>
|
||||||
|
Number of scale minor markers between each major marker
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="unit" label="Unit">
|
||||||
|
<PropDescription>
|
||||||
|
Text to append to the label while dragging the cursor
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>DECIMAL</small> _Min_
|
|
||||||
|
|
||||||
Minimum value
|
|
||||||
|
|
||||||
- `max` <small>DECIMAL</small> _Max_
|
|
||||||
|
|
||||||
Maximum value
|
|
||||||
|
|
||||||
- `step` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values
|
|
||||||
|
|
||||||
- `vertical` <small>DECIMAL</small> _Vertical_
|
|
||||||
|
|
||||||
Display the slider vertically
|
|
||||||
|
|
||||||
- `label` <small>BOOLEAN</small> _Display Label_
|
|
||||||
|
|
||||||
Display a label above the slider knob
|
|
||||||
|
|
||||||
- `scale` <small>BOOLEAN</small> _Display Scale_
|
|
||||||
|
|
||||||
Display a scale on the slider
|
|
||||||
|
|
||||||
- `scaleSteps` <small>INTEGER</small> _Scale steps_
|
|
||||||
|
|
||||||
Number of (major) scale markers
|
|
||||||
|
|
||||||
- `scaleSubSteps` <small>INTEGER</small> _Scale sub-steps_
|
|
||||||
|
|
||||||
Number of scale minor markers between each major marker
|
|
||||||
|
|
||||||
- `unit` <small>TEXT</small> _Unit_
|
|
||||||
|
|
||||||
Text to append to the label while dragging the cursor
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-slider-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-slider-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-slider-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,60 +4,138 @@ component: oh-slider
|
||||||
label: Slider
|
label: Slider
|
||||||
description: Slider control, allows to pick a number value on a scale
|
description: Slider control, allows to pick a number value on a scale
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-slider.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-slider - Slider
|
# oh-slider - Slider
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Slider control, allows to pick a number value on a scale
|
Slider control, allows to pick a number value on a scale
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="step" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="vertical" label="Vertical">
|
||||||
|
<PropDescription>
|
||||||
|
Display the slider vertically
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="label" label="Display Label">
|
||||||
|
<PropDescription>
|
||||||
|
Display a label above the slider knob
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="scale" label="Display Scale">
|
||||||
|
<PropDescription>
|
||||||
|
Display a scale on the slider
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSteps" label="Scale steps">
|
||||||
|
<PropDescription>
|
||||||
|
Number of (major) scale markers
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="scaleSubSteps" label="Scale sub-steps">
|
||||||
|
<PropDescription>
|
||||||
|
Number of scale minor markers between each major marker
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="unit" label="Unit">
|
||||||
|
<PropDescription>
|
||||||
|
Text to append to the label while dragging the cursor
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set on input change
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>DECIMAL</small> _Min_
|
|
||||||
|
|
||||||
Minimum value
|
|
||||||
|
|
||||||
- `max` <small>DECIMAL</small> _Max_
|
|
||||||
|
|
||||||
Maximum value
|
|
||||||
|
|
||||||
- `step` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values
|
|
||||||
|
|
||||||
- `vertical` <small>DECIMAL</small> _Vertical_
|
|
||||||
|
|
||||||
Display the slider vertically
|
|
||||||
|
|
||||||
- `label` <small>BOOLEAN</small> _Display Label_
|
|
||||||
|
|
||||||
Display a label above the slider knob
|
|
||||||
|
|
||||||
- `scale` <small>BOOLEAN</small> _Display Scale_
|
|
||||||
|
|
||||||
Display a scale on the slider
|
|
||||||
|
|
||||||
- `scaleSteps` <small>INTEGER</small> _Scale steps_
|
|
||||||
|
|
||||||
Number of (major) scale markers
|
|
||||||
|
|
||||||
- `scaleSubSteps` <small>INTEGER</small> _Scale sub-steps_
|
|
||||||
|
|
||||||
Number of scale minor markers between each major marker
|
|
||||||
|
|
||||||
- `unit` <small>TEXT</small> _Unit_
|
|
||||||
|
|
||||||
Text to append to the label while dragging the cursor
|
|
||||||
|
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
Name of the variable to set on input change
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-slider.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-slider
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-slider
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,92 +4,175 @@ component: oh-stepper-card
|
||||||
label: Stepper Card
|
label: Stepper Card
|
||||||
description: Display a stepper in a card to control an item
|
description: Display a stepper in a card to control an item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-stepper-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-stepper-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-stepper-card - Stepper Card
|
# oh-stepper-card - Stepper Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a stepper in a card to control an item
|
Display a stepper in a card to control an item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Stepper
|
### Stepper
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="stepper" label="Stepper">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="step" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="buttonsOnly" label="Buttons Only">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons without the value in the middle
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="small" label="Small">
|
||||||
|
<PropDescription>
|
||||||
|
Smaller size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="large" label="Large">
|
||||||
|
<PropDescription>
|
||||||
|
Larger size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="fill" label="Fill">
|
||||||
|
<PropDescription>
|
||||||
|
Fill the buttons with the primary color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="raised" label="Raised">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons with a raised style
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="round" label="Round">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons with a rounded style
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="autorepeat" label="Auto-repeat">
|
||||||
|
<PropDescription>
|
||||||
|
Continue to increase/decrease the value while the buttons keep being pressed
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="autorepeatDynamic" label="Dynamic Auto-repeat">
|
||||||
|
<PropDescription>
|
||||||
|
Speed up the increase/decrease over time while the buttons keep being pressed
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>DECIMAL</small> _Min_
|
|
||||||
|
|
||||||
Minimum value
|
|
||||||
|
|
||||||
- `max` <small>DECIMAL</small> _Max_
|
|
||||||
|
|
||||||
Maximum value
|
|
||||||
|
|
||||||
- `step` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values
|
|
||||||
|
|
||||||
- `buttonsOnly` <small>BOOLEAN</small> _Buttons Only_
|
|
||||||
|
|
||||||
Display the buttons without the value in the middle
|
|
||||||
|
|
||||||
- `small` <small>BOOLEAN</small> _Small_
|
|
||||||
|
|
||||||
Smaller size
|
|
||||||
|
|
||||||
- `large` <small>BOOLEAN</small> _Large_
|
|
||||||
|
|
||||||
Larger size
|
|
||||||
|
|
||||||
- `fill` <small>BOOLEAN</small> _Fill_
|
|
||||||
|
|
||||||
Fill the buttons with the primary color
|
|
||||||
|
|
||||||
- `raised` <small>BOOLEAN</small> _Raised_
|
|
||||||
|
|
||||||
Display the buttons with a raised style
|
|
||||||
|
|
||||||
- `round` <small>BOOLEAN</small> _Round_
|
|
||||||
|
|
||||||
Display the buttons with a rounded style
|
|
||||||
|
|
||||||
- `autorepeat` <small>BOOLEAN</small> _Auto-repeat_
|
|
||||||
|
|
||||||
Continue to increase/decrease the value while the buttons keep being pressed
|
|
||||||
|
|
||||||
- `autorepeatDynamic` <small>BOOLEAN</small> _Dynamic Auto-repeat_
|
|
||||||
|
|
||||||
Speed up the increase/decrease over time while the buttons keep being pressed
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-stepper-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-stepper-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-stepper-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,96 +4,180 @@ component: oh-stepper-item
|
||||||
label: Stepper List Item
|
label: Stepper List Item
|
||||||
description: Display a stepper control in a list
|
description: Display a stepper control in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-stepper-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-stepper-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-stepper-item - Stepper List Item
|
# oh-stepper-item - Stepper List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a stepper control in a list
|
Display a stepper control in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Stepper
|
### Stepper
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="stepper" label="Stepper">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="step" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="buttonsOnly" label="Buttons Only">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons without the value in the middle
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="small" label="Small">
|
||||||
|
<PropDescription>
|
||||||
|
Smaller size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="large" label="Large">
|
||||||
|
<PropDescription>
|
||||||
|
Larger size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="fill" label="Fill">
|
||||||
|
<PropDescription>
|
||||||
|
Fill the buttons with the primary color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="raised" label="Raised">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons with a raised style
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="round" label="Round">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons with a rounded style
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="autorepeat" label="Auto-repeat">
|
||||||
|
<PropDescription>
|
||||||
|
Continue to increase/decrease the value while the buttons keep being pressed
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="autorepeatDynamic" label="Dynamic Auto-repeat">
|
||||||
|
<PropDescription>
|
||||||
|
Speed up the increase/decrease over time while the buttons keep being pressed
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>DECIMAL</small> _Min_
|
|
||||||
|
|
||||||
Minimum value
|
|
||||||
|
|
||||||
- `max` <small>DECIMAL</small> _Max_
|
|
||||||
|
|
||||||
Maximum value
|
|
||||||
|
|
||||||
- `step` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values
|
|
||||||
|
|
||||||
- `buttonsOnly` <small>BOOLEAN</small> _Buttons Only_
|
|
||||||
|
|
||||||
Display the buttons without the value in the middle
|
|
||||||
|
|
||||||
- `small` <small>BOOLEAN</small> _Small_
|
|
||||||
|
|
||||||
Smaller size
|
|
||||||
|
|
||||||
- `large` <small>BOOLEAN</small> _Large_
|
|
||||||
|
|
||||||
Larger size
|
|
||||||
|
|
||||||
- `fill` <small>BOOLEAN</small> _Fill_
|
|
||||||
|
|
||||||
Fill the buttons with the primary color
|
|
||||||
|
|
||||||
- `raised` <small>BOOLEAN</small> _Raised_
|
|
||||||
|
|
||||||
Display the buttons with a raised style
|
|
||||||
|
|
||||||
- `round` <small>BOOLEAN</small> _Round_
|
|
||||||
|
|
||||||
Display the buttons with a rounded style
|
|
||||||
|
|
||||||
- `autorepeat` <small>BOOLEAN</small> _Auto-repeat_
|
|
||||||
|
|
||||||
Continue to increase/decrease the value while the buttons keep being pressed
|
|
||||||
|
|
||||||
- `autorepeatDynamic` <small>BOOLEAN</small> _Dynamic Auto-repeat_
|
|
||||||
|
|
||||||
Speed up the increase/decrease over time while the buttons keep being pressed
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-stepper-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-stepper-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-stepper-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,68 +4,148 @@ component: oh-stepper
|
||||||
label: Stepper
|
label: Stepper
|
||||||
description: Stepper control, allows to input a number or decrement/increment it using buttons
|
description: Stepper control, allows to input a number or decrement/increment it using buttons
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-stepper.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-stepper.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-stepper - Stepper
|
# oh-stepper - Stepper
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Stepper control, allows to input a number or decrement/increment it using buttons
|
Stepper control, allows to input a number or decrement/increment it using buttons
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="min" label="Min">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
|
Maximum value
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="DECIMAL" name="step" label="Step">
|
||||||
|
<PropDescription>
|
||||||
|
Minimum interval between values
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="buttonsOnly" label="Buttons Only">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons without the value in the middle
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="small" label="Small">
|
||||||
|
<PropDescription>
|
||||||
|
Smaller size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="large" label="Large">
|
||||||
|
<PropDescription>
|
||||||
|
Larger size
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="fill" label="Fill">
|
||||||
|
<PropDescription>
|
||||||
|
Fill the buttons with the primary color
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="raised" label="Raised">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons with a raised style
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="round" label="Round">
|
||||||
|
<PropDescription>
|
||||||
|
Display the buttons with a rounded style
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="autorepeat" label="Auto-repeat">
|
||||||
|
<PropDescription>
|
||||||
|
Continue to increase/decrease the value while the buttons keep being pressed
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="autorepeatDynamic" label="Dynamic Auto-repeat">
|
||||||
|
<PropDescription>
|
||||||
|
Speed up the increase/decrease over time while the buttons keep being pressed
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set on input change
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `min` <small>DECIMAL</small> _Min_
|
|
||||||
|
|
||||||
Minimum value
|
|
||||||
|
|
||||||
- `max` <small>DECIMAL</small> _Max_
|
|
||||||
|
|
||||||
Maximum value
|
|
||||||
|
|
||||||
- `step` <small>DECIMAL</small> _Step_
|
|
||||||
|
|
||||||
Minimum interval between values
|
|
||||||
|
|
||||||
- `buttonsOnly` <small>BOOLEAN</small> _Buttons Only_
|
|
||||||
|
|
||||||
Display the buttons without the value in the middle
|
|
||||||
|
|
||||||
- `small` <small>BOOLEAN</small> _Small_
|
|
||||||
|
|
||||||
Smaller size
|
|
||||||
|
|
||||||
- `large` <small>BOOLEAN</small> _Large_
|
|
||||||
|
|
||||||
Larger size
|
|
||||||
|
|
||||||
- `fill` <small>BOOLEAN</small> _Fill_
|
|
||||||
|
|
||||||
Fill the buttons with the primary color
|
|
||||||
|
|
||||||
- `raised` <small>BOOLEAN</small> _Raised_
|
|
||||||
|
|
||||||
Display the buttons with a raised style
|
|
||||||
|
|
||||||
- `round` <small>BOOLEAN</small> _Round_
|
|
||||||
|
|
||||||
Display the buttons with a rounded style
|
|
||||||
|
|
||||||
- `autorepeat` <small>BOOLEAN</small> _Auto-repeat_
|
|
||||||
|
|
||||||
Continue to increase/decrease the value while the buttons keep being pressed
|
|
||||||
|
|
||||||
- `autorepeatDynamic` <small>BOOLEAN</small> _Dynamic Auto-repeat_
|
|
||||||
|
|
||||||
Speed up the increase/decrease over time while the buttons keep being pressed
|
|
||||||
|
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
Name of the variable to set on input change
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-stepper.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-stepper
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-stepper
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,56 +4,130 @@ component: oh-swiper-card
|
||||||
label: Swiper Card
|
label: Swiper Card
|
||||||
description: Display a swiper allowing to browse slides, in a card
|
description: Display a swiper allowing to browse slides, in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-swiper-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-swiper-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-swiper-card - Swiper Card
|
# oh-swiper-card - Swiper Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a swiper allowing to browse slides, in a card
|
Display a swiper allowing to browse slides, in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Swiper
|
### Swiper
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="swiper" label="Swiper">
|
||||||
|
<PropBlock type="BOOLEAN" name="pagination" label="Pagination">
|
||||||
|
<PropDescription>
|
||||||
|
Enable pagination
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="navigation" label="Navigation">
|
||||||
|
<PropDescription>
|
||||||
|
Enable navigation
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="scrollbar" label="Scrollbar">
|
||||||
|
<PropDescription>
|
||||||
|
Enable scrollbar
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `pagination` <small>BOOLEAN</small> _Pagination_
|
|
||||||
|
|
||||||
Enable pagination
|
|
||||||
|
|
||||||
- `navigation` <small>BOOLEAN</small> _Navigation_
|
|
||||||
|
|
||||||
Enable navigation
|
|
||||||
|
|
||||||
- `scrollbar` <small>BOOLEAN</small> _Scrollbar_
|
|
||||||
|
|
||||||
Enable scrollbar
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-swiper-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-swiper-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-swiper-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,98 @@ component: oh-swiper
|
||||||
label: Swiper
|
label: Swiper
|
||||||
description: Swiper control, allows to display multiple swipeable slides
|
description: Swiper control, allows to display multiple swipeable slides
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-swiper.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-swiper.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-swiper - Swiper
|
# oh-swiper - Swiper
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Swiper control, allows to display multiple swipeable slides
|
Swiper control, allows to display multiple swipeable slides
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="BOOLEAN" name="pagination" label="Pagination">
|
||||||
|
<PropDescription>
|
||||||
|
Enable pagination
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="navigation" label="Navigation">
|
||||||
|
<PropDescription>
|
||||||
|
Enable navigation
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="scrollbar" label="Scrollbar">
|
||||||
|
<PropDescription>
|
||||||
|
Enable scrollbar
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `pagination` <small>BOOLEAN</small> _Pagination_
|
|
||||||
|
|
||||||
Enable pagination
|
|
||||||
|
|
||||||
- `navigation` <small>BOOLEAN</small> _Navigation_
|
|
||||||
|
|
||||||
Enable navigation
|
|
||||||
|
|
||||||
- `scrollbar` <small>BOOLEAN</small> _Scrollbar_
|
|
||||||
|
|
||||||
Enable scrollbar
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-swiper.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-swiper
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-swiper
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,49 +4,125 @@ component: oh-time-axis
|
||||||
label: Time Axis
|
label: Time Axis
|
||||||
description: Reference documentation for the oh-time-axis component
|
description: Reference documentation for the oh-time-axis component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-time-axis.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-time-axis.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-time-axis - Time Axis
|
# oh-time-axis - Time Axis
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `name` <small>TEXT</small> _Name_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
A name which will appear on tooltips and labels
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
|
A name which will appear on tooltips and labels
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Name Display
|
### Name Display
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="nameDisplay" label="Name Display">
|
||||||
- `nameLocation` <small>TEXT</small> _Name Location_
|
<PropBlock type="TEXT" name="nameLocation" label="Name Location">
|
||||||
|
<PropDescription>
|
||||||
Location of axis name
|
Location of axis name
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
<PropOptions>
|
||||||
|--------|-------|
|
<PropOption value="start" label="Start" />
|
||||||
| `start` | Start |
|
<PropOption value="center" label="Center" />
|
||||||
| `center` | Center |
|
<PropOption value="end" label="End (default)" />
|
||||||
| `end` | End (default) |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="nameGap" label="Name Gap">
|
||||||
- `nameGap` <small>INTEGER</small> _Name Gap_
|
<PropDescription>
|
||||||
|
Gap between axis name and axis line.
|
||||||
Gap between axis name and axis line.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `nameRotate` <small>TEXT</small> _Name Rotate_
|
<PropBlock type="TEXT" name="nameRotate" label="Name Rotate">
|
||||||
|
<PropDescription>
|
||||||
Rotation of axis name
|
Rotation of axis name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Axis and Coordinate System Assignments
|
### Axis and Coordinate System Assignments
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="componentRelations" label="Axis and Coordinate System Assignments">
|
||||||
|
<PropBlock type="INTEGER" name="gridIndex" label="Grid Index" context="chartGrid">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the grid for this axis
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `gridIndex` <small>INTEGER</small> _Grid Index_
|
|
||||||
|
|
||||||
The index of the grid for this axis
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-time-axis.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-time-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-time-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,69 +4,143 @@ component: oh-time-series
|
||||||
label: Time Series
|
label: Time Series
|
||||||
description: Reference documentation for the oh-time-series component
|
description: Reference documentation for the oh-time-series component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-time-series.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-time-series.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-time-series - Time Series
|
# oh-time-series - Time Series
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `name` <small>TEXT</small> _Name_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
A name which will appear on tooltips and labels
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
- `item` <small>TEXT</small> _Item_
|
A name which will appear on tooltips and labels
|
||||||
|
</PropDescription>
|
||||||
The item whose persisted data to display
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
- `service` <small>TEXT</small> _Persistence Service_
|
<PropDescription>
|
||||||
|
The item whose persisted data to display
|
||||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `offsetAmount` <small>INTEGER</small> _Offset Amount_
|
<PropBlock type="TEXT" name="service" label="Persistence Service" context="persistenceService">
|
||||||
|
<PropDescription>
|
||||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||||
|
</PropDescription>
|
||||||
- `offsetUnit` <small>STRING</small> _Offset Unit_
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="offsetAmount" label="Offset Amount">
|
||||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
<PropDescription>
|
||||||
|
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||||
| Option | Label |
|
</PropDescription>
|
||||||
|--------|-------|
|
</PropBlock>
|
||||||
| `hour` | Hour |
|
<PropBlock type="STRING" name="offsetUnit" label="Offset Unit" context="offsetUnit">
|
||||||
| `minute` | Minute |
|
<PropDescription>
|
||||||
| `day` | Day |
|
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||||
| `week` | Week |
|
</PropDescription>
|
||||||
| `month` | Month |
|
<PropOptions>
|
||||||
| `year` | Year |
|
<PropOption value="hour" label="Hour" />
|
||||||
|
<PropOption value="minute" label="Minute" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
- `type` <small>TEXT</small> _Type_
|
<PropOption value="week" label="Week" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
| Option | Label |
|
</PropBlock>
|
||||||
|--------|-------|
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
| `line` | Line |
|
<PropDescription>
|
||||||
| `bar` | Bar |
|
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||||
| `heatmap` | Heatmap |
|
</PropDescription>
|
||||||
| `scatter` | Scatter |
|
<PropOptions>
|
||||||
|
<PropOption value="line" label="Line" />
|
||||||
|
<PropOption value="bar" label="Bar" />
|
||||||
|
<PropOption value="heatmap" label="Heatmap" />
|
||||||
|
<PropOption value="scatter" label="Scatter" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Axis and Coordinate System Assignments
|
### Axis and Coordinate System Assignments
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="componentRelations" label="Axis and Coordinate System Assignments">
|
||||||
|
<PropBlock type="INTEGER" name="xAxisIndex" label="X Axis Index" context="xAxis">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the X axis for this series
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="yAxisIndex" label="Y Axis Index" context="yAxis">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the Y axis for this series
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `xAxisIndex` <small>INTEGER</small> _X Axis Index_
|
|
||||||
|
|
||||||
The index of the X axis for this series
|
|
||||||
|
|
||||||
- `yAxisIndex` <small>INTEGER</small> _Y Axis Index_
|
|
||||||
|
|
||||||
The index of the Y axis for this series
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-time-series.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-time-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-time-series
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,52 +4,125 @@ component: oh-toggle-card
|
||||||
label: Toggle Card
|
label: Toggle Card
|
||||||
description: Display a toggle swtich in a card to send ON/OFF commands
|
description: Display a toggle swtich in a card to send ON/OFF commands
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-toggle-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-toggle-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-toggle-card - Toggle Card
|
# oh-toggle-card - Toggle Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a toggle switch in a card to send ON/OFF commands
|
Display a toggle switch in a card to send ON/OFF commands
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Toggle
|
### Toggle
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="toggle" label="Toggle">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="color" label="Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the control (supported values: red, green, blue, pink, yellow, orange, purple, deeppurple, lightblue, teal, lime, deeporange, gray, white, black)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `color` <small>TEXT</small> _Color_
|
|
||||||
|
|
||||||
Color of the control (supported values: red, green, blue, pink, yellow, orange, purple, deeppurple, lightblue, teal, lime, deeporange, gray, white, black)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-toggle-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-toggle-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-toggle-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,56 +4,130 @@ component: oh-toggle-item
|
||||||
label: Toggle List Item
|
label: Toggle List Item
|
||||||
description: Display a toggle switch in a list
|
description: Display a toggle switch in a list
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-toggle-item.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-toggle-item.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-toggle-item - Toggle List Item
|
# oh-toggle-item - Toggle List Item
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a toggle switch in a list
|
Display a toggle switch in a list
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### List Item
|
### List Item
|
||||||
|
<div class="props">
|
||||||
General settings of the list item
|
<PropGroup name="listitem" label="List Item">
|
||||||
|
General settings of the list item
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the item
|
||||||
Title of the item
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||||
|
<PropDescription>
|
||||||
Subtitle of the item
|
Subtitle of the item
|
||||||
|
</PropDescription>
|
||||||
- `after` <small>TEXT</small> _After_
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="after" label="After">
|
||||||
Text to display on the opposite side of the item (set either this or a badge)
|
<PropDescription>
|
||||||
|
Text to display on the opposite side of the item (set either this or a badge)
|
||||||
- `icon` <small>TEXT</small> _Icon_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
<PropBlock type="TEXT" name="icon" label="Icon">
|
||||||
|
<PropDescription>
|
||||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>) or <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||||
|
</PropDescription>
|
||||||
Not applicable to openHAB icons
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
<PropDescription>
|
||||||
|
Not applicable to openHAB icons
|
||||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||||
|
<PropDescription>
|
||||||
|
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Toggle
|
### Toggle
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="toggle" label="Toggle">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="color" label="Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the control (supported values: red, green, blue, pink, yellow, orange, purple, deeppurple, lightblue, teal, lime, deeporange, gray, white, black)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `color` <small>TEXT</small> _Color_
|
|
||||||
|
|
||||||
Color of the control (supported values: red, green, blue, pink, yellow, orange, purple, deeppurple, lightblue, teal, lime, deeporange, gray, white, black)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-toggle-item.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-toggle-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-toggle-item
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,98 @@ component: oh-toggle
|
||||||
label: Toggle
|
label: Toggle
|
||||||
description: Toggle control, allows to switch on or off
|
description: Toggle control, allows to switch on or off
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-toggle.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-toggle.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-toggle - Toggle
|
# oh-toggle - Toggle
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Toggle control, allows to switch on or off
|
Toggle control, allows to switch on or off
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to control
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="color" label="Color">
|
||||||
|
<PropDescription>
|
||||||
|
Color of the control (supported values: red, green, blue, pink, yellow, orange, purple, deeppurple, lightblue, teal, lime, deeporange, gray, white, black)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="variable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
Name of the variable to set on input change
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item to control
|
|
||||||
|
|
||||||
- `color` <small>TEXT</small> _Color_
|
|
||||||
|
|
||||||
Color of the control (supported values: red, green, blue, pink, yellow, orange, purple, deeppurple, lightblue, teal, lime, deeporange, gray, white, black)
|
|
||||||
|
|
||||||
- `variable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
Name of the variable to set on input change
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-toggle.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-toggle
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-toggle
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,32 +4,103 @@ component: oh-trend
|
||||||
label: Trend line
|
label: Trend line
|
||||||
description: Trend line to display the overall recent evoluation of an item
|
description: Trend line to display the overall recent evoluation of an item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-trend.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-trend.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-trend - Trend line
|
# oh-trend - Trend line
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Trend line to display the overall recent evoluation of an item
|
Trend line to display the overall recent evoluation of an item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="trendItem" label="Trend Line Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to show as a trend line in the background
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendStrokeWidth" label="Trend Stroke Width">
|
||||||
|
<PropDescription>
|
||||||
|
Thickness of the trend line
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendWidth" label="Trend Line Width">
|
||||||
|
<PropDescription>
|
||||||
|
Width of the trend line (leave blank to set automatically)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="trendGradient" label="Trend Line Gradient">
|
||||||
|
<PropDescription>
|
||||||
|
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `trendItem` <small>TEXT</small> _Trend Line Item_
|
|
||||||
|
|
||||||
Item to show as a trend line in the background
|
|
||||||
|
|
||||||
- `trendStrokeWidth` <small>TEXT</small> _Trend Stroke Width_
|
|
||||||
|
|
||||||
Thickness of the trend line
|
|
||||||
|
|
||||||
- `trendWidth` <small>TEXT</small> _Trend Line Width_
|
|
||||||
|
|
||||||
Width of the trend line (leave blank to set automatically)
|
|
||||||
|
|
||||||
- `trendGradient` <small>TEXT</small> _Trend Line Gradient_
|
|
||||||
|
|
||||||
Colors of the trend line (see <a target="_blank" class="external text-color-blue" href="https://github.com/QingWei-Li/vue-trend#props">vue-trend</a>)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-trend.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-trend
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-trend
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,61 +4,140 @@ component: oh-value-axis
|
||||||
label: Value Axis
|
label: Value Axis
|
||||||
description: Reference documentation for the oh-value-axis component
|
description: Reference documentation for the oh-value-axis component
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-value-axis.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-value-axis.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-value-axis - Value Axis
|
# oh-value-axis - Value Axis
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
|
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `name` <small>TEXT</small> _Name_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
A name which will appear on tooltips and labels
|
<PropBlock type="TEXT" name="name" label="Name">
|
||||||
|
<PropDescription>
|
||||||
- `min` <small>TEXT</small> _Min_
|
A name which will appear on tooltips and labels
|
||||||
|
</PropDescription>
|
||||||
Minimum boundary
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="min" label="Min">
|
||||||
- `max` <small>TEXT</small> _Max_
|
<PropDescription>
|
||||||
|
Minimum boundary
|
||||||
Maximum boundary
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `scale` <small>BOOLEAN</small> _Do Not Force Scale to Include Zero_
|
<PropBlock type="TEXT" name="max" label="Max">
|
||||||
|
<PropDescription>
|
||||||
If checked the scale will not necessarily include the origin (has no effect if min or max are set explicitely)
|
Maximum boundary
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="scale" label="Do Not Force Scale to Include Zero">
|
||||||
|
<PropDescription>
|
||||||
|
If checked the scale will not necessarily include the origin (has no effect if min or max are set explicitely)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Name Display
|
### Name Display
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="nameDisplay" label="Name Display">
|
||||||
- `nameLocation` <small>TEXT</small> _Name Location_
|
<PropBlock type="TEXT" name="nameLocation" label="Name Location">
|
||||||
|
<PropDescription>
|
||||||
Location of axis name
|
Location of axis name
|
||||||
|
</PropDescription>
|
||||||
| Option | Label |
|
<PropOptions>
|
||||||
|--------|-------|
|
<PropOption value="start" label="Start" />
|
||||||
| `start` | Start |
|
<PropOption value="center" label="Center" />
|
||||||
| `center` | Center |
|
<PropOption value="end" label="End (default)" />
|
||||||
| `end` | End (default) |
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="nameGap" label="Name Gap">
|
||||||
- `nameGap` <small>INTEGER</small> _Name Gap_
|
<PropDescription>
|
||||||
|
Gap between axis name and axis line.
|
||||||
Gap between axis name and axis line.
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `nameRotate` <small>TEXT</small> _Name Rotate_
|
<PropBlock type="TEXT" name="nameRotate" label="Name Rotate">
|
||||||
|
<PropDescription>
|
||||||
Rotation of axis name
|
Rotation of axis name
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Axis and Coordinate System Assignments
|
### Axis and Coordinate System Assignments
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="componentRelations" label="Axis and Coordinate System Assignments">
|
||||||
|
<PropBlock type="INTEGER" name="gridIndex" label="Grid Index" context="chartGrid">
|
||||||
|
<PropDescription>
|
||||||
|
The index of the grid for this axis
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `gridIndex` <small>INTEGER</small> _Grid Index_
|
|
||||||
|
|
||||||
The index of the grid for this axis
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-value-axis.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-value-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-value-axis
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,64 +4,140 @@ component: oh-video-card
|
||||||
label: Video Card
|
label: Video Card
|
||||||
description: Display a video (URL or URL from String item) in a card
|
description: Display a video (URL or URL from String item) in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-video-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-video-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-video-card - Video Card
|
# oh-video-card - Video Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a video (URL or URL from String item) in a card
|
Display a video (URL or URL from String item) in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Video
|
### Video
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="video" label="Video">
|
||||||
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item containing the address of the video
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="url" label="URL">
|
||||||
|
<PropDescription>
|
||||||
|
URL to show (if item if not specified)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
|
Content Type of the video, for example <em>video/mp4</em> (optional)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="hideControls" label="Hide Controls">
|
||||||
|
<PropDescription>
|
||||||
|
Hide the control buttons of the video
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="startManually" label="Start manually">
|
||||||
|
<PropDescription>
|
||||||
|
Does not start playing the video automatically
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `item` <small>TEXT</small> _Item_
|
|
||||||
|
|
||||||
Item containing the address of the video
|
|
||||||
|
|
||||||
- `url` <small>TEXT</small> _URL_
|
|
||||||
|
|
||||||
URL to show (if item if not specified)
|
|
||||||
|
|
||||||
- `type` <small>TEXT</small> _Type_
|
|
||||||
|
|
||||||
Content Type of the video, for example <em>video/mp4</em> (optional)
|
|
||||||
|
|
||||||
- `hideControls` <small>BOOLEAN</small> _Hide Controls_
|
|
||||||
|
|
||||||
Hide the control buttons of the video
|
|
||||||
|
|
||||||
- `startManually` <small>BOOLEAN</small> _Start manually_
|
|
||||||
|
|
||||||
Does not start playing the video automatically
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-video-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-video-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-video-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,170 +4,257 @@ component: oh-video
|
||||||
label: Video
|
label: Video
|
||||||
description: Displays a video player from a URL or an item
|
description: Displays a video player from a URL or an item
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-video.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-video.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-video - Video
|
# oh-video - Video
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Displays a video player from a URL or an item
|
Displays a video player from a URL or an item
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
- `item` <small>TEXT</small> _Item_
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
Item containing the address of the video
|
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
- `url` <small>TEXT</small> _URL_
|
Item containing the address of the video
|
||||||
|
</PropDescription>
|
||||||
URL to show (if item if not specified)
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="url" label="URL">
|
||||||
- `type` <small>TEXT</small> _Type_
|
<PropDescription>
|
||||||
|
URL to show (if item if not specified)
|
||||||
Content Type of the video, for example <em>video/mp4</em> (optional)
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `hideControls` <small>BOOLEAN</small> _Hide Controls_
|
<PropBlock type="TEXT" name="type" label="Type">
|
||||||
|
<PropDescription>
|
||||||
Hide the control buttons of the video
|
Content Type of the video, for example <em>video/mp4</em> (optional)
|
||||||
|
</PropDescription>
|
||||||
- `startManually` <small>BOOLEAN</small> _Start manually_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="hideControls" label="Hide Controls">
|
||||||
Does not start playing the video automatically
|
<PropDescription>
|
||||||
|
Hide the control buttons of the video
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="startManually" label="Start manually">
|
||||||
|
<PropDescription>
|
||||||
|
Does not start playing the video automatically
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Action
|
### Action
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="actions" label="Action">
|
||||||
|
Action to perform when the element is clicked
|
||||||
|
<PropBlock type="TEXT" name="action" label="Action">
|
||||||
|
<PropDescription>
|
||||||
|
Type of action to perform
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="navigate" label="Navigate to page" />
|
||||||
|
<PropOption value="command" label="Send command" />
|
||||||
|
<PropOption value="toggle" label="Toggle item" />
|
||||||
|
<PropOption value="options" label="Command options" />
|
||||||
|
<PropOption value="rule" label="Run rule" />
|
||||||
|
<PropOption value="popup" label="Open popup" />
|
||||||
|
<PropOption value="popover" label="Open popover" />
|
||||||
|
<PropOption value="sheet" label="Open sheet" />
|
||||||
|
<PropOption value="photos" label="Open photo browser" />
|
||||||
|
<PropOption value="group" label="Group details" />
|
||||||
|
<PropOption value="analyzer" label="Analyze item(s)" />
|
||||||
|
<PropOption value="url" label="External URL" />
|
||||||
|
<PropOption value="variable" label="Set Variable" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionUrl" label="Action URL" context="url">
|
||||||
|
<PropDescription>
|
||||||
|
URL to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="actionUrlSameWindow" label="Open in same tab/window">
|
||||||
|
<PropDescription>
|
||||||
|
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionItem" label="Action Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Item to perform the action on
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommand" label="Action Command">
|
||||||
|
<PropDescription>
|
||||||
|
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionCommandAlt" label="Action Toggle Command">
|
||||||
|
<PropDescription>
|
||||||
|
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
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionOptions" label="Command Options">
|
||||||
|
<PropDescription>
|
||||||
|
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionRule" label="Rule" context="rule">
|
||||||
|
<PropDescription>
|
||||||
|
Rule to run
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPage" label="Page" context="page">
|
||||||
|
<PropDescription>
|
||||||
|
Page to navigate to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPageTransition" label="Transition Effect">
|
||||||
|
<PropDescription>
|
||||||
|
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="f7-circle" label="Circle" />
|
||||||
|
<PropOption value="f7-cover" label="Cover" />
|
||||||
|
<PropOption value="f7-cover-v" label="Cover from bottom" />
|
||||||
|
<PropOption value="f7-dive" label="Dive" />
|
||||||
|
<PropOption value="f7-fade" label="Fade" />
|
||||||
|
<PropOption value="f7-flip" label="Flip" />
|
||||||
|
<PropOption value="f7-parallax" label="Parallax" />
|
||||||
|
<PropOption value="f7-push" label="Push" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModal" label="Modal Page or Widget" context="pagewidget">
|
||||||
|
<PropDescription>
|
||||||
|
Page or widget to display in the modal
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionModalConfig" label="Modal component configuration" context="props">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration (prop values) for the target modal page or widget
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotos" label="Images to show">
|
||||||
|
<PropDescription>
|
||||||
|
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionPhotoBrowserConfig" label="Photo browser configuration">
|
||||||
|
<PropDescription>
|
||||||
|
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionGroupPopupItem" label="Group Popup Item" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Group item whose members to show in a popup
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerItems" label="Item(s) to Analyze" context="item">
|
||||||
|
<PropDescription>
|
||||||
|
Start analyzing with the specified (set of) item(s)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerChartType" label="Chart Type">
|
||||||
|
<PropDescription>
|
||||||
|
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="(empty)" label="Dynamic" />
|
||||||
|
<PropOption value="day" label="Day" />
|
||||||
|
<PropOption value="isoWeek" label="Week (starting on Mondays)" />
|
||||||
|
<PropOption value="month" label="Month" />
|
||||||
|
<PropOption value="year" label="Year" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionAnalyzerCoordSystem" label="Initial Coordinate System">
|
||||||
|
<PropDescription>
|
||||||
|
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
||||||
|
</PropDescription>
|
||||||
|
<PropOptions>
|
||||||
|
<PropOption value="time" label="Time" />
|
||||||
|
<PropOption value="aggregate" label="Aggregate" />
|
||||||
|
<PropOption value="calendar" label="Calendar" />
|
||||||
|
</PropOptions>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionFeedback" label="Action feedback">
|
||||||
|
<PropDescription>
|
||||||
|
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariable" label="Variable">
|
||||||
|
<PropDescription>
|
||||||
|
The variable name to set
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="TEXT" name="actionVariableValue" label="Variable Value">
|
||||||
|
<PropDescription>
|
||||||
|
The value to set the variable to
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
Action to perform when the element is clicked
|
|
||||||
|
|
||||||
|
|
||||||
- `action` <small>TEXT</small> _Action_
|
|
||||||
|
|
||||||
Type of action to perform
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `navigate` | Navigate to page |
|
|
||||||
| `command` | Send command |
|
|
||||||
| `toggle` | Toggle item |
|
|
||||||
| `options` | Command options |
|
|
||||||
| `rule` | Run rule |
|
|
||||||
| `popup` | Open popup |
|
|
||||||
| `popover` | Open popover |
|
|
||||||
| `sheet` | Open sheet |
|
|
||||||
| `photos` | Open photo browser |
|
|
||||||
| `group` | Group details |
|
|
||||||
| `analyzer` | Analyze item(s) |
|
|
||||||
| `url` | External URL |
|
|
||||||
| `variable` | Set Variable |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionUrl` <small>TEXT</small> _Action URL_
|
|
||||||
|
|
||||||
URL to navigate to
|
|
||||||
|
|
||||||
- `actionUrlSameWindow` <small>BOOLEAN</small> _Open in same tab/window_
|
|
||||||
|
|
||||||
Open the URL in the same tab/window instead of a new one. This will exit the app.
|
|
||||||
|
|
||||||
- `actionItem` <small>TEXT</small> _Action Item_
|
|
||||||
|
|
||||||
Item to perform the action on
|
|
||||||
|
|
||||||
- `actionCommand` <small>TEXT</small> _Action Command_
|
|
||||||
|
|
||||||
Command to send to the item. If "toggle item" is selected as the action, only send the command when the state is different
|
|
||||||
|
|
||||||
- `actionCommandAlt` <small>TEXT</small> _Action Toggle Command_
|
|
||||||
|
|
||||||
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` <small>TEXT</small> _Command Options_
|
|
||||||
|
|
||||||
Comma-separated list of options; if omitted, retrieve the command options from the item dynamically. Use <code>value=label</code> format to provide a label different than the option.
|
|
||||||
|
|
||||||
- `actionRule` <small>TEXT</small> _Rule_
|
|
||||||
|
|
||||||
Rule to run
|
|
||||||
|
|
||||||
- `actionPage` <small>TEXT</small> _Page_
|
|
||||||
|
|
||||||
Page to navigate to
|
|
||||||
|
|
||||||
- `actionPageTransition` <small>TEXT</small> _Transition Effect_
|
|
||||||
|
|
||||||
Use a specific <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/view.html#custom-page-transitions">page transition animation</a>
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `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` <small>TEXT</small> _Modal Page or Widget_
|
|
||||||
|
|
||||||
Page or widget to display in the modal
|
|
||||||
|
|
||||||
- `actionModalConfig` <small>TEXT</small> _Modal component configuration_
|
|
||||||
|
|
||||||
Configuration (prop values) for the target modal page or widget
|
|
||||||
|
|
||||||
- `actionPhotos` <small>TEXT</small> _Images to show_
|
|
||||||
|
|
||||||
Array of URLs or objects representing the images. Auto-refresh is not supported.<br />Edit in YAML or provide a JSON array, e.g.<br /><code>[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]</code><br />Objects are in the <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photos-array">photos array format</a> with an additional <code>item</code> property to specify an item to view.
|
|
||||||
|
|
||||||
- `actionPhotoBrowserConfig` <small>TEXT</small> _Photo browser configuration_
|
|
||||||
|
|
||||||
Configuration for the photo browser.<br />Edit in YAML or provide a JSON object, e.g.<br /><code>{ "exposition": false, "type": "popup", "theme": "dark" }</code><br /> See <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/photo-browser.html#photo-browser-parameters">photo browser parameters</a> (not all are supported).
|
|
||||||
|
|
||||||
- `actionGroupPopupItem` <small>TEXT</small> _Group Popup Item_
|
|
||||||
|
|
||||||
Group item whose members to show in a popup
|
|
||||||
|
|
||||||
- `actionAnalyzerItems` <small>TEXT</small> _Item(s) to Analyze_
|
|
||||||
|
|
||||||
Start analyzing with the specified (set of) item(s)
|
|
||||||
|
|
||||||
- `actionAnalyzerChartType` <small>TEXT</small> _Chart Type_
|
|
||||||
|
|
||||||
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `(empty)` | Dynamic |
|
|
||||||
| `day` | Day |
|
|
||||||
| `isoWeek` | Week (starting on Mondays) |
|
|
||||||
| `month` | Month |
|
|
||||||
| `year` | Year |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionAnalyzerCoordSystem` <small>TEXT</small> _Initial Coordinate System_
|
|
||||||
|
|
||||||
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
|
|
||||||
|
|
||||||
| Option | Label |
|
|
||||||
|--------|-------|
|
|
||||||
| `time` | Time |
|
|
||||||
| `aggregate` | Aggregate |
|
|
||||||
| `calendar` | Calendar |
|
|
||||||
|
|
||||||
|
|
||||||
- `actionFeedback` <small>TEXT</small> _Action feedback_
|
|
||||||
|
|
||||||
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 <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/toast.html#toast-parameters">supported parameters</a>
|
|
||||||
|
|
||||||
- `actionVariable` <small>TEXT</small> _Variable_
|
|
||||||
|
|
||||||
The variable name to set
|
|
||||||
|
|
||||||
- `actionVariableValue` <small>TEXT</small> _Variable Value_
|
|
||||||
|
|
||||||
The value to set the variable to
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-video.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-video
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-video
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,56 +4,130 @@ component: oh-webframe-card
|
||||||
label: Web Frame Card
|
label: Web Frame Card
|
||||||
description: Display a web page in a card
|
description: Display a web page in a card
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-webframe-card.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-webframe-card.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-webframe-card - Web Frame Card
|
# oh-webframe-card - Web Frame Card
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Display a web page in a card
|
Display a web page in a card
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
|
||||||
### Card
|
### Card
|
||||||
|
<div class="props">
|
||||||
Parameters of the card
|
<PropGroup name="card" label="Card">
|
||||||
|
Parameters of the card
|
||||||
|
<PropBlock type="TEXT" name="title" label="Title">
|
||||||
- `title` <small>TEXT</small> _Title_
|
<PropDescription>
|
||||||
|
Title of the card
|
||||||
Title of the card
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
- `footer` <small>TEXT</small> _Footer text_
|
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||||
|
<PropDescription>
|
||||||
Footer of the card
|
Footer of the card
|
||||||
|
</PropDescription>
|
||||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||||
Do not render the card border
|
<PropDescription>
|
||||||
|
Do not render the card border
|
||||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
Do not render a shadow effect to the card
|
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||||
|
<PropDescription>
|
||||||
- `outline` <small>BOOLEAN</small> _Outline_
|
Do not render a shadow effect to the card
|
||||||
|
</PropDescription>
|
||||||
Show the card outline
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||||
- `borders` <small>BOOLEAN</small> _Borders_
|
<PropDescription>
|
||||||
|
Show the card outline
|
||||||
Show borders around the frame
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="BOOLEAN" name="borders" label="Borders">
|
||||||
|
<PropDescription>
|
||||||
|
Show borders around the frame
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
### Web Frame
|
### Web Frame
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup name="webframe" label="Web Frame">
|
||||||
|
<PropBlock type="TEXT" name="src" label="Source URL">
|
||||||
|
<PropDescription>
|
||||||
|
URL to show in the frame
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="height" label="Height">
|
||||||
|
<PropDescription>
|
||||||
|
Height of the frame (by default 300px)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
- `src` <small>TEXT</small> _Source URL_
|
|
||||||
|
|
||||||
URL to show in the frame
|
|
||||||
|
|
||||||
- `height` <small>INTEGER</small> _Height_
|
|
||||||
|
|
||||||
Height of the frame (by default 300px)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-webframe-card.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-webframe-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-webframe-card
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,24 +4,93 @@ component: oh-webframe
|
||||||
label: Web frame
|
label: Web frame
|
||||||
description: Displays a web page in a frame
|
description: Displays a web page in a frame
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-webframe.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-webframe.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# oh-webframe - Web frame
|
# oh-webframe - Web frame
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
Displays a web page in a frame
|
Displays a web page in a frame
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
|
### General
|
||||||
|
<div class="props">
|
||||||
|
<PropGroup label="General">
|
||||||
|
<PropBlock type="TEXT" name="src" label="Source URL">
|
||||||
|
<PropDescription>
|
||||||
|
URL to show in the frame
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
<PropBlock type="INTEGER" name="height" label="Height">
|
||||||
|
<PropDescription>
|
||||||
|
Height of the frame (by default 300px)
|
||||||
|
</PropDescription>
|
||||||
|
</PropBlock>
|
||||||
|
</PropGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
- `src` <small>TEXT</small> _Source URL_
|
|
||||||
|
|
||||||
URL to show in the frame
|
|
||||||
|
|
||||||
- `height` <small>INTEGER</small> _Height_
|
|
||||||
|
|
||||||
Height of the frame (by default 300px)
|
|
||||||
|
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the oh-webframe.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: oh-webframe
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: oh-webframe
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,77 @@ component: {componentType}
|
||||||
label: {componentLabel}
|
label: {componentLabel}
|
||||||
description: {componentDescription}
|
description: {componentDescription}
|
||||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/{componentType}.md
|
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/{componentType}.md
|
||||||
|
prev: /docs/ui/components/
|
||||||
---
|
---
|
||||||
|
|
||||||
# {componentType} - {componentLabel}
|
# {componentType} - {componentLabel}
|
||||||
|
|
||||||
|
<!-- Put a screenshot here if relevant:
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
[[toc]]
|
||||||
|
|
||||||
|
<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
|
||||||
|
<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
|
||||||
<!-- GENERATED componentDescription -->
|
<!-- GENERATED componentDescription -->
|
||||||
{componentDescription}
|
{componentDescription}
|
||||||
<!-- GENERATED /componentDescription -->
|
<!-- GENERATED /componentDescription -->
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
|
<!-- DO NOT REMOVE the following comments -->
|
||||||
<!-- GENERATED props -->
|
<!-- GENERATED props -->
|
||||||
{props}
|
{props}
|
||||||
<!-- GENERATED /props -->
|
<!-- GENERATED /props -->
|
||||||
|
|
||||||
|
<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
|
||||||
|
### Inherited Properties
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- If applicable describe the slots recognized by the component and what they represent:
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
#### `default`
|
||||||
|
|
||||||
|
The contents of the {componentType}.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
component: {componentType}
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::: details YAML
|
||||||
|
```yaml
|
||||||
|
component: {componentType}
|
||||||
|
config:
|
||||||
|
prop1: value1
|
||||||
|
prop2: value2
|
||||||
|
slots
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
|
||||||
|
## Community Resources
|
||||||
|
|
||||||
|
- [Community Post 1](https://community.openhab.org/t/12345)
|
||||||
|
- [Community Post 2](https://community.openhab.org/t/23456)
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import fs from 'fs'
|
import fs from 'fs'
|
||||||
|
|
||||||
import * as SystemWidgets from '../../../web/src/assets/definitions/widgets/system/index.js'
|
import * as SystemWidgets from '../../../web/src/assets/definitions/widgets/system/index.js'
|
||||||
import * as StdCardWidgets from '../../../web/src/assets/definitions/widgets/standard/cards.js'
|
import * as StdCardWidgets from '../../../web/src/assets/definitions/widgets/standard/cards.js'
|
||||||
|
|
@ -30,7 +30,7 @@ const widgetLibraries = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(widgetLibraries)
|
// console.log(widgetLibraries)
|
||||||
|
|
||||||
let index = fs.readFileSync('./index.md', 'utf8')
|
let index = fs.readFileSync('./index.md', 'utf8')
|
||||||
|
|
||||||
|
|
@ -42,32 +42,51 @@ const replaceBetweenComments = (commentTag, text, value) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const buildProp = (prop) => {
|
const buildProp = (prop) => {
|
||||||
let ret = '\n'
|
let ret = ''
|
||||||
ret += '- `' + prop.name + '` <small>' + prop.type + '</small> _' + prop.label + '_\n'
|
ret += '<PropBlock type="' + prop.type + '" '
|
||||||
if (prop.description) ret += '\n ' + prop.description + '\n'
|
if (prop.name) ret += 'name="' + prop.name + '" '
|
||||||
if (prop.options) {
|
if (prop.label) ret += 'label="' + prop.label + '" '
|
||||||
ret += '\n'
|
if (prop.required) ret += 'required="true" '
|
||||||
ret += ' | Option | Label |\n'
|
if (prop.context) ret += 'context="' + prop.context + '" '
|
||||||
ret += ' |--------|-------|\n'
|
ret = ret.trim() + '>\n'
|
||||||
prop.options.forEach((o) => {
|
|
||||||
ret += ' | `' + (o.value || '(empty)') + '` | ' + o.label + ' |\n'
|
if (prop.description) {
|
||||||
})
|
ret += ' <PropDescription>\n'
|
||||||
if (prop.multiple) ret += '\n Multiple options are allowed.\n'
|
ret += ' ' + prop.description + '\n'
|
||||||
ret += '\n'
|
ret += ' </PropDescription>\n'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (prop.options) {
|
||||||
|
ret += ' <PropOptions'
|
||||||
|
if (prop.multiple) ret += ' multiple="true"'
|
||||||
|
ret += '>\n'
|
||||||
|
prop.options.forEach((o) => {
|
||||||
|
ret += ' <PropOption value="' + (o.value || '(empty)') + '" label="' + o.label + '" />\n'
|
||||||
|
})
|
||||||
|
ret +=' </PropOptions>\n'
|
||||||
|
}
|
||||||
|
|
||||||
|
ret += '</PropBlock>\n'
|
||||||
return ret
|
return ret
|
||||||
}
|
}
|
||||||
|
|
||||||
const buildProps = (component) => {
|
const buildProps = (component) => {
|
||||||
let ret = ''
|
let ret = ''
|
||||||
const propsWithoutGroup = component.props.parameters.filter((p) => p.groupName === undefined)
|
const propsWithoutGroup = component.props.parameters.filter((p) => p.groupName === undefined)
|
||||||
propsWithoutGroup.forEach((p) => ret += buildProp(p))
|
if (propsWithoutGroup.length) {
|
||||||
|
ret += '### General\n'
|
||||||
|
ret += '<div class="props">\n<PropGroup label="General">\n'
|
||||||
|
propsWithoutGroup.forEach((p) => ret += buildProp(p))
|
||||||
|
ret += '</PropGroup>\n</div>\n\n'
|
||||||
|
}
|
||||||
if (component.props.parameterGroups) {
|
if (component.props.parameterGroups) {
|
||||||
component.props.parameterGroups.forEach((g) => {
|
component.props.parameterGroups.forEach((g) => {
|
||||||
ret += '\n### ' + g.label + '\n\n'
|
ret += '### ' + g.label + '\n'
|
||||||
if (g.description) ret += g.description + '\n\n'
|
ret += '<div class="props">\n<PropGroup name="' + g.name + '" label="' + g.label + '">\n'
|
||||||
|
if (g.description) ret += ' ' + g.description + '\n'
|
||||||
const propsInGroup = component.props.parameters.filter((p) => p.groupName === g.name)
|
const propsInGroup = component.props.parameters.filter((p) => p.groupName === g.name)
|
||||||
propsInGroup.forEach((p) => ret += buildProp(p))
|
propsInGroup.forEach((p) => ret += buildProp(p))
|
||||||
|
ret += '</PropGroup>\n</div>\n\n'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return ret
|
return ret
|
||||||
|
|
@ -99,6 +118,10 @@ Object.keys(widgetLibraries).forEach((l) => {
|
||||||
if (widgetName.indexOf('oh-') < 0) return
|
if (widgetName.indexOf('oh-') < 0) return
|
||||||
table += '| [`' + widgetName + '`](./' + widgetName + '.html) | [' + widget.label + '](./' + widgetName + '.html) | ' + (widget.description || '') + ' |\n'
|
table += '| [`' + widgetName + '`](./' + widgetName + '.html) | [' + widget.label + '](./' + widgetName + '.html) | ' + (widget.description || '') + ' |\n'
|
||||||
processComponent(widget, w)
|
processComponent(widget, w)
|
||||||
|
|
||||||
|
if (!fs.existsSync('..\\images\\' + widget.name)) fs.mkdirSync('..\\images\\' + widget.name)
|
||||||
|
//if (!fs.existsSync('..\\code\\' + widget.name)) fs.mkdirSync('..\\code\\' + widget.name)
|
||||||
|
|
||||||
})
|
})
|
||||||
index = index.replace('{' + l + '}', table)
|
index = index.replace('{' + l + '}', table)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue