I got it working, so far.
Code:
uid: ThermometerList
tags: []
props:
parameters:
- description: Beschreibung Thermometer 1
label: Thermometer
name: meterName1
required: false
type: TEXT
- context: item
description: 1. Thermometer
label: Thermometer
name: thermometer1
required: false
type: TEXT
- description: Beschreibung Thermometer 2
label: Thermometer
name: meterName2
required: false
type: TEXT
- context: item
description: 2. Thermometer
label: Thermometer
name: thermometer2
required: false
type: TEXT
- description: Beschreibung Thermometer 3
label: Thermometer
name: meterName3
required: false
type: TEXT
- context: item
description: 3. Thermometer
label: Thermometer
name: thermometer3
required: false
type: TEXT
- description: Beschreibung Thermometer 4
label: Thermometer
name: meterName4
required: false
type: TEXT
- context: item
description: 4. Thermometer
label: Thermometer
name: thermometer4
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 28, 2021, 8:42:51 AM
component: f7-card
config:
style:
border-radius: 20px
background-color: rgba(6,25,36)
--text-color: rgba(255,255,255,1)
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
style:
width: 100%
height: 100%
position: absolute
top: 0
left: 0
border-radius: 20px
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 20%
class:
- padding-top
- padding-bottom
slots:
default:
- component: oh-image
config:
url: /static/icons/thermometer.svg
height: 100px
- component: f7-col
config:
style:
width: 40%
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName1 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-top
- text-align-right
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName2 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName3 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-row
slots:
default:
- component: Label
config:
text: =props.meterName4 + ':'
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-bottom
- component: f7-col
config:
style:
width: 40%
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer1].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-top
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer2].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer3].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- text-align-right
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.thermometer4].displayState
style:
color: var(--text-color)
font-size: 18px
line-height: 30px
text-align: right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
class:
- padding-bottom
- text-align-right
The only point I struggle with is the text-alignment.
Neither using
config:
style:
text-align: right
nor using
config:
class:
- text-align-right
seems to have an effect for the temperatures as you can see in the picture above.
Anyone any idea?