Widget Design wie zB Schrift und Hintergrund

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von peter-pan »

...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.1 openhabian

oh73
Beiträge: 285
Registriert: 7. Mär 2021 14:49
Answers: 1

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von oh73 »

Ist das frech, wenn ich fragen würde, ob man den "Zeilenabstand" noch vergrößern könnte?
mal mit

Code: Alles auswählen

line-height: xxx%;
versucht?
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

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget Design wie zB Schrift und Hintergrund

Beitrag von peter-pan »

oh73 hat geschrieben: 17. Nov 2022 13:16 im Habpanel Widget geht das damit!
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.1 openhabian

Antworten