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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `name` <small>TEXT</small> _Name_
|
||||
|
||||
A name which will appear on tooltips and labels
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
The item whose persisted data to display
|
||||
|
||||
- `service` <small>TEXT</small> _Persistence Service_
|
||||
|
||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||
|
||||
- `offsetAmount` <small>INTEGER</small> _Offset Amount_
|
||||
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||
|
||||
- `offsetUnit` <small>STRING</small> _Offset Unit_
|
||||
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `hour` | Hour |
|
||||
| `minute` | Minute |
|
||||
| `day` | Day |
|
||||
| `week` | Week |
|
||||
| `month` | Month |
|
||||
| `year` | Year |
|
||||
|
||||
|
||||
- `type` <small>TEXT</small> _Type_
|
||||
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `line` | Line |
|
||||
| `bar` | Bar |
|
||||
| `heatmap` | Heatmap |
|
||||
| `scatter` | Scatter |
|
||||
|
||||
|
||||
- `dimension1` <small>TEXT</small> _First Dimension_
|
||||
|
||||
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.
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `minute` | Minute of Hour |
|
||||
| `hour` | Hour of Day |
|
||||
| `isoWeekday` | Day of Week (starting on Monday) |
|
||||
| `weekday` | Day of Week (starting on Sunday) |
|
||||
| `date` | Day of Month |
|
||||
| `month` | Month of Year |
|
||||
|
||||
|
||||
- `dimension2` <small>TEXT</small> _Second Dimension_
|
||||
|
||||
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.
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `minute` | Minute of Hour |
|
||||
| `hour` | Hour of Day |
|
||||
| `isoWeekday` | Day of Week (starting on Monday) |
|
||||
| `weekday` | Day of Week (starting on Sunday) |
|
||||
| `date` | Day of Month |
|
||||
| `month` | Month of Year |
|
||||
|
||||
|
||||
- `transpose` <small>BOOLEAN</small> _Transpose_
|
||||
|
||||
Enable when the first dimension should be mapped to the Y axis instead of the X axis
|
||||
|
||||
- `aggregationFunction` <small>TEXT</small> _Aggregation Function_
|
||||
|
||||
How to reduce the data points in a same aggregation cluster to a single value. If not specified, the average function will be used.
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `average` | Average |
|
||||
| `sum` | Sum |
|
||||
| `min` | Minimum |
|
||||
| `max` | Maximum |
|
||||
| `first` | First (earliest) |
|
||||
| `last` | Last (latest) |
|
||||
| `diff_first` | Difference of firsts |
|
||||
| `diff_last` | Difference of lasts |
|
||||
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="name" label="Name">
|
||||
<PropDescription>
|
||||
A name which will appear on tooltips and labels
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
The item whose persisted data to display
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="service" label="Persistence Service" context="persistenceService">
|
||||
<PropDescription>
|
||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="offsetAmount" label="Offset Amount">
|
||||
<PropDescription>
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="STRING" name="offsetUnit" label="Offset Unit" context="offsetUnit">
|
||||
<PropDescription>
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="hour" label="Hour" />
|
||||
<PropOption value="minute" label="Minute" />
|
||||
<PropOption value="day" label="Day" />
|
||||
<PropOption value="week" label="Week" />
|
||||
<PropOption value="month" label="Month" />
|
||||
<PropOption value="year" label="Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="line" label="Line" />
|
||||
<PropOption value="bar" label="Bar" />
|
||||
<PropOption value="heatmap" label="Heatmap" />
|
||||
<PropOption value="scatter" label="Scatter" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="dimension1" label="First Dimension">
|
||||
<PropDescription>
|
||||
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.
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="minute" label="Minute of Hour" />
|
||||
<PropOption value="hour" label="Hour of Day" />
|
||||
<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" />
|
||||
<PropOption value="month" label="Month of Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="dimension2" label="Second Dimension">
|
||||
<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.
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="minute" label="Minute of Hour" />
|
||||
<PropOption value="hour" label="Hour of Day" />
|
||||
<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" />
|
||||
<PropOption value="month" label="Month of Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="transpose" label="Transpose">
|
||||
<PropDescription>
|
||||
Enable when the first dimension should be mapped to the Y axis instead of the X axis
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="aggregationFunction" label="Aggregation Function">
|
||||
<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.
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="average" label="Average" />
|
||||
<PropOption value="sum" label="Sum" />
|
||||
<PropOption value="min" label="Minimum" />
|
||||
<PropOption value="max" label="Maximum" />
|
||||
<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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
### 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `orient` <small>TEXT</small> _Orientation_
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `horizontal` | Horizontal |
|
||||
| `vertical` | Vertical |
|
||||
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="orient" label="Orientation">
|
||||
<PropOptions>
|
||||
<PropOption value="horizontal" label="Horizontal" />
|
||||
<PropOption value="vertical" label="Vertical" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Name Display
|
||||
|
||||
<div class="props">
|
||||
<PropGroup name="nameDisplay" label="Name Display">
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `name` <small>TEXT</small> _Name_
|
||||
|
||||
A name which will appear on tooltips and labels
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
The item whose persisted data to display
|
||||
|
||||
- `service` <small>TEXT</small> _Persistence Service_
|
||||
|
||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||
|
||||
- `offsetAmount` <small>INTEGER</small> _Offset Amount_
|
||||
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||
|
||||
- `offsetUnit` <small>STRING</small> _Offset Unit_
|
||||
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `hour` | Hour |
|
||||
| `minute` | Minute |
|
||||
| `day` | Day |
|
||||
| `week` | Week |
|
||||
| `month` | Month |
|
||||
| `year` | Year |
|
||||
|
||||
|
||||
- `type` <small>TEXT</small> _Type_
|
||||
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `heatmap` | Heatmap |
|
||||
| `scatter` | Scatter |
|
||||
|
||||
|
||||
- `aggregationFunction` <small>TEXT</small> _Aggregation Function_
|
||||
|
||||
How to reduce the data points in a same aggregation cluster to a single value. If not specified, the average function will be used.
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `average` | Average |
|
||||
| `sum` | Sum |
|
||||
| `min` | Minimum |
|
||||
| `max` | Maximum |
|
||||
| `first` | First (earliest) |
|
||||
| `last` | Last (latest) |
|
||||
| `diff_first` | Difference of firsts |
|
||||
| `diff_last` | Difference of lasts |
|
||||
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="name" label="Name">
|
||||
<PropDescription>
|
||||
A name which will appear on tooltips and labels
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
The item whose persisted data to display
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="service" label="Persistence Service" context="persistenceService">
|
||||
<PropDescription>
|
||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="offsetAmount" label="Offset Amount">
|
||||
<PropDescription>
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="STRING" name="offsetUnit" label="Offset Unit" context="offsetUnit">
|
||||
<PropDescription>
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="hour" label="Hour" />
|
||||
<PropOption value="minute" label="Minute" />
|
||||
<PropOption value="day" label="Day" />
|
||||
<PropOption value="week" label="Week" />
|
||||
<PropOption value="month" label="Month" />
|
||||
<PropOption value="year" label="Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="heatmap" label="Heatmap" />
|
||||
<PropOption value="scatter" label="Scatter" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="aggregationFunction" label="Aggregation Function">
|
||||
<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.
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="average" label="Average" />
|
||||
<PropOption value="sum" label="Sum" />
|
||||
<PropOption value="min" label="Minimum" />
|
||||
<PropOption value="max" label="Maximum" />
|
||||
<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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `name` <small>TEXT</small> _Name_
|
||||
|
||||
A name which will appear on tooltips and labels
|
||||
|
||||
- `categoryType` <small>TEXT</small> _Categories_
|
||||
|
||||
Type of categories to display
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `hour` | Minutes of hour |
|
||||
| `day` | Hours of day |
|
||||
| `week` | Days of week |
|
||||
| `month` | Days of month |
|
||||
| `year` | Months of year |
|
||||
|
||||
|
||||
- `weekdayFormat` <small>TEXT</small> _Weekday Format_
|
||||
|
||||
Format of weekdays labels
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `default` | Long (default) |
|
||||
| `short` | Short |
|
||||
| `min` | Minimal |
|
||||
|
||||
|
||||
- `startonSunday` <small>BOOLEAN</small> _Start Week on Sunday_
|
||||
|
||||
Check to start the week on Sundays instead of Mondays
|
||||
|
||||
- `monthFormat` <small>TEXT</small> _Month Format_
|
||||
|
||||
Format of months labels
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `default` | Long (default) |
|
||||
| `short` | Short |
|
||||
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="name" label="Name">
|
||||
<PropDescription>
|
||||
A name which will appear on tooltips and labels
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="categoryType" label="Categories" required="true">
|
||||
<PropDescription>
|
||||
Type of categories to display
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="hour" label="Minutes of hour" />
|
||||
<PropOption value="day" label="Hours of day" />
|
||||
<PropOption value="week" label="Days of week" />
|
||||
<PropOption value="month" label="Days of month" />
|
||||
<PropOption value="year" label="Months of year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="weekdayFormat" label="Weekday Format" required="true">
|
||||
<PropDescription>
|
||||
Format of weekdays labels
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="default" label="Long (default)" />
|
||||
<PropOption value="short" label="Short" />
|
||||
<PropOption value="min" label="Minimal" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="startonSunday" label="Start Week on Sunday">
|
||||
<PropDescription>
|
||||
Check to start the week on Sundays instead of Mondays
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="monthFormat" label="Month Format" required="true">
|
||||
<PropDescription>
|
||||
Format of months labels
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="default" label="Long (default)" />
|
||||
<PropOption value="short" label="Short" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Name Display
|
||||
|
||||
|
||||
- `nameLocation` <small>TEXT</small> _Name Location_
|
||||
|
||||
Location of axis name
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `start` | Start |
|
||||
| `center` | Center |
|
||||
| `end` | End (default) |
|
||||
|
||||
|
||||
- `nameGap` <small>INTEGER</small> _Name Gap_
|
||||
|
||||
Gap between axis name and axis line.
|
||||
|
||||
- `nameRotate` <small>TEXT</small> _Name Rotate_
|
||||
|
||||
Rotation of axis name
|
||||
<div class="props">
|
||||
<PropGroup name="nameDisplay" label="Name Display">
|
||||
<PropBlock type="TEXT" name="nameLocation" label="Name Location">
|
||||
<PropDescription>
|
||||
Location of axis name
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="start" label="Start" />
|
||||
<PropOption value="center" label="Center" />
|
||||
<PropOption value="end" label="End (default)" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="nameGap" label="Name Gap">
|
||||
<PropDescription>
|
||||
Gap between axis name and axis line.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="nameRotate" label="Name Rotate">
|
||||
<PropDescription>
|
||||
Rotation of axis name
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
description: A regular or expandable cell
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
A regular or expandable cell
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Cell
|
||||
|
||||
General settings of the cell
|
||||
|
||||
|
||||
- `header` <small>TEXT</small> _Header_
|
||||
|
||||
Header of the cell
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the cell
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the cell
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer_
|
||||
|
||||
Footer of the cell
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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` <small>TEXT</small> _Highlight Color_
|
||||
|
||||
Color to use when highlighted
|
||||
|
||||
- `on` <small>TEXT</small> _"On" expression_
|
||||
|
||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||
<div class="props">
|
||||
<PropGroup name="cell" label="Cell">
|
||||
General settings of the cell
|
||||
<PropBlock type="TEXT" name="header" label="Header">
|
||||
<PropDescription>
|
||||
Header of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||
<PropDescription>
|
||||
Footer of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||
<PropDescription>
|
||||
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 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
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `type` <small>TEXT</small> _Type_
|
||||
|
||||
Type: slider (default) or inside (allows to zoom with the mousewheel or a pinch gesture)
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `slider` | Slider |
|
||||
| `inside` | Inside |
|
||||
|
||||
|
||||
- `show` <small>BOOLEAN</small> _Show_
|
||||
|
||||
Whether to show or not this component
|
||||
|
||||
- `orient` <small>TEXT</small> _Orientation_
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `horizontal` | Horizontal |
|
||||
| `vertical` | Vertical |
|
||||
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="type" label="Type" required="true">
|
||||
<PropDescription>
|
||||
Type: slider (default) or inside (allows to zoom with the mousewheel or a pinch gesture)
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="slider" label="Slider" />
|
||||
<PropOption value="inside" label="Inside" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<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>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Position
|
||||
|
||||
Applicable only to slider types
|
||||
<div class="props">
|
||||
<PropGroup name="position" label="Position">
|
||||
Applicable only to slider types
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `show` <small>BOOLEAN</small> _Show_
|
||||
|
||||
- `containLabel` <small>BOOLEAN</small> _Contain label_
|
||||
|
||||
Whether the grid region contains the axis tick labels
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="containLabel" label="Contain label">
|
||||
<PropDescription>
|
||||
Whether the grid region contains the axis tick labels
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `show` <small>BOOLEAN</small> _Show_
|
||||
|
||||
Whether to show or not this component
|
||||
|
||||
- `orient` <small>TEXT</small> _Orientation_
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `horizontal` | Horizontal |
|
||||
| `vertical` | Vertical |
|
||||
|
||||
### 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>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
description: Visualize historical series
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
Visualize historical series
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `chartType` <small>TEXT</small> _Chart Type_
|
||||
|
||||
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
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `(empty)` | Dynamic period |
|
||||
| `day` | Day |
|
||||
| `isoWeek` | Week (starting on Monday) |
|
||||
| `week` | Week (starting on Sunday) |
|
||||
| `month` | Month |
|
||||
| `year` | Year |
|
||||
|
||||
|
||||
- `period` <small>TEXT</small> _Initial Period_
|
||||
|
||||
The initial period for the chart
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `h` | h |
|
||||
| `2h` | 2h |
|
||||
| `4h` | 4h |
|
||||
| `12h` | 12h |
|
||||
| `D` | D |
|
||||
| `2D` | 2D |
|
||||
| `3D` | 3D |
|
||||
| `W` | W |
|
||||
| `2W` | 2W |
|
||||
| `M` | M |
|
||||
| `2M` | 2M |
|
||||
| `4M` | 4M |
|
||||
| `6M` | 6M |
|
||||
| `Y` | Y |
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="chartType" label="Chart Type" required="true">
|
||||
<PropDescription>
|
||||
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>
|
||||
<PropOptions>
|
||||
<PropOption value="(empty)" label="Dynamic period" />
|
||||
<PropOption value="day" label="Day" />
|
||||
<PropOption value="isoWeek" label="Week (starting on Monday)" />
|
||||
<PropOption value="week" label="Week (starting on Sunday)" />
|
||||
<PropOption value="month" label="Month" />
|
||||
<PropOption value="year" label="Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="period" label="Initial Period">
|
||||
<PropDescription>
|
||||
The initial period for the chart
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="h" label="h" />
|
||||
<PropOption value="2h" label="2h" />
|
||||
<PropOption value="4h" label="4h" />
|
||||
<PropOption value="12h" label="12h" />
|
||||
<PropOption value="D" label="D" />
|
||||
<PropOption value="2D" label="2D" />
|
||||
<PropOption value="3D" label="3D" />
|
||||
<PropOption value="W" label="W" />
|
||||
<PropOption value="2W" label="2W" />
|
||||
<PropOption value="M" label="M" />
|
||||
<PropOption value="2M" label="2M" />
|
||||
<PropOption value="4M" label="4M" />
|
||||
<PropOption value="6M" label="6M" />
|
||||
<PropOption value="Y" label="Y" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `show` <small>BOOLEAN</small> _Show_
|
||||
|
||||
Whether to show or not this component
|
||||
|
||||
- `text` <small>TEXT</small> _Title_
|
||||
|
||||
- `subtext` <small>TEXT</small> _Subtitle_
|
||||
### 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="text" label="Title">
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtext" label="Subtitle">
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `show` <small>BOOLEAN</small> _Show_
|
||||
|
||||
Whether to show or not this component
|
||||
|
||||
- `presetFeatures` <small>TEXT</small> _Features_
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `saveAsImage` | Save as Image |
|
||||
| `restore` | Restore |
|
||||
| `dataView` | Data Table |
|
||||
| `dataZoom` | Drag Range to Zoom |
|
||||
| `magicType` | Change Chart Type |
|
||||
|
||||
Multiple options are allowed.
|
||||
|
||||
### 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="presetFeatures" label="Features" required="true">
|
||||
<PropOptions multiple="true">
|
||||
<PropOption value="saveAsImage" label="Save as Image" />
|
||||
<PropOption value="restore" label="Restore" />
|
||||
<PropOption value="dataView" label="Data Table" />
|
||||
<PropOption value="dataZoom" label="Drag Range to Zoom" />
|
||||
<PropOption value="magicType" label="Change Chart Type" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `show` <small>BOOLEAN</small> _Show_
|
||||
|
||||
Whether to show or not this component
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="BOOLEAN" name="show" label="Show">
|
||||
<PropDescription>
|
||||
Whether to show or not this component
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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>
|
||||
|
||||
|
||||
- `min` <small>TEXT</small> _Min_
|
||||
|
||||
Minimum boundary
|
||||
|
||||
- `max` <small>TEXT</small> _Max_
|
||||
|
||||
Maximum boundary
|
||||
<div class="props">
|
||||
<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">
|
||||
<PropDescription>
|
||||
Minimum boundary
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="max" label="Max">
|
||||
<PropDescription>
|
||||
Maximum boundary
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Appearance
|
||||
|
||||
|
||||
- `type` <small>TEXT</small> _Type_
|
||||
|
||||
Type of visual map - continuous or piecewise
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `continuous` | Continuous |
|
||||
| `piecewise` | Piecewise |
|
||||
|
||||
|
||||
- `orient` <small>TEXT</small> _Orientation_
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `horizontal` | Horizontal |
|
||||
| `vertical` | Vertical |
|
||||
|
||||
|
||||
- `calculable` <small>BOOLEAN</small> _Show handles_
|
||||
|
||||
Show handles to filter data in continuous mode
|
||||
|
||||
- `pieces` <small>INTEGER</small> _Number of pieces_
|
||||
|
||||
Number of pieces in piecewise mode
|
||||
|
||||
- `presetPalette` <small>TEXT</small> _Preset color palette_
|
||||
|
||||
Choose from a selection of preset color palettes for the values in range. The default is a yellow (low) to red (high) gradient
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `greenred` | Green-Yellow-Red |
|
||||
| `whiteblue` | White-Blue |
|
||||
| `bluered` | Blue-red |
|
||||
|
||||
<div class="props">
|
||||
<PropGroup name="appearanceGroup" label="Appearance">
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
Type of visual map - continuous or piecewise
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="continuous" label="Continuous" />
|
||||
<PropOption value="piecewise" label="Piecewise" />
|
||||
</PropOptions>
|
||||
</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="calculable" label="Show handles">
|
||||
<PropDescription>
|
||||
Show handles to filter data in continuous mode
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="pieces" label="Number of pieces">
|
||||
<PropDescription>
|
||||
Number of pieces in piecewise mode
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="presetPalette" label="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
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="greenred" label="Green-Yellow-Red" />
|
||||
<PropOption value="whiteblue" label="White-Blue" />
|
||||
<PropOption value="bluered" label="Blue-red" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
description: Visualize series of data
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
Visualize series of data
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `chartType` <small>TEXT</small> _Chart Type_
|
||||
|
||||
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
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `(empty)` | Dynamic period |
|
||||
| `day` | Day |
|
||||
| `isoWeek` | Week (starting on Monday) |
|
||||
| `week` | Week (starting on Sunday) |
|
||||
| `month` | Month |
|
||||
| `year` | Year |
|
||||
|
||||
|
||||
- `period` <small>TEXT</small> _Initial Period_
|
||||
|
||||
The initial period for the chart
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `h` | h |
|
||||
| `2h` | 2h |
|
||||
| `4h` | 4h |
|
||||
| `12h` | 12h |
|
||||
| `D` | D |
|
||||
| `2D` | 2D |
|
||||
| `3D` | 3D |
|
||||
| `W` | W |
|
||||
| `2W` | 2W |
|
||||
| `M` | M |
|
||||
| `2M` | 2M |
|
||||
| `4M` | 4M |
|
||||
| `6M` | 6M |
|
||||
| `Y` | Y |
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="chartType" label="Chart Type" required="true">
|
||||
<PropDescription>
|
||||
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>
|
||||
<PropOptions>
|
||||
<PropOption value="(empty)" label="Dynamic period" />
|
||||
<PropOption value="day" label="Day" />
|
||||
<PropOption value="isoWeek" label="Week (starting on Monday)" />
|
||||
<PropOption value="week" label="Week (starting on Sunday)" />
|
||||
<PropOption value="month" label="Month" />
|
||||
<PropOption value="year" label="Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="period" label="Initial Period">
|
||||
<PropDescription>
|
||||
The initial period for the chart
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="h" label="h" />
|
||||
<PropOption value="2h" label="2h" />
|
||||
<PropOption value="4h" label="4h" />
|
||||
<PropOption value="12h" label="12h" />
|
||||
<PropOption value="D" label="D" />
|
||||
<PropOption value="2D" label="2D" />
|
||||
<PropOption value="3D" label="3D" />
|
||||
<PropOption value="W" label="W" />
|
||||
<PropOption value="2W" label="2W" />
|
||||
<PropOption value="M" label="M" />
|
||||
<PropOption value="2M" label="2M" />
|
||||
<PropOption value="4M" label="4M" />
|
||||
<PropOption value="6M" label="6M" />
|
||||
<PropOption value="Y" label="Y" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a digital clock in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Clock
|
||||
|
||||
|
||||
- `timeFormat` <small>TEXT</small> _Time Format_
|
||||
|
||||
Time format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `LTS` | Localized time including seconds ('LTS', e.g. '8:02:18 PM') |
|
||||
| `LT` | Localized time ('LT'. e.g. '8:02 PM') |
|
||||
| `HH:mm:ss` | Current time ('HH:mm:ss') |
|
||||
|
||||
|
||||
- `background` <small>TEXT</small> _Background style_
|
||||
|
||||
Background style (in CSS "background" attribute format)
|
||||
|
||||
- `timeFontSize` <small>TEXT</small> _Time Font Size_
|
||||
|
||||
Time font size (e.g. "34px")
|
||||
|
||||
- `timeFontWeight` <small>TEXT</small> _Time Font Weight_
|
||||
|
||||
Time font weight (e.g. "normal" or "bold")
|
||||
|
||||
- `showDate` <small>BOOLEAN</small> _Show the date_
|
||||
|
||||
Show the current date in addition to the time
|
||||
|
||||
- `dateFormat` <small>TEXT</small> _Date Format_
|
||||
|
||||
Date format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `LL` | Localized long date ('LL', e.g. 'August 16, 2018') |
|
||||
| `L` | Localized short date ('L', e.g. '08/16/2018') |
|
||||
| `MM/DD/YYYY` | Current date ('MM/DD/YYYY') |
|
||||
|
||||
|
||||
- `datePos` <small>TEXT</small> _Date Position_
|
||||
|
||||
Where to show the date
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `above` | Above time |
|
||||
| `below` | Below time |
|
||||
|
||||
|
||||
- `dateFontSize` <small>TEXT</small> _Date Font Size_
|
||||
|
||||
Date font size (e.g. "34px")
|
||||
|
||||
- `dateFontWeight` <small>TEXT</small> _Date Font Weight_
|
||||
|
||||
Date font weight (e.g. "normal" or "bold")
|
||||
<div class="props">
|
||||
<PropGroup name="clock" label="Clock">
|
||||
<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>
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="LTS" label="Localized time including seconds ('LTS', e.g. '8:02:18 PM')" />
|
||||
<PropOption value="LT" label="Localized time ('LT'. e.g. '8:02 PM')" />
|
||||
<PropOption value="HH:mm:ss" label="Current time ('HH:mm:ss')" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="background" label="Background style">
|
||||
<PropDescription>
|
||||
Background style (in CSS "background" attribute format)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="timeFontSize" label="Time Font Size">
|
||||
<PropDescription>
|
||||
Time font size (e.g. "34px")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="timeFontWeight" label="Time Font Weight">
|
||||
<PropDescription>
|
||||
Time font weight (e.g. "normal" or "bold")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="showDate" label="Show the date">
|
||||
<PropDescription>
|
||||
Show the current date in addition to the time
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="dateFormat" label="Date Format">
|
||||
<PropDescription>
|
||||
Date format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<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')" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="datePos" label="Date Position">
|
||||
<PropDescription>
|
||||
Where to show the date
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="above" label="Above time" />
|
||||
<PropOption value="below" label="Below time" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="dateFontSize" label="Date Font Size">
|
||||
<PropDescription>
|
||||
Date font size (e.g. "34px")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="dateFontWeight" label="Date Font Weight">
|
||||
<PropDescription>
|
||||
Date font weight (e.g. "normal" or "bold")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a color picker in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Color picker
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Item to control
|
||||
|
||||
- `modules` <small>TEXT</small> _Modules_
|
||||
|
||||
Modules to display
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `wheel` | Color wheel |
|
||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
||||
| `hue-slider` | Hue slider |
|
||||
| `hs-spectrum` | Hue/saturation spectrum |
|
||||
| `brightness-slider` | Brightness spectrum |
|
||||
| `rgb-sliders` | RGB sliders |
|
||||
| `hsb-sliders` | HSB sliders |
|
||||
| `rgb-bars` | RGB bars |
|
||||
| `palette` | Palette |
|
||||
| `current-color` | Current color |
|
||||
| `initial-current-colors` | Initial current colors |
|
||||
|
||||
Multiple options are allowed.
|
||||
<div class="props">
|
||||
<PropGroup name="colorpicker" label="Color picker">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Item to control
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="modules" label="Modules">
|
||||
<PropDescription>
|
||||
Modules to display
|
||||
</PropDescription>
|
||||
<PropOptions multiple="true">
|
||||
<PropOption value="wheel" label="Color wheel" />
|
||||
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||
<PropOption value="hue-slider" label="Hue slider" />
|
||||
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||
<PropOption value="rgb-bars" label="RGB bars" />
|
||||
<PropOption value="palette" label="Palette" />
|
||||
<PropOption value="current-color" label="Current color" />
|
||||
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A cell expanding to a color picker
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Cell
|
||||
|
||||
General settings of the cell
|
||||
|
||||
|
||||
- `header` <small>TEXT</small> _Header_
|
||||
|
||||
Header of the cell
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the cell
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the cell
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer_
|
||||
|
||||
Footer of the cell
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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` <small>TEXT</small> _Highlight Color_
|
||||
|
||||
Color to use when highlighted
|
||||
|
||||
- `on` <small>TEXT</small> _"On" expression_
|
||||
|
||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||
<div class="props">
|
||||
<PropGroup name="cell" label="Cell">
|
||||
General settings of the cell
|
||||
<PropBlock type="TEXT" name="header" label="Header">
|
||||
<PropDescription>
|
||||
Header of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||
<PropDescription>
|
||||
Footer of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||
<PropDescription>
|
||||
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
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Item to control
|
||||
|
||||
- `modules` <small>TEXT</small> _Modules_
|
||||
|
||||
Modules to display
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `wheel` | Color wheel |
|
||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
||||
| `hue-slider` | Hue slider |
|
||||
| `hs-spectrum` | Hue/saturation spectrum |
|
||||
| `brightness-slider` | Brightness spectrum |
|
||||
| `rgb-sliders` | RGB sliders |
|
||||
| `hsb-sliders` | HSB sliders |
|
||||
| `rgb-bars` | RGB bars |
|
||||
| `palette` | Palette |
|
||||
| `current-color` | Current color |
|
||||
| `initial-current-colors` | Initial current colors |
|
||||
|
||||
Multiple options are allowed.
|
||||
|
||||
<div class="props">
|
||||
<PropGroup name="colorpicker" label="Color Picker">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Item to control
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="modules" label="Modules">
|
||||
<PropDescription>
|
||||
Modules to display
|
||||
</PropDescription>
|
||||
<PropOptions multiple="true">
|
||||
<PropOption value="wheel" label="Color wheel" />
|
||||
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||
<PropOption value="hue-slider" label="Hue slider" />
|
||||
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||
<PropOption value="rgb-bars" label="RGB bars" />
|
||||
<PropOption value="palette" label="Palette" />
|
||||
<PropOption value="current-color" label="Current color" />
|
||||
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a color picker in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Item to control
|
||||
|
||||
- `modules` <small>TEXT</small> _Modules_
|
||||
|
||||
Modules to display
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `wheel` | Color wheel |
|
||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
||||
| `hue-slider` | Hue slider |
|
||||
| `hs-spectrum` | Hue/saturation spectrum |
|
||||
| `brightness-slider` | Brightness spectrum |
|
||||
| `rgb-sliders` | RGB sliders |
|
||||
| `hsb-sliders` | HSB sliders |
|
||||
| `rgb-bars` | RGB bars |
|
||||
| `palette` | Palette |
|
||||
| `current-color` | Current color |
|
||||
| `initial-current-colors` | Initial current colors |
|
||||
|
||||
Multiple options are allowed.
|
||||
<div class="props">
|
||||
<PropGroup name="colorpicker" label="Color picker">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Item to control
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="modules" label="Modules">
|
||||
<PropDescription>
|
||||
Modules to display
|
||||
</PropDescription>
|
||||
<PropOptions multiple="true">
|
||||
<PropOption value="wheel" label="Color wheel" />
|
||||
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||
<PropOption value="hue-slider" label="Hue slider" />
|
||||
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||
<PropOption value="rgb-bars" label="RGB bars" />
|
||||
<PropOption value="palette" label="Palette" />
|
||||
<PropOption value="current-color" label="Current color" />
|
||||
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
description: Control to pick a color
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
Control to pick a color
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Item to control
|
||||
|
||||
- `modules` <small>TEXT</small> _Modules_
|
||||
|
||||
Modules to display
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `wheel` | Color wheel |
|
||||
| `sb-spectrum` | Saturation/brightness spectrum |
|
||||
| `hue-slider` | Hue slider |
|
||||
| `hs-spectrum` | Hue/saturation spectrum |
|
||||
| `brightness-slider` | Brightness spectrum |
|
||||
| `rgb-sliders` | RGB sliders |
|
||||
| `hsb-sliders` | HSB sliders |
|
||||
| `rgb-bars` | RGB bars |
|
||||
| `palette` | Palette |
|
||||
| `current-color` | Current color |
|
||||
| `initial-current-colors` | Initial current colors |
|
||||
|
||||
Multiple options are allowed.
|
||||
### 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="modules" label="Modules">
|
||||
<PropDescription>
|
||||
Modules to display
|
||||
</PropDescription>
|
||||
<PropOptions multiple="true">
|
||||
<PropOption value="wheel" label="Color wheel" />
|
||||
<PropOption value="sb-spectrum" label="Saturation/brightness spectrum" />
|
||||
<PropOption value="hue-slider" label="Hue slider" />
|
||||
<PropOption value="hs-spectrum" label="Hue/saturation spectrum" />
|
||||
<PropOption value="brightness-slider" label="Brightness spectrum" />
|
||||
<PropOption value="rgb-sliders" label="RGB sliders" />
|
||||
<PropOption value="hsb-sliders" label="HSB sliders" />
|
||||
<PropOption value="rgb-bars" label="RGB bars" />
|
||||
<PropOption value="palette" label="Palette" />
|
||||
<PropOption value="current-color" label="Current color" />
|
||||
<PropOption value="initial-current-colors" label="Initial current colors" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `type` <small>TEXT</small> _Type_
|
||||
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `gauge` | undefined |
|
||||
| `pie` | undefined |
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="gauge" label="undefined" />
|
||||
<PropOption value="pie" label="undefined" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A card showing model items belonging to a certain equipment class
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a read-only gauge in a card to visualize a quantifiable item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Circular or semi-circular read-only gauge
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A column in a grid layout
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `width` <small>TEXT</small> _Width_
|
||||
|
||||
Standard Width
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `5` | 5 % |
|
||||
| `10` | 10 % |
|
||||
| `15` | 15 % |
|
||||
| `20` | 20 % |
|
||||
| `25` | 25 % |
|
||||
| `30` | 30 % |
|
||||
| `33` | 33 % |
|
||||
| `35` | 35 % |
|
||||
| `40` | 40 % |
|
||||
| `45` | 45 % |
|
||||
| `50` | 50 % |
|
||||
| `55` | 55 % |
|
||||
| `60` | 60 % |
|
||||
| `65` | 65 % |
|
||||
| `66` | 66 % |
|
||||
| `70` | 70 % |
|
||||
| `75` | 75 % |
|
||||
| `80` | 80 % |
|
||||
| `85` | 85 % |
|
||||
| `90` | 90 % |
|
||||
| `95` | 95 % |
|
||||
| `100` | 100 % |
|
||||
|
||||
|
||||
- `xsmall` <small>TEXT</small> _Width (XS)_
|
||||
|
||||
Column width when app width >= 480px
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `5` | 5 % |
|
||||
| `10` | 10 % |
|
||||
| `15` | 15 % |
|
||||
| `20` | 20 % |
|
||||
| `25` | 25 % |
|
||||
| `30` | 30 % |
|
||||
| `33` | 33 % |
|
||||
| `35` | 35 % |
|
||||
| `40` | 40 % |
|
||||
| `45` | 45 % |
|
||||
| `50` | 50 % |
|
||||
| `55` | 55 % |
|
||||
| `60` | 60 % |
|
||||
| `65` | 65 % |
|
||||
| `66` | 66 % |
|
||||
| `70` | 70 % |
|
||||
| `75` | 75 % |
|
||||
| `80` | 80 % |
|
||||
| `85` | 85 % |
|
||||
| `90` | 90 % |
|
||||
| `95` | 95 % |
|
||||
| `100` | 100 % |
|
||||
|
||||
|
||||
- `small` <small>TEXT</small> _Width (S)_
|
||||
|
||||
Column width when app width >= 568px
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `5` | 5 % |
|
||||
| `10` | 10 % |
|
||||
| `15` | 15 % |
|
||||
| `20` | 20 % |
|
||||
| `25` | 25 % |
|
||||
| `30` | 30 % |
|
||||
| `33` | 33 % |
|
||||
| `35` | 35 % |
|
||||
| `40` | 40 % |
|
||||
| `45` | 45 % |
|
||||
| `50` | 50 % |
|
||||
| `55` | 55 % |
|
||||
| `60` | 60 % |
|
||||
| `65` | 65 % |
|
||||
| `66` | 66 % |
|
||||
| `70` | 70 % |
|
||||
| `75` | 75 % |
|
||||
| `80` | 80 % |
|
||||
| `85` | 85 % |
|
||||
| `90` | 90 % |
|
||||
| `95` | 95 % |
|
||||
| `100` | 100 % |
|
||||
|
||||
|
||||
- `medium` <small>TEXT</small> _Width (M)_
|
||||
|
||||
Column width when app width >= 720px
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `5` | 5 % |
|
||||
| `10` | 10 % |
|
||||
| `15` | 15 % |
|
||||
| `20` | 20 % |
|
||||
| `25` | 25 % |
|
||||
| `30` | 30 % |
|
||||
| `33` | 33 % |
|
||||
| `35` | 35 % |
|
||||
| `40` | 40 % |
|
||||
| `45` | 45 % |
|
||||
| `50` | 50 % |
|
||||
| `55` | 55 % |
|
||||
| `60` | 60 % |
|
||||
| `65` | 65 % |
|
||||
| `66` | 66 % |
|
||||
| `70` | 70 % |
|
||||
| `75` | 75 % |
|
||||
| `80` | 80 % |
|
||||
| `85` | 85 % |
|
||||
| `90` | 90 % |
|
||||
| `95` | 95 % |
|
||||
| `100` | 100 % |
|
||||
|
||||
|
||||
- `large` <small>TEXT</small> _Width (L)_
|
||||
|
||||
Column width when app width >= 1024px
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `5` | 5 % |
|
||||
| `10` | 10 % |
|
||||
| `15` | 15 % |
|
||||
| `20` | 20 % |
|
||||
| `25` | 25 % |
|
||||
| `30` | 30 % |
|
||||
| `33` | 33 % |
|
||||
| `35` | 35 % |
|
||||
| `40` | 40 % |
|
||||
| `45` | 45 % |
|
||||
| `50` | 50 % |
|
||||
| `55` | 55 % |
|
||||
| `60` | 60 % |
|
||||
| `65` | 65 % |
|
||||
| `66` | 66 % |
|
||||
| `70` | 70 % |
|
||||
| `75` | 75 % |
|
||||
| `80` | 80 % |
|
||||
| `85` | 85 % |
|
||||
| `90` | 90 % |
|
||||
| `95` | 95 % |
|
||||
| `100` | 100 % |
|
||||
|
||||
|
||||
- `xlarge` <small>TEXT</small> _Width (XL)_
|
||||
|
||||
Column width when app width >= 1200px
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `5` | 5 % |
|
||||
| `10` | 10 % |
|
||||
| `15` | 15 % |
|
||||
| `20` | 20 % |
|
||||
| `25` | 25 % |
|
||||
| `30` | 30 % |
|
||||
| `33` | 33 % |
|
||||
| `35` | 35 % |
|
||||
| `40` | 40 % |
|
||||
| `45` | 45 % |
|
||||
| `50` | 50 % |
|
||||
| `55` | 55 % |
|
||||
| `60` | 60 % |
|
||||
| `65` | 65 % |
|
||||
| `66` | 66 % |
|
||||
| `70` | 70 % |
|
||||
| `75` | 75 % |
|
||||
| `80` | 80 % |
|
||||
| `85` | 85 % |
|
||||
| `90` | 90 % |
|
||||
| `95` | 95 % |
|
||||
| `100` | 100 % |
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="width" label="Width">
|
||||
<PropDescription>
|
||||
Standard Width
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="5" label="5 %" />
|
||||
<PropOption value="10" label="10 %" />
|
||||
<PropOption value="15" label="15 %" />
|
||||
<PropOption value="20" label="20 %" />
|
||||
<PropOption value="25" label="25 %" />
|
||||
<PropOption value="30" label="30 %" />
|
||||
<PropOption value="33" label="33 %" />
|
||||
<PropOption value="35" label="35 %" />
|
||||
<PropOption value="40" label="40 %" />
|
||||
<PropOption value="45" label="45 %" />
|
||||
<PropOption value="50" label="50 %" />
|
||||
<PropOption value="55" label="55 %" />
|
||||
<PropOption value="60" label="60 %" />
|
||||
<PropOption value="65" label="65 %" />
|
||||
<PropOption value="66" label="66 %" />
|
||||
<PropOption value="70" label="70 %" />
|
||||
<PropOption value="75" label="75 %" />
|
||||
<PropOption value="80" label="80 %" />
|
||||
<PropOption value="85" label="85 %" />
|
||||
<PropOption value="90" label="90 %" />
|
||||
<PropOption value="95" label="95 %" />
|
||||
<PropOption value="100" label="100 %" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="xsmall" label="Width (XS)">
|
||||
<PropDescription>
|
||||
Column width when app width >= 480px
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="5" label="5 %" />
|
||||
<PropOption value="10" label="10 %" />
|
||||
<PropOption value="15" label="15 %" />
|
||||
<PropOption value="20" label="20 %" />
|
||||
<PropOption value="25" label="25 %" />
|
||||
<PropOption value="30" label="30 %" />
|
||||
<PropOption value="33" label="33 %" />
|
||||
<PropOption value="35" label="35 %" />
|
||||
<PropOption value="40" label="40 %" />
|
||||
<PropOption value="45" label="45 %" />
|
||||
<PropOption value="50" label="50 %" />
|
||||
<PropOption value="55" label="55 %" />
|
||||
<PropOption value="60" label="60 %" />
|
||||
<PropOption value="65" label="65 %" />
|
||||
<PropOption value="66" label="66 %" />
|
||||
<PropOption value="70" label="70 %" />
|
||||
<PropOption value="75" label="75 %" />
|
||||
<PropOption value="80" label="80 %" />
|
||||
<PropOption value="85" label="85 %" />
|
||||
<PropOption value="90" label="90 %" />
|
||||
<PropOption value="95" label="95 %" />
|
||||
<PropOption value="100" label="100 %" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="small" label="Width (S)">
|
||||
<PropDescription>
|
||||
Column width when app width >= 568px
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="5" label="5 %" />
|
||||
<PropOption value="10" label="10 %" />
|
||||
<PropOption value="15" label="15 %" />
|
||||
<PropOption value="20" label="20 %" />
|
||||
<PropOption value="25" label="25 %" />
|
||||
<PropOption value="30" label="30 %" />
|
||||
<PropOption value="33" label="33 %" />
|
||||
<PropOption value="35" label="35 %" />
|
||||
<PropOption value="40" label="40 %" />
|
||||
<PropOption value="45" label="45 %" />
|
||||
<PropOption value="50" label="50 %" />
|
||||
<PropOption value="55" label="55 %" />
|
||||
<PropOption value="60" label="60 %" />
|
||||
<PropOption value="65" label="65 %" />
|
||||
<PropOption value="66" label="66 %" />
|
||||
<PropOption value="70" label="70 %" />
|
||||
<PropOption value="75" label="75 %" />
|
||||
<PropOption value="80" label="80 %" />
|
||||
<PropOption value="85" label="85 %" />
|
||||
<PropOption value="90" label="90 %" />
|
||||
<PropOption value="95" label="95 %" />
|
||||
<PropOption value="100" label="100 %" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="medium" label="Width (M)">
|
||||
<PropDescription>
|
||||
Column width when app width >= 720px
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="5" label="5 %" />
|
||||
<PropOption value="10" label="10 %" />
|
||||
<PropOption value="15" label="15 %" />
|
||||
<PropOption value="20" label="20 %" />
|
||||
<PropOption value="25" label="25 %" />
|
||||
<PropOption value="30" label="30 %" />
|
||||
<PropOption value="33" label="33 %" />
|
||||
<PropOption value="35" label="35 %" />
|
||||
<PropOption value="40" label="40 %" />
|
||||
<PropOption value="45" label="45 %" />
|
||||
<PropOption value="50" label="50 %" />
|
||||
<PropOption value="55" label="55 %" />
|
||||
<PropOption value="60" label="60 %" />
|
||||
<PropOption value="65" label="65 %" />
|
||||
<PropOption value="66" label="66 %" />
|
||||
<PropOption value="70" label="70 %" />
|
||||
<PropOption value="75" label="75 %" />
|
||||
<PropOption value="80" label="80 %" />
|
||||
<PropOption value="85" label="85 %" />
|
||||
<PropOption value="90" label="90 %" />
|
||||
<PropOption value="95" label="95 %" />
|
||||
<PropOption value="100" label="100 %" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="large" label="Width (L)">
|
||||
<PropDescription>
|
||||
Column width when app width >= 1024px
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="5" label="5 %" />
|
||||
<PropOption value="10" label="10 %" />
|
||||
<PropOption value="15" label="15 %" />
|
||||
<PropOption value="20" label="20 %" />
|
||||
<PropOption value="25" label="25 %" />
|
||||
<PropOption value="30" label="30 %" />
|
||||
<PropOption value="33" label="33 %" />
|
||||
<PropOption value="35" label="35 %" />
|
||||
<PropOption value="40" label="40 %" />
|
||||
<PropOption value="45" label="45 %" />
|
||||
<PropOption value="50" label="50 %" />
|
||||
<PropOption value="55" label="55 %" />
|
||||
<PropOption value="60" label="60 %" />
|
||||
<PropOption value="65" label="65 %" />
|
||||
<PropOption value="66" label="66 %" />
|
||||
<PropOption value="70" label="70 %" />
|
||||
<PropOption value="75" label="75 %" />
|
||||
<PropOption value="80" label="80 %" />
|
||||
<PropOption value="85" label="85 %" />
|
||||
<PropOption value="90" label="90 %" />
|
||||
<PropOption value="95" label="95 %" />
|
||||
<PropOption value="100" label="100 %" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="xlarge" label="Width (XL)">
|
||||
<PropDescription>
|
||||
Column width when app width >= 1200px
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="5" label="5 %" />
|
||||
<PropOption value="10" label="10 %" />
|
||||
<PropOption value="15" label="15 %" />
|
||||
<PropOption value="20" label="20 %" />
|
||||
<PropOption value="25" label="25 %" />
|
||||
<PropOption value="30" label="30 %" />
|
||||
<PropOption value="33" label="33 %" />
|
||||
<PropOption value="35" label="35 %" />
|
||||
<PropOption value="40" label="40 %" />
|
||||
<PropOption value="45" label="45 %" />
|
||||
<PropOption value="50" label="50 %" />
|
||||
<PropOption value="55" label="55 %" />
|
||||
<PropOption value="60" label="60 %" />
|
||||
<PropOption value="65" label="65 %" />
|
||||
<PropOption value="66" label="66 %" />
|
||||
<PropOption value="70" label="70 %" />
|
||||
<PropOption value="75" label="75 %" />
|
||||
<PropOption value="80" label="80 %" />
|
||||
<PropOption value="85" label="85 %" />
|
||||
<PropOption value="90" label="90 %" />
|
||||
<PropOption value="95" label="95 %" />
|
||||
<PropOption value="100" label="100 %" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A row in a grid layout
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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
|
||||
description: Display an openHAB icon
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
Display an openHAB icon
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `icon` <small>BOOLEAN</small> _Icon_
|
||||
|
||||
<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>
|
||||
|
||||
- `width` <small>TEXT</small> _Width_
|
||||
|
||||
- `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
|
||||
|
||||
- `clearButton` <small>BOOLEAN</small> _Clear button_
|
||||
|
||||
Display input clear button
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Makes input outline
|
||||
|
||||
- `required` <small>BOOLEAN</small> _Required_
|
||||
|
||||
Display an error message if left empty
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Link the input value to the state of this item
|
||||
|
||||
- `value` <small>TEXT</small> _Value_
|
||||
|
||||
Value when not found in item state or variable
|
||||
|
||||
- `variable` <small>TEXT</small> _Variable_
|
||||
|
||||
Name of the variable to set when the input changes
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="BOOLEAN" name="icon" label="Icon">
|
||||
<PropDescription>
|
||||
<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="width" label="Width">
|
||||
</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="clearButton" label="Clear button">
|
||||
<PropDescription>
|
||||
Display input clear button
|
||||
</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="TEXT" name="item" label="Item">
|
||||
<PropDescription>
|
||||
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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display an image (URL or Image item ) in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Image
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Image item to show - preferred if the image changes
|
||||
|
||||
- `url` <small>TEXT</small> _URL_
|
||||
|
||||
URL to show (if item if not specified)
|
||||
|
||||
- `lazy` <small>BOOLEAN</small> _Lazy Load_
|
||||
|
||||
Load the image only when in view
|
||||
|
||||
- `lazyFadeIn` <small>BOOLEAN</small> _Lazy Load Fade-in_
|
||||
|
||||
Transition the image with a fade-in effect after it has loaded
|
||||
|
||||
- `refreshInterval` <small>INTEGER</small> _Refresh Interval_
|
||||
|
||||
Refresh interval in milliseconds
|
||||
<div class="props">
|
||||
<PropGroup name="image" label="Image">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Image item to show - preferred if the image changes
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="url" label="URL">
|
||||
<PropDescription>
|
||||
URL to show (if item if not specified)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="lazy" label="Lazy Load">
|
||||
<PropDescription>
|
||||
Load the image only when in view
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="lazyFadeIn" label="Lazy Load Fade-in">
|
||||
<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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Displays an image from a URL or an item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Image item to show - preferred if the image changes
|
||||
|
||||
- `url` <small>TEXT</small> _URL_
|
||||
|
||||
URL to show (if item if not specified)
|
||||
|
||||
- `lazy` <small>BOOLEAN</small> _Lazy Load_
|
||||
|
||||
Load the image only when in view
|
||||
|
||||
- `lazyFadeIn` <small>BOOLEAN</small> _Lazy Load Fade-in_
|
||||
|
||||
Transition the image with a fade-in effect after it has loaded
|
||||
|
||||
- `refreshInterval` <small>INTEGER</small> _Refresh Interval_
|
||||
|
||||
Refresh interval in milliseconds
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Image item to show - preferred if the image changes
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="url" label="URL">
|
||||
<PropDescription>
|
||||
URL to show (if item if not specified)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="lazy" label="Lazy Load">
|
||||
<PropDescription>
|
||||
Load the image only when in view
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="lazyFadeIn" label="Lazy Load Fade-in">
|
||||
<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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display an input in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display an input field in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Displays an input field, used to set a variable
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a knob in a card to visualize and control a quantifiable item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A cell expanding to a knob control
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Cell
|
||||
|
||||
General settings of the cell
|
||||
|
||||
|
||||
- `header` <small>TEXT</small> _Header_
|
||||
|
||||
Header of the cell
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the cell
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the cell
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer_
|
||||
|
||||
Footer of the cell
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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` <small>TEXT</small> _Highlight Color_
|
||||
|
||||
Color to use when highlighted
|
||||
|
||||
- `on` <small>TEXT</small> _"On" expression_
|
||||
|
||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||
<div class="props">
|
||||
<PropGroup name="cell" label="Cell">
|
||||
General settings of the cell
|
||||
<PropBlock type="TEXT" name="header" label="Header">
|
||||
<PropDescription>
|
||||
Header of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||
<PropDescription>
|
||||
Footer of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||
<PropDescription>
|
||||
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
|
||||
|
||||
|
||||
- `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
|
||||
<div class="props">
|
||||
<PropGroup name="knob" label="Knob">
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Knob control, allow to change a number value on a circular track
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display the state of an item in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Action
|
||||
|
||||
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
|
||||
<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>
|
||||
|
||||
### Label
|
||||
|
||||
Parameters of the label
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Item to display
|
||||
|
||||
- `label` <small>TEXT</small> _Label_
|
||||
|
||||
Display this text (or expression result) instead of the item's state
|
||||
|
||||
- `background` <small>TEXT</small> _Background style_
|
||||
|
||||
Background style (in CSS "background" attribute format)
|
||||
|
||||
- `fontSize` <small>TEXT</small> _Font Size_
|
||||
|
||||
Font size (e.g. "34px")
|
||||
|
||||
- `fontWeight` <small>TEXT</small> _Font Weight_
|
||||
|
||||
Font weight (e.g. "normal" or "bold")
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconSize` <small>INTEGER</small> _Icon Size_
|
||||
|
||||
Size of the icon in px
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
|
||||
- `vertical` <small>BOOLEAN</small> _Vertical arrangement_
|
||||
|
||||
Display label below icon
|
||||
<div class="props">
|
||||
<PropGroup name="label" label="Label">
|
||||
Parameters of the label
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Item to display
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="label" label="Label">
|
||||
<PropDescription>
|
||||
Display this text (or expression result) instead of the item's state
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="background" label="Background style">
|
||||
<PropDescription>
|
||||
Background style (in CSS "background" attribute format)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="fontSize" label="Font Size">
|
||||
<PropDescription>
|
||||
Font size (e.g. "34px")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="fontWeight" label="Font Weight">
|
||||
<PropDescription>
|
||||
Font weight (e.g. "normal" or "bold")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
|
||||
<PropDescription>
|
||||
Size of the icon in px
|
||||
</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>
|
||||
<PropBlock type="BOOLEAN" name="vertical" label="Vertical arrangement">
|
||||
<PropDescription>
|
||||
Display label below icon
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A cell with a big label to show a short item state value
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Cell
|
||||
|
||||
General settings of the cell
|
||||
|
||||
|
||||
- `header` <small>TEXT</small> _Header_
|
||||
|
||||
Header of the cell
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the cell
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the cell
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer_
|
||||
|
||||
Footer of the cell
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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` <small>TEXT</small> _Highlight Color_
|
||||
|
||||
Color to use when highlighted
|
||||
|
||||
- `on` <small>TEXT</small> _"On" expression_
|
||||
|
||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||
<div class="props">
|
||||
<PropGroup name="cell" label="Cell">
|
||||
General settings of the cell
|
||||
<PropBlock type="TEXT" name="header" label="Header">
|
||||
<PropDescription>
|
||||
Header of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||
<PropDescription>
|
||||
Footer of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||
<PropDescription>
|
||||
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
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Item to display
|
||||
|
||||
- `label` <small>TEXT</small> _Label_
|
||||
|
||||
Display this text (or expression result) instead of the item's state
|
||||
<div class="props">
|
||||
<PropGroup name="label" label="Label">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Item to display
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="label" label="Label">
|
||||
<PropDescription>
|
||||
Display this text (or expression result) instead of the item's state
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Action
|
||||
|
||||
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
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display the state of an item in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Item to display
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
Item to display
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
description: Link performing an action
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
Link performing an action
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `text` <small>TEXT</small> _Text_
|
||||
|
||||
Link label
|
||||
|
||||
- `iconF7` <small>TEXT</small> _Icon_
|
||||
|
||||
Framework7 icon to display (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||
|
||||
- `iconMaterial` <small>TEXT</small> _Icon_
|
||||
|
||||
Material design icon to display
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Color of the icon
|
||||
|
||||
- `iconSize` <small>INTEGER</small> _Icon Size_
|
||||
|
||||
Size of the icon in px
|
||||
|
||||
- `badge` <small>TEXT</small> _Badge_
|
||||
|
||||
Text to display in a badge on the opposite side of the item (set either this or "after")
|
||||
|
||||
- `badgeColor` <small>TEXT</small> _Badge color_
|
||||
|
||||
Color of the badge
|
||||
|
||||
- `tooltip` <small>TEXT</small> _Tooltip_
|
||||
|
||||
Button tooltip text to show on button hover/press
|
||||
|
||||
- `variable` <small>TEXT</small> _Variable_
|
||||
|
||||
Name of the variable to set on input change
|
||||
|
||||
- `clearVariable` <small>BOOLEAN</small> _Clear Variable After Action_
|
||||
|
||||
Name of the variable to clear after performing the action
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="text" label="Text">
|
||||
<PropDescription>
|
||||
Link label
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconF7" label="Icon">
|
||||
<PropDescription>
|
||||
Framework7 icon to display (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconMaterial" label="Icon">
|
||||
<PropDescription>
|
||||
Material design icon to display
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Color of the icon
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
|
||||
<PropDescription>
|
||||
Size of the icon in px
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="badgeColor" label="Badge color">
|
||||
<PropDescription>
|
||||
Color of the badge
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="tooltip" label="Tooltip">
|
||||
<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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a list in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
description: A list item
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
A list item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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 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
|
||||
<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>
|
||||
|
||||
### Badge
|
||||
|
||||
|
||||
- `badge` <small>TEXT</small> _Badge_
|
||||
|
||||
Text to display in a badge on the opposite side of the item (set either this or "after")
|
||||
|
||||
- `badgeColor` <small>TEXT</small> _Badge color_
|
||||
|
||||
Color of the badge
|
||||
<div class="props">
|
||||
<PropGroup name="badge" label="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")
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="badgeColor" label="Badge color">
|
||||
<PropDescription>
|
||||
Color of the badge
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
description: List control, hosts list items
|
||||
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
|
||||
|
||||
<!-- 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 -->
|
||||
List control, hosts list items
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A card showing model items in a certain location
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Model Card
|
||||
|
||||
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)
|
||||
<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>
|
||||
|
||||
### Card at-a-glance badges
|
||||
|
||||
|
||||
- `disableBadges` <small>BOOLEAN</small> _Disable badges_
|
||||
|
||||
Do not examine items to display badges - can help with performance if you don't need them.
|
||||
|
||||
- `badges` <small>TEXT</small> _Enabled badges_
|
||||
|
||||
Select the badges you wish to show in the header of the card. Display all if none are selected.
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `lights` | Lights On |
|
||||
| `windows` | Open Windows |
|
||||
| `doors` | Open Doors |
|
||||
| `garagedoors` | Open Garage Doors |
|
||||
| `blinds` | Open Blinds |
|
||||
| `presence` | Presence Detected |
|
||||
| `lock` | Locks |
|
||||
| `climate` | Climate Control Powered On |
|
||||
| `screens` | Screens Powered On |
|
||||
| `projectors` | Projectors Powered On |
|
||||
| `speakers` | Speakers/AV Receivers Powered On |
|
||||
| `temperature` | Average Temperature (+ Setpoint) |
|
||||
| `humidity` | Average Humidity |
|
||||
| `luminance` | Average Luminance |
|
||||
|
||||
Multiple options are allowed.
|
||||
<div class="props">
|
||||
<PropGroup name="glance" label="Card at-a-glance 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.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="badges" label="Enabled badges">
|
||||
<PropDescription>
|
||||
Select the badges you wish to show in the header of the card. Display all if none are selected.
|
||||
</PropDescription>
|
||||
<PropOptions multiple="true">
|
||||
<PropOption value="lights" label="Lights On" />
|
||||
<PropOption value="windows" label="Open Windows" />
|
||||
<PropOption value="doors" label="Open Doors" />
|
||||
<PropOption value="garagedoors" label="Open Garage Doors" />
|
||||
<PropOption value="blinds" label="Open Blinds" />
|
||||
<PropOption value="presence" label="Presence Detected" />
|
||||
<PropOption value="lock" label="Locks" />
|
||||
<PropOption value="climate" label="Climate Control Powered On" />
|
||||
<PropOption value="screens" label="Screens Powered On" />
|
||||
<PropOption value="projectors" label="Projectors Powered On" />
|
||||
<PropOption value="speakers" label="Speakers/AV Receivers Powered On" />
|
||||
<PropOption value="temperature" label="Average Temperature (+ Setpoint)" />
|
||||
<PropOption value="humidity" label="Average Humidity" />
|
||||
<PropOption value="luminance" label="Average Luminance" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A circle on a map, to represent a radius
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Marker
|
||||
|
||||
General marker settings
|
||||
|
||||
|
||||
- `label` <small>TEXT</small> _Label_
|
||||
|
||||
The label on the marker
|
||||
|
||||
- `color` <small>TEXT</small> _Circle color_
|
||||
|
||||
The color of the circle (e.g. "blue", "red", "yellow"...)
|
||||
<div class="props">
|
||||
<PropGroup name="marker" label="Marker">
|
||||
General marker settings
|
||||
<PropBlock type="TEXT" name="label" label="Label">
|
||||
<PropDescription>
|
||||
The label on the marker
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="color" label="Circle color">
|
||||
<PropDescription>
|
||||
The color of the circle (e.g. "blue", "red", "yellow"...)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Center Position
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
The Location item this marker will be centered on
|
||||
|
||||
- `location` <small>TEXT</small> _Fixed location_
|
||||
|
||||
The fixed position of the marker if no item is configured or its coordinates are invalid
|
||||
<div class="props">
|
||||
<PropGroup name="position" label="Center Position">
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
The Location item this marker will be centered on
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Radius
|
||||
|
||||
Radius of the circle
|
||||
|
||||
|
||||
- `radiusItem` <small>TEXT</small> _Radius Item_
|
||||
|
||||
The item whose state holds the radius of the circle, in meters
|
||||
|
||||
- `radius` <small>DECIMAL</small> _Fixed radius_
|
||||
|
||||
The fixed radius of the circle in meters if no item is configured or its state is invalid
|
||||
<div class="props">
|
||||
<PropGroup name="radius" label="Radius">
|
||||
Radius of the circle
|
||||
<PropBlock type="TEXT" name="radiusItem" label="Radius Item" context="item">
|
||||
<PropDescription>
|
||||
The item whose state holds the radius of the circle, in meters
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
An icon on a map
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Marker
|
||||
|
||||
General marker settings
|
||||
|
||||
|
||||
- `label` <small>TEXT</small> _Label_
|
||||
|
||||
The label on the marker
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>)
|
||||
<div class="props">
|
||||
<PropGroup name="marker" label="Marker">
|
||||
General marker settings
|
||||
<PropBlock type="TEXT" name="label" label="Label">
|
||||
<PropDescription>
|
||||
The label on the marker
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Position
|
||||
|
||||
Position
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
The Location item this marker will be centered on
|
||||
|
||||
- `location` <small>TEXT</small> _Fixed location_
|
||||
|
||||
The fixed position of the marker if no item is configured or its coordinates are invalid
|
||||
<div class="props">
|
||||
<PropGroup name="position" label="Position">
|
||||
Position
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
The Location item this marker will be centered on
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Displays markers on a map
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Arranges widgets automatically depending on the screen size
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `flavor` <small>TEXT</small> _Flavor_
|
||||
|
||||
Choose the implementation of the masonry layout
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `vue-masonry-css` | vue-masonry-css |
|
||||
| `css-grid` | CSS Grid (no library) |
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="flavor" label="Flavor">
|
||||
<PropDescription>
|
||||
Choose the implementation of the masonry layout
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="vue-masonry-css" label="vue-masonry-css" />
|
||||
<PropOption value="css-grid" label="CSS Grid (no library)" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A marker on a floor plan
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Marker Settings
|
||||
|
||||
|
||||
- `name` <small>TEXT</small> _Name_
|
||||
|
||||
The name of the marker (for identification)
|
||||
|
||||
- `coords` <small>TEXT</small> _Coordinates_
|
||||
|
||||
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_
|
||||
|
||||
The item whose state to display on this marker
|
||||
<div class="props">
|
||||
<PropGroup name="marker" label="Marker Settings">
|
||||
<PropBlock type="TEXT" name="name" label="Name">
|
||||
<PropDescription>
|
||||
The name of the marker (for identification)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="coords" label="Coordinates">
|
||||
<PropDescription>
|
||||
The coordinates of this marker in the floor plan Coordinate Reference System; usually set by dragging the marker at design time
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
|
||||
- `iconSize` <small>INTEGER</small> _Icon Size_
|
||||
|
||||
Size of the icon in pixels (40 by default)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Color of the icon (for Framework7/Material icons); use expression for dynamic colors
|
||||
<div class="props">
|
||||
<PropGroup name="icon" label="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>)
|
||||
</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>
|
||||
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
|
||||
<PropDescription>
|
||||
Size of the icon in pixels (40 by default)
|
||||
</PropDescription>
|
||||
</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
|
||||
|
||||
You can customize the styles further with CSS attributes in the <code>tooltipStyle</code> parameter (in YAML only)
|
||||
|
||||
|
||||
- `tooltip` <small>TEXT</small> _Tooltip Text_
|
||||
|
||||
The tooltip text - leave blank to display the state of the item
|
||||
|
||||
- `tooltipPermanent` <small>BOOLEAN</small> _Always display the tooltip_
|
||||
|
||||
- `useTooltipAsLabel` <small>BOOLEAN</small> _Use Tooltip as Label_
|
||||
|
||||
Put the tooltip text directly over the plan instead of displaying an icon
|
||||
|
||||
- `tooltipFontSize` <small>TEXT</small> _Tooltip Font Size_
|
||||
|
||||
Font size of the tooltip text
|
||||
|
||||
- `tooltipColor` <small>TEXT</small> _Tooltip color_
|
||||
|
||||
Color of the tooltip
|
||||
<div class="props">
|
||||
<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">
|
||||
<PropDescription>
|
||||
The tooltip text - leave blank to display the state of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="tooltipPermanent" label="Always display the tooltip">
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="useTooltipAsLabel" label="Use Tooltip as Label">
|
||||
<PropDescription>
|
||||
Put the tooltip text directly over the plan instead of displaying an icon
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="tooltipFontSize" label="Tooltip Font Size">
|
||||
<PropDescription>
|
||||
Font size of the tooltip text
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="tooltipColor" label="Tooltip color">
|
||||
<PropDescription>
|
||||
Color of the tooltip
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Zoom Visibility
|
||||
|
||||
Hide this marker outside certain zoom labels
|
||||
|
||||
|
||||
- `zoomVisibilityMin` <small>INTEGER</small> _Zoom Visibility Minimum_
|
||||
|
||||
Visible only when zoomed to above this level (no limit if empty)
|
||||
|
||||
- `zoomVisibilityMax` <small>INTEGER</small> _Zoom Visibility Maximum_
|
||||
|
||||
Visible only when zoomed to below this level (no limit if empty)
|
||||
<div class="props">
|
||||
<PropGroup name="zoomVisibility" label="Zoom Visibility">
|
||||
Hide this marker outside certain zoom labels
|
||||
<PropBlock type="INTEGER" name="zoomVisibilityMin" label="Zoom Visibility Minimum">
|
||||
<PropDescription>
|
||||
Visible only when zoomed to above this level (no limit if empty)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="zoomVisibilityMax" label="Zoom Visibility Maximum">
|
||||
<PropDescription>
|
||||
Visible only when zoomed to below this level (no limit if empty)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Displays markers on an image overlay
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display player controls in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Player Controls
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Player item to control
|
||||
|
||||
- `showRewindFFward` <small>BOOLEAN</small> _Rewind/Fast Forward_
|
||||
|
||||
Show Rewind and Fast Forward buttons
|
||||
<div class="props">
|
||||
<PropGroup name="player" label="Player Controls">
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display player controls in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
Player item to control
|
||||
|
||||
- `showRewindFFward` <small>BOOLEAN</small> _Rewind/Fast Forward_
|
||||
|
||||
Show Rewind and Fast Forward buttons
|
||||
<div class="props">
|
||||
<PropGroup name="player" label="Player Controls">
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Media player controls, with previous track/pause/play/next buttons
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A card showing model items related to a certain property
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Iterate over an array and repeat the children components in the default slot
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display rollershutter controls in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Orientation
|
||||
|
||||
|
||||
- `vertical` <small>BOOLEAN</small> _Vertical_
|
||||
|
||||
Vertical orientation
|
||||
<div class="props">
|
||||
<PropGroup name="orientation" label="Orientation">
|
||||
<PropBlock type="BOOLEAN" name="vertical" label="Vertical">
|
||||
<PropDescription>
|
||||
Vertical orientation
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A cell expanding to rollershutter controls
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Cell
|
||||
|
||||
General settings of the cell
|
||||
|
||||
|
||||
- `header` <small>TEXT</small> _Header_
|
||||
|
||||
Header of the cell
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the cell
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the cell
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer_
|
||||
|
||||
Footer of the cell
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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` <small>TEXT</small> _Highlight Color_
|
||||
|
||||
Color to use when highlighted
|
||||
|
||||
- `on` <small>TEXT</small> _"On" expression_
|
||||
|
||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||
<div class="props">
|
||||
<PropGroup name="cell" label="Cell">
|
||||
General settings of the cell
|
||||
<PropBlock type="TEXT" name="header" label="Header">
|
||||
<PropDescription>
|
||||
Header of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||
<PropDescription>
|
||||
Footer of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||
<PropDescription>
|
||||
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
|
||||
|
||||
|
||||
- `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
|
||||
<div class="props">
|
||||
<PropGroup name="rollershutter" label="Roller Shutter">
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display rollershutter controls in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
|
||||
|
||||
- `vertical` <small>BOOLEAN</small> _Vertical_
|
||||
|
||||
Vertical orientation
|
||||
<div class="props">
|
||||
<PropGroup name="orientation" label="Orientation">
|
||||
<PropBlock type="BOOLEAN" name="vertical" label="Vertical">
|
||||
<PropDescription>
|
||||
Vertical orientation
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Rollershutter control, with up/down/stop buttons
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a slider in a card to control an item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
A cell expanding to a big vertical slider
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Cell
|
||||
|
||||
General settings of the cell
|
||||
|
||||
|
||||
- `header` <small>TEXT</small> _Header_
|
||||
|
||||
Header of the cell
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the cell
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the cell
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer_
|
||||
|
||||
Footer of the cell
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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` <small>TEXT</small> _Highlight Color_
|
||||
|
||||
Color to use when highlighted
|
||||
|
||||
- `on` <small>TEXT</small> _"On" expression_
|
||||
|
||||
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
|
||||
<div class="props">
|
||||
<PropGroup name="cell" label="Cell">
|
||||
General settings of the cell
|
||||
<PropBlock type="TEXT" name="header" label="Header">
|
||||
<PropDescription>
|
||||
Header of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer">
|
||||
<PropDescription>
|
||||
Footer of the cell
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="color" label="Highlight Color">
|
||||
<PropDescription>
|
||||
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
|
||||
|
||||
|
||||
- `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
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a slider control in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Slider control, allows to pick a number value on a scale
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a stepper in a card to control an item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a stepper control in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Stepper control, allows to input a number or decrement/increment it using buttons
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a swiper allowing to browse slides, in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Swiper control, allows to display multiple swipeable slides
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `name` <small>TEXT</small> _Name_
|
||||
|
||||
A name which will appear on tooltips and labels
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="name" label="Name">
|
||||
<PropDescription>
|
||||
A name which will appear on tooltips and labels
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### Name Display
|
||||
|
||||
|
||||
- `nameLocation` <small>TEXT</small> _Name Location_
|
||||
|
||||
Location of axis name
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `start` | Start |
|
||||
| `center` | Center |
|
||||
| `end` | End (default) |
|
||||
|
||||
|
||||
- `nameGap` <small>INTEGER</small> _Name Gap_
|
||||
|
||||
Gap between axis name and axis line.
|
||||
|
||||
- `nameRotate` <small>TEXT</small> _Name Rotate_
|
||||
|
||||
Rotation of axis name
|
||||
<div class="props">
|
||||
<PropGroup name="nameDisplay" label="Name Display">
|
||||
<PropBlock type="TEXT" name="nameLocation" label="Name Location">
|
||||
<PropDescription>
|
||||
Location of axis name
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="start" label="Start" />
|
||||
<PropOption value="center" label="Center" />
|
||||
<PropOption value="end" label="End (default)" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="nameGap" label="Name Gap">
|
||||
<PropDescription>
|
||||
Gap between axis name and axis line.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="nameRotate" label="Name Rotate">
|
||||
<PropDescription>
|
||||
Rotation of axis name
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `name` <small>TEXT</small> _Name_
|
||||
|
||||
A name which will appear on tooltips and labels
|
||||
|
||||
- `item` <small>TEXT</small> _Item_
|
||||
|
||||
The item whose persisted data to display
|
||||
|
||||
- `service` <small>TEXT</small> _Persistence Service_
|
||||
|
||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||
|
||||
- `offsetAmount` <small>INTEGER</small> _Offset Amount_
|
||||
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||
|
||||
- `offsetUnit` <small>STRING</small> _Offset Unit_
|
||||
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `hour` | Hour |
|
||||
| `minute` | Minute |
|
||||
| `day` | Day |
|
||||
| `week` | Week |
|
||||
| `month` | Month |
|
||||
| `year` | Year |
|
||||
|
||||
|
||||
- `type` <small>TEXT</small> _Type_
|
||||
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `line` | Line |
|
||||
| `bar` | Bar |
|
||||
| `heatmap` | Heatmap |
|
||||
| `scatter` | Scatter |
|
||||
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="name" label="Name">
|
||||
<PropDescription>
|
||||
A name which will appear on tooltips and labels
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="item" label="Item" context="item">
|
||||
<PropDescription>
|
||||
The item whose persisted data to display
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="service" label="Persistence Service" context="persistenceService">
|
||||
<PropDescription>
|
||||
The identifier of the persistence service to retrieve the data from. Leave blank to the use the default.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="offsetAmount" label="Offset Amount">
|
||||
<PropDescription>
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Unit).
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="STRING" name="offsetUnit" label="Offset Unit" context="offsetUnit">
|
||||
<PropDescription>
|
||||
Offset to <em>subtract</em> from the displayed period, use if you want to do period comparisons (see also Offset Amount).
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="hour" label="Hour" />
|
||||
<PropOption value="minute" label="Minute" />
|
||||
<PropOption value="day" label="Day" />
|
||||
<PropOption value="week" label="Week" />
|
||||
<PropOption value="month" label="Month" />
|
||||
<PropOption value="year" label="Year" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="type" label="Type">
|
||||
<PropDescription>
|
||||
The type of the series.<br/><em>Note: heatmap needs a configured visual map and is not supported for time series</em>
|
||||
</PropDescription>
|
||||
<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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a toggle switch in a card to send ON/OFF commands
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a toggle switch in a list
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### List Item
|
||||
|
||||
General settings of the list item
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the item
|
||||
|
||||
- `subtitle` <small>TEXT</small> _Subtitle_
|
||||
|
||||
Subtitle of the item
|
||||
|
||||
- `after` <small>TEXT</small> _After_
|
||||
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
|
||||
- `icon` <small>TEXT</small> _Icon_
|
||||
|
||||
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>)
|
||||
|
||||
- `iconColor` <small>TEXT</small> _Icon Color_
|
||||
|
||||
Not applicable to openHAB icons
|
||||
|
||||
- `iconUseState` <small>BOOLEAN</small> _Icon depends on state_
|
||||
|
||||
Use the state of the item to get a dynamic icon (for openHAB icons only)
|
||||
<div class="props">
|
||||
<PropGroup name="listitem" label="List Item">
|
||||
General settings of the list item
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="subtitle" label="Subtitle">
|
||||
<PropDescription>
|
||||
Subtitle of the item
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="after" label="After">
|
||||
<PropDescription>
|
||||
Text to display on the opposite side of the item (set either this or a badge)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<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>)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="iconColor" label="Icon Color">
|
||||
<PropDescription>
|
||||
Not applicable to openHAB icons
|
||||
</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
|
||||
<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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Toggle control, allows to switch on or off
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Trend line to display the overall recent evoluation of an item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `name` <small>TEXT</small> _Name_
|
||||
|
||||
A name which will appear on tooltips and labels
|
||||
|
||||
- `min` <small>TEXT</small> _Min_
|
||||
|
||||
Minimum boundary
|
||||
|
||||
- `max` <small>TEXT</small> _Max_
|
||||
|
||||
Maximum boundary
|
||||
|
||||
- `scale` <small>BOOLEAN</small> _Do Not Force Scale to Include Zero_
|
||||
|
||||
If checked the scale will not necessarily include the origin (has no effect if min or max are set explicitely)
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<PropBlock type="TEXT" name="name" label="Name">
|
||||
<PropDescription>
|
||||
A name which will appear on tooltips and labels
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="min" label="Min">
|
||||
<PropDescription>
|
||||
Minimum boundary
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="max" label="Max">
|
||||
<PropDescription>
|
||||
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
|
||||
|
||||
|
||||
- `nameLocation` <small>TEXT</small> _Name Location_
|
||||
|
||||
Location of axis name
|
||||
|
||||
| Option | Label |
|
||||
|--------|-------|
|
||||
| `start` | Start |
|
||||
| `center` | Center |
|
||||
| `end` | End (default) |
|
||||
|
||||
|
||||
- `nameGap` <small>INTEGER</small> _Name Gap_
|
||||
|
||||
Gap between axis name and axis line.
|
||||
|
||||
- `nameRotate` <small>TEXT</small> _Name Rotate_
|
||||
|
||||
Rotation of axis name
|
||||
<div class="props">
|
||||
<PropGroup name="nameDisplay" label="Name Display">
|
||||
<PropBlock type="TEXT" name="nameLocation" label="Name Location">
|
||||
<PropDescription>
|
||||
Location of axis name
|
||||
</PropDescription>
|
||||
<PropOptions>
|
||||
<PropOption value="start" label="Start" />
|
||||
<PropOption value="center" label="Center" />
|
||||
<PropOption value="end" label="End (default)" />
|
||||
</PropOptions>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="nameGap" label="Name Gap">
|
||||
<PropDescription>
|
||||
Gap between axis name and axis line.
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="nameRotate" label="Name Rotate">
|
||||
<PropDescription>
|
||||
Rotation of axis name
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a video (URL or URL from String item) in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Displays a video player from a URL or an item
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
- `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
|
||||
### General
|
||||
<div class="props">
|
||||
<PropGroup label="General">
|
||||
<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>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Display a web page in a card
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
|
||||
### Card
|
||||
|
||||
Parameters of the card
|
||||
|
||||
|
||||
- `title` <small>TEXT</small> _Title_
|
||||
|
||||
Title of the card
|
||||
|
||||
- `footer` <small>TEXT</small> _Footer text_
|
||||
|
||||
Footer of the card
|
||||
|
||||
- `noBorder` <small>BOOLEAN</small> _No Border_
|
||||
|
||||
Do not render the card border
|
||||
|
||||
- `noShadow` <small>BOOLEAN</small> _No Shadow_
|
||||
|
||||
Do not render a shadow effect to the card
|
||||
|
||||
- `outline` <small>BOOLEAN</small> _Outline_
|
||||
|
||||
Show the card outline
|
||||
|
||||
- `borders` <small>BOOLEAN</small> _Borders_
|
||||
|
||||
Show borders around the frame
|
||||
<div class="props">
|
||||
<PropGroup name="card" label="Card">
|
||||
Parameters of the card
|
||||
<PropBlock type="TEXT" name="title" label="Title">
|
||||
<PropDescription>
|
||||
Title of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="TEXT" name="footer" label="Footer text">
|
||||
<PropDescription>
|
||||
Footer of the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noBorder" label="No Border">
|
||||
<PropDescription>
|
||||
Do not render the card border
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="noShadow" label="No Shadow">
|
||||
<PropDescription>
|
||||
Do not render a shadow effect to the card
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="outline" label="Outline">
|
||||
<PropDescription>
|
||||
Show the card outline
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="borders" label="Borders">
|
||||
<PropDescription>
|
||||
Show borders around the frame
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
</div>
|
||||
|
||||
### 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 -->
|
||||
|
||||
<!-- 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
|
||||
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
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
Displays a web page in a frame
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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}
|
||||
description: {componentDescription}
|
||||
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/{componentType}.md
|
||||
prev: /docs/ui/components/
|
||||
---
|
||||
|
||||
# {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 -->
|
||||
{componentDescription}
|
||||
<!-- GENERATED /componentDescription -->
|
||||
|
||||
## Configuration
|
||||
|
||||
<!-- DO NOT REMOVE the following comments -->
|
||||
<!-- GENERATED props -->
|
||||
{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 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')
|
||||
|
||||
|
|
@ -42,32 +42,51 @@ const replaceBetweenComments = (commentTag, text, value) => {
|
|||
}
|
||||
|
||||
const buildProp = (prop) => {
|
||||
let ret = '\n'
|
||||
ret += '- `' + prop.name + '` <small>' + prop.type + '</small> _' + prop.label + '_\n'
|
||||
if (prop.description) ret += '\n ' + prop.description + '\n'
|
||||
if (prop.options) {
|
||||
ret += '\n'
|
||||
ret += ' | Option | Label |\n'
|
||||
ret += ' |--------|-------|\n'
|
||||
prop.options.forEach((o) => {
|
||||
ret += ' | `' + (o.value || '(empty)') + '` | ' + o.label + ' |\n'
|
||||
})
|
||||
if (prop.multiple) ret += '\n Multiple options are allowed.\n'
|
||||
ret += '\n'
|
||||
let ret = ''
|
||||
ret += '<PropBlock type="' + prop.type + '" '
|
||||
if (prop.name) ret += 'name="' + prop.name + '" '
|
||||
if (prop.label) ret += 'label="' + prop.label + '" '
|
||||
if (prop.required) ret += 'required="true" '
|
||||
if (prop.context) ret += 'context="' + prop.context + '" '
|
||||
ret = ret.trim() + '>\n'
|
||||
|
||||
if (prop.description) {
|
||||
ret += ' <PropDescription>\n'
|
||||
ret += ' ' + prop.description + '\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
|
||||
}
|
||||
|
||||
const buildProps = (component) => {
|
||||
let ret = ''
|
||||
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) {
|
||||
component.props.parameterGroups.forEach((g) => {
|
||||
ret += '\n### ' + g.label + '\n\n'
|
||||
if (g.description) ret += g.description + '\n\n'
|
||||
ret += '### ' + g.label + '\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)
|
||||
propsInGroup.forEach((p) => ret += buildProp(p))
|
||||
ret += '</PropGroup>\n</div>\n\n'
|
||||
})
|
||||
}
|
||||
return ret
|
||||
|
|
@ -99,6 +118,10 @@ Object.keys(widgetLibraries).forEach((l) => {
|
|||
if (widgetName.indexOf('oh-') < 0) return
|
||||
table += '| [`' + widgetName + '`](./' + widgetName + '.html) | [' + widget.label + '](./' + widgetName + '.html) | ' + (widget.description || '') + ' |\n'
|
||||
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)
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue