Widget Design wie zB Schrift und Hintergrund
- peter-pan
- Beiträge: 2578
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Widget Design wie zB Schrift und Hintergrund
...läuft da auch dein OH3 drauf ? Oder ist das ein anderer Raspberry mit PI OS und Desktop ?
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2 openhabian
-
- Beiträge: 286
- Registriert: 7. Mär 2021 14:49
Re: Widget Design wie zB Schrift und Hintergrund
mal mitIst das frech, wenn ich fragen würde, ob man den "Zeilenabstand" noch vergrößern könnte?
Code: Alles auswählen
line-height: xxx%;
xxx bei mir Zahlen über 100 %
im Habpanel Widget geht das damit!
bei style mit einfügen.
OH 4.0.3 auf HP 26o G1 Dm Mini Pc mit MX_Linux
- peter-pan
- Beiträge: 2578
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Widget Design wie zB Schrift und Hintergrund
Danke für den Tipp.
So, bzw. so ähnlich geht es auch in den OH-Widgets. Ich hab mich jetzt für "margin-bottom" entschieden. Es ginge natürlich auch "height".
Widget-Code:
Code: Alles auswählen
uid: z_test_Muellabfuhr_1
tags: []
props:
parameters:
- description: Hintergrundfarbe veränderbar, z.B. "transparent" default "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"
label: Hintergrundfarbe
name: background1
required: false
type: TEXT
- default: "0"
description: Abstand vom oberen Rand veränden (in Pixel - z.B. 30)
label: Abstand nach oben
name: marginTop
required: false
type: TEXT
- default: "28"
description: Schriftgrösse für Überschrift veränden (in Pixel - z.B. 30)
label: Schriftgrösse Überschrift
name: fontSizeHeadline
required: false
type: TEXT
- default: "20"
description: Schriftgrösse für Zeilen (in Pixel - z.B. 30 - default ist 20)
label: Schriftgrösse Zeilen
name: fontSizeContent
required: false
type: TEXT
- default: "0"
description: Zeilenabstand (in Pixel - z.B. 30 default ist 0 )
label: Zeilenabstand
name: lineFeed
required: false
type: TEXT
timestamp: Nov 17, 2022, 1:05:50 PM
component: f7-card
config:
class:
- display-flex
- flex-direction-column
- align-items-center
style:
--f7-card-expandable-header-font-size: 30px
background: '=(props.background1) ? props.background1 : "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"'
border-radius: var(--f7-card-expandable-border-radius)
fontSize: var(--f7-card-expandable-header-font-size)
height: auto
margin-top: =props.marginTop + "px"
width: auto
slots:
content:
- component: f7-card-header
config:
style:
color: cyan
font-size: =props.fontSizeHeadline +"px"
justify-content: flex-end
margin-top: 1px
min-height: 30px
padding: 20px
margin-bottom: =props.lineFeed +"px"
slots:
default:
- component: Label
config:
style:
left: 0px
margin-bottom: 20px
margin-left: 30px
position: absolute
text: ="Abfuhrtermine"
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: oh-list-item
config:
badge: '=(((dayjs(items.garbage_waste_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 1 ? "Morgen" : ((dayjs(items.garbage_waste_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 0 ? "Heute" : false)'
badgeColor: ="red"
icon: f7:trash
iconColor: brown
style:
color: brown
font-size: =props.fontSizeContent + "px"
margin-bottom: =props.lineFeed +"px"
title: ="Restmüll " + items.garbage_waste_Begin.displayState
- component: oh-list-item
config:
badge: '=(((dayjs(items.garbage_garden_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 1 ? "Morgen" : ((dayjs(items.garbage_garden_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 0 ? "Heute" : false)'
badgeColor: ="red"
icon: f7:trash
iconColor: green
style:
color: green
font-size: =props.fontSizeContent + "px"
margin-bottom: =props.lineFeed +"px"
title: ="Komposttonne " + items.garbage_garden_Begin.displayState
- component: oh-list-item
config:
badge: '=(((dayjs(items.garbage_paper_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 1 ? "Morgen" : ((dayjs(items.garbage_paper_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 0 ? "Heute" : false)'
badgeColor: ="red"
icon: f7:trash
iconColor: blue
style:
color: blue
font-size: =props.fontSizeContent + "px"
margin-bottom: =props.lineFeed +"px"
title: ="Papiertonne " + items.garbage_paper_Begin.displayState
- component: oh-list-item
config:
badge: '=(((dayjs(items.garbage_yellow_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 1 ? "Morgen" : ((dayjs(items.garbage_yellow_Begin.state).diff(dayjs(items.Current_DateTime.state).startOf("day")))/1000/86400) == 0 ? "Heute" : false)'
badgeColor: ="red"
icon: f7:trash
iconColor: yellow
style:
color: yellow
font-size: =props.fontSizeContent + "px"
margin-bottom: =props.lineFeed +"px"
title: ="Gelber Sack " + items.garbage_yellow_Begin.displayState
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2 openhabian