Hi All,
I am trying to work on my UI and used some of the standard list-item widgets here to start of with which got me the following:
Now I would like to align the design a bit further and for instance have the respective list widget as following:
- The left part can stay
- The right part should show the, in this case, temperature, whereas it should have full blue background and show white digits (this way all boxes, independent from the length of the badge value, should be the same size and position)
I got so far that I have a custom widget showing:
My issue here is though that the background color (in the example red to clearly separate it) is not fully filling the box and the badge is not really centered (which I guess is also because there is somehow an “empty” field below it?).
My code:
uid: temperature_list_test
tags:
- list
- temperature
props:
parameters:
- description: Widget title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item to display
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
component: f7-card
slots:
default:
- component: f7-row
config:
slots:
default:
- component: f7-col
config:
style:
flex: 10
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
style:
opacity: 70%
icon: '=(Number.parseFloat(items[props.item].state) > 30) ? "f7:thermometer_sun" : (Number.parseFloat(items[props.item].state) > 25) ? "f7:thermometer" : "f7:thermometer_snowflake"'
iconColor: black
item: =props.item
title: =props.title
- component: f7-col
config:
style:
flex: 1
background-color: red
align-items: center
text-align: center
hight: 100%
slots:
default:
- component: f7-badge
config:
color: blue
textColor: white
slots:
default:
- component: Label
config:
text: =items[props.item].state
Any hint on what I am doing wrong?
Could I remove the f7-badge and just make it a Label with background?