Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Top App Bar Widget

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.2k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.9k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.3k

Material Design Widgets: Top App Bar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
412 Beiträge 74 Kommentatoren 88.0k Aufrufe 79 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • BostilB Bostil

    Hallo @Scrounger , hast du eine Idee, ob / wie man in deinem tollen Widget der Top App Bar die Schriftart ändern könnte? Über CSS links im Menü funktioniert es leider nicht ...

    Danke dir!

    ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von
    #93

    @Bostil
    3. Beitrag ff.

    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

    BostilB 1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

      @Bostil
      3. Beitrag ff.

      BostilB Offline
      BostilB Offline
      Bostil
      schrieb am zuletzt editiert von
      #94

      @Scrounger Vielen Dank für die erste Hilfe!

      Habe es nun bei mir ebenfalls anhand des Beispiels als globale CSS definiert:

      .materialdesign-widget *| {
      font-family: Akrobat !important
      }

      Dennoch erscheint die Navigationsleiste noch nicht im gewünschten Font. Dieser liegt natürlich in der VIS und wird generell schon als Schriftart verwendet. Muss man im Widget selber noch eine CSS-Klasse definieren ?

      Danke euch.

      1 Antwort Letzte Antwort
      0
      • etvE Offline
        etvE Offline
        etv
        schrieb am zuletzt editiert von
        #95

        Hallo Scrounger,

        wie kann ich die Schriftgröße im Title ändern? Es lassen sich zwar die Menüpunkte vergrößern aber der Titel nicht.....

        Liebe Grüße
        Tom

        …ist schon sehr lange begeisterter ioBroker Nutzer! 1x zu Hause und 1x auf der Alm. ioBroker ist das 'Hirn' des Smarthome und steuert HomeMatic und Shellys, loggt was so passiert, zeigt es auf Tabletts schön an und ermöglicht mir via Cloud Adapter den Fernzugriff...

        BostilB 1 Antwort Letzte Antwort
        0
        • etvE etv

          Hallo Scrounger,

          wie kann ich die Schriftgröße im Title ändern? Es lassen sich zwar die Menüpunkte vergrößern aber der Titel nicht.....

          Liebe Grüße
          Tom

          BostilB Offline
          BostilB Offline
          Bostil
          schrieb am zuletzt editiert von
          #96

          @etv Habe auch noch dasselbe Problem...

          1 Antwort Letzte Antwort
          1
          • K Offline
            K Offline
            Kuddel
            schrieb am zuletzt editiert von Kuddel
            #97

            Thema: Icons von Subitems

            Laut Doku soll man die Icons der Subitems wie folgt eintragen:
            660fa96f-33c0-4f27-a2de-421f6f9d4c19-grafik.png

            Wenn ich das richtig verstehe, funktioniert das aber nur bei dem Widget
            730c3409-3b6d-4e88-9f57-5b05c99f84a8-grafik.png

            Wie aber stelle ich die Subitems bei dem neuere Widget ein:
            ebe7b140-55c5-478a-9270-ecd25a64f087-grafik.png

            Ich habe es wie folgt versucht:

            {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png,"/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
            

            Ergebnis:
            36153e4d-776b-4e83-8419-f9cec573f9d2-grafik.png

            GlasfaserG 1 Antwort Letzte Antwort
            0
            • K Kuddel

              Thema: Icons von Subitems

              Laut Doku soll man die Icons der Subitems wie folgt eintragen:
              660fa96f-33c0-4f27-a2de-421f6f9d4c19-grafik.png

              Wenn ich das richtig verstehe, funktioniert das aber nur bei dem Widget
              730c3409-3b6d-4e88-9f57-5b05c99f84a8-grafik.png

              Wie aber stelle ich die Subitems bei dem neuere Widget ein:
              ebe7b140-55c5-478a-9270-ecd25a64f087-grafik.png

              Ich habe es wie folgt versucht:

              {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png,"/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
              

              Ergebnis:
              36153e4d-776b-4e83-8419-f9cec573f9d2-grafik.png

              GlasfaserG Offline
              GlasfaserG Offline
              Glasfaser
              schrieb am zuletzt editiert von Glasfaser
              #98

              @Kuddel

              Kann gerade nicht Testen . du hast ein " vergessen

              habe es eingefügt ... ob es daran liegt !?

              {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
              

              Edit : es liegt am fehlenden "

              Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

              K 1 Antwort Letzte Antwort
              0
              • GlasfaserG Glasfaser

                @Kuddel

                Kann gerade nicht Testen . du hast ein " vergessen

                habe es eingefügt ... ob es daran liegt !?

                {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
                

                Edit : es liegt am fehlenden "

                K Offline
                K Offline
                Kuddel
                schrieb am zuletzt editiert von
                #99

                @Glasfaser jap das wars. vielen dank

                bef70588-43ea-4a10-af25-f7f9abc6db98-grafik.png

                1 Antwort Letzte Antwort
                0
                • dQeLseD Offline
                  dQeLseD Offline
                  dQeLse
                  schrieb am zuletzt editiert von
                  #100

                  Hi ich weiss nicht ob meine Frage hier richtig plaziert ist, wenn nicht kann ich gerne einen neuen Thread aufmachen.
                  Ich habe meine Visu auf 3 Tablets am laufen und habe für jedes Tablet einen eigenen DP für Widget8 und Top App Bar angelegt.
                  Das funktioniert auch wunderbar, nur habe ich das Problem, dass wenn ich eine Seite auf einem 2. Tablet ebenfalls öffne auf dem ersten die Seite verschwindet.
                  Ist das normal oder muss ich was einstellen damit ich auf 2 Tablets die selbe Seite geöffnet haben kann?

                  1 Antwort Letzte Antwort
                  0
                  • D Offline
                    D Offline
                    dos1973
                    schrieb am zuletzt editiert von
                    #101

                    @Scrounger
                    ich nutze die Top AppBar Navigation erfolgreich in meinem Menü, alles funktioniert.

                    Jetzt habe ich auf einer Seite ein weiteres "view in widget8" in mein Vis eingebaut, das funktioniert auch solange bis ich die Top AppBar Navigation aufrufe. sobald ich die via Menü navigiere und danach wieder auf die Ursprungsseite zurückkomme geht das darin enthalten "view in widget8" nicht mehr, es wird nichts angezeigt. ich muss ein Reload durchführen, dann gehts wieder bis ich wieder im Menü eine Seite ändere.

                    ich habe sozusagen ein "view in widget8" in deinem "view in widget8" aus der Top AppBar

                    ich hoffe es ist einigermaßen verständlich?! ;-)
                    mache ich etwas falsch oder geht diese Kombination einfach nicht?

                    ScroungerS 1 Antwort Letzte Antwort
                    -1
                    • D dos1973

                      @Scrounger
                      ich nutze die Top AppBar Navigation erfolgreich in meinem Menü, alles funktioniert.

                      Jetzt habe ich auf einer Seite ein weiteres "view in widget8" in mein Vis eingebaut, das funktioniert auch solange bis ich die Top AppBar Navigation aufrufe. sobald ich die via Menü navigiere und danach wieder auf die Ursprungsseite zurückkomme geht das darin enthalten "view in widget8" nicht mehr, es wird nichts angezeigt. ich muss ein Reload durchführen, dann gehts wieder bis ich wieder im Menü eine Seite ändere.

                      ich habe sozusagen ein "view in widget8" in deinem "view in widget8" aus der Top AppBar

                      ich hoffe es ist einigermaßen verständlich?! ;-)
                      mache ich etwas falsch oder geht diese Kombination einfach nicht?

                      ScroungerS Offline
                      ScroungerS Offline
                      Scrounger
                      Developer
                      schrieb am zuletzt editiert von
                      #102

                      @dos1973
                      Die TopAppBar hat kein integriertes view in widget8 mehr?
                      Kann ich leider nix zu sagen, da ich das view in widget8 noch nie mit einem weiteren view in widget8 verschachtel habe.
                      Grundsätzlich ist das view in widget8 nicht client safe, d.h. du müsstest für jedes Endgerät eine eigene Seite mit einem eigenen view in widget8 machen.

                      <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                      <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                      D S 2 Antworten Letzte Antwort
                      0
                      • ScroungerS Scrounger

                        @dos1973
                        Die TopAppBar hat kein integriertes view in widget8 mehr?
                        Kann ich leider nix zu sagen, da ich das view in widget8 noch nie mit einem weiteren view in widget8 verschachtel habe.
                        Grundsätzlich ist das view in widget8 nicht client safe, d.h. du müsstest für jedes Endgerät eine eigene Seite mit einem eigenen view in widget8 machen.

                        D Offline
                        D Offline
                        dos1973
                        schrieb am zuletzt editiert von
                        #103

                        @Scrounger
                        ich habe mich wahrscheinlich viel zu kompliziert ausgedrückt. Sorry.
                        anders herum gefragt. i

                        Ich habe ein Widget8 welche leer anzeigt, sobald im Menü umgeschaltet wird.
                        kann ich das irgendwie nutzen oder funktioniert das Widget nicht mit Materialdesign?

                        1 Antwort Letzte Antwort
                        0
                        • S Offline
                          S Offline
                          seppel786
                          schrieb am zuletzt editiert von seppel786
                          #104

                          Hallo zusammen,

                          ganz bescheidene Frage:
                          Ich versuche in VIS ein SimpleDate bzw. SimpleClock Widget auf/über die Top App Bar einzufügen.
                          Wenn ich mir nun die View in der Runtime anzeigen lasse, sehe ich die Widgets nicht sondern nur die Top App Bar.

                          VIS Editor:
                          83664730-899d-4874-b40d-85ffd1d17e35-grafik.png

                          VIS Runtime:
                          646e27fd-67a8-4b96-9342-e418bc4c0eb7-grafik.png

                          Mache ich irgendwas falsch?

                          Danke für Eure Hilfe,
                          Seppel

                          GlasfaserG 1 Antwort Letzte Antwort
                          0
                          • S seppel786

                            Hallo zusammen,

                            ganz bescheidene Frage:
                            Ich versuche in VIS ein SimpleDate bzw. SimpleClock Widget auf/über die Top App Bar einzufügen.
                            Wenn ich mir nun die View in der Runtime anzeigen lasse, sehe ich die Widgets nicht sondern nur die Top App Bar.

                            VIS Editor:
                            83664730-899d-4874-b40d-85ffd1d17e35-grafik.png

                            VIS Runtime:
                            646e27fd-67a8-4b96-9342-e418bc4c0eb7-grafik.png

                            Mache ich irgendwas falsch?

                            Danke für Eure Hilfe,
                            Seppel

                            GlasfaserG Offline
                            GlasfaserG Offline
                            Glasfaser
                            schrieb am zuletzt editiert von
                            #105

                            @seppel786

                            Hast du die SimpleDate Widget .... im View "view in widget8 " hinterlegt !?

                            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                            S 1 Antwort Letzte Antwort
                            0
                            • GlasfaserG Glasfaser

                              @seppel786

                              Hast du die SimpleDate Widget .... im View "view in widget8 " hinterlegt !?

                              S Offline
                              S Offline
                              seppel786
                              schrieb am zuletzt editiert von
                              #106

                              @Glasfaser

                              Ahm nein...wie mache ich das? Hättest du mir vlt einen Screenshot?

                              Danke und Gruß,
                              Seppel

                              GlasfaserG 1 Antwort Letzte Antwort
                              0
                              • S seppel786

                                @Glasfaser

                                Ahm nein...wie mache ich das? Hättest du mir vlt einen Screenshot?

                                Danke und Gruß,
                                Seppel

                                GlasfaserG Offline
                                GlasfaserG Offline
                                Glasfaser
                                schrieb am zuletzt editiert von Glasfaser
                                #107

                                @seppel786

                                ?????

                                Du hast doch ein Hauptview als Startseite erstellt ...!!?
                                dort ist nur das Widget Top App Bar und das view in widget8 enthalten und dort die Uhr mit einem hohen Z-index einfügen .

                                Link Text

                                Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                S GlasfaserG 2 Antworten Letzte Antwort
                                0
                                • GlasfaserG Glasfaser

                                  @seppel786

                                  ?????

                                  Du hast doch ein Hauptview als Startseite erstellt ...!!?
                                  dort ist nur das Widget Top App Bar und das view in widget8 enthalten und dort die Uhr mit einem hohen Z-index einfügen .

                                  Link Text

                                  S Offline
                                  S Offline
                                  seppel786
                                  schrieb am zuletzt editiert von
                                  #108

                                  @Glasfaser

                                  Danke...Der hohe Z-Index hat das Problem gelöst.
                                  Sry, ich habe deinen Post davor irgendwie falsch interpretiert.

                                  Gruß Seppel

                                  1 Antwort Letzte Antwort
                                  0
                                  • M Offline
                                    M Offline
                                    mcfly11111
                                    schrieb am zuletzt editiert von
                                    #109

                                    eine Frage zu Submenu.
                                    Ist es möglich, in einem Submenu ein weiteres Submenu zu erstellen?
                                    Wäre für mich interessant, um das Topmenu übersichtlich zu halten.
                                    Falls nicht, auch kein Problem. Müsste dann eben das Topmenu umgestalten.

                                    Danke

                                    1 Antwort Letzte Antwort
                                    0
                                    • S Offline
                                      S Offline
                                      seppel786
                                      schrieb am zuletzt editiert von
                                      #110

                                      Hallo zusammen,

                                      wie kann man eigentlich das Widget zentraler ausrichten?
                                      Wenn ich das das Widget in die Mitte meiner View einfüge,
                                      wanderte das Widget in der Runtine immer wieder links oben ins Eck.

                                      Danke und Gurß.

                                      PS: Schöne Ostern Euch allen!

                                      1 Antwort Letzte Antwort
                                      0
                                      • ScroungerS Scrounger

                                        @dos1973
                                        Die TopAppBar hat kein integriertes view in widget8 mehr?
                                        Kann ich leider nix zu sagen, da ich das view in widget8 noch nie mit einem weiteren view in widget8 verschachtel habe.
                                        Grundsätzlich ist das view in widget8 nicht client safe, d.h. du müsstest für jedes Endgerät eine eigene Seite mit einem eigenen view in widget8 machen.

                                        S Offline
                                        S Offline
                                        saeft_2003
                                        Most Active
                                        schrieb am zuletzt editiert von
                                        #111

                                        @Scrounger

                                        Ich habe ein Problem und zwar wenn ich auf irgendeinem View war und danach wieder auf meine Standard View zurück wechsel wird dieser fast immer nicht komplett geladen. Man sieht es immer, dass die Anzeigen für Temp und Luftfeuchtigkeit nicht geladen werden. Andere Bulbs werden normal angezeigt, lassen sich aber nicht schalten.

                                        bewä.jpg

                                        Das passiert auf unterschiedlichen Rechneren in verschiedenen Browsern. Als Notlösung lasse ich jetzt immer automatisch den View neu laden, dann gehts wieder.

                                        Weißt du an was das liegen könnte? Am Anfang trat das relativ selten auf und wurde dann immer schlimmer...

                                        1 Antwort Letzte Antwort
                                        0
                                        • MicM Mic

                                          Tipp: Scrollbar entfernen oder anders stylen

                                          Hier die Antwort auf diese Frage:
                                          @saeft_2003 sagte in Vorstellung meiner VIS:

                                          @Scrounger und @Mic

                                          Was ich beim top app bar widget nicht so toll finde, ist die helle Scrollleiste. Ich weiß das dies Browser bedingt ist und das widget drauf keinen Einfluss hat, aber im Thread vom list widget gab es eine Lösung die Scrollleiste zu verbergen. Jetzt wollte ich euch fragen ob das mit dem top app bar widget auch funktioniert? Weil ich habe es nicht hinbekommen (ich nutze chrome).

                                          https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/19

                                          Getestet: Chrome, sowie Fully Browser

                                          Zunächst im "App Bar Widget" unter "Generell > CSS Klasse" z.B. eintragen: mAppBar

                                          1 - CSS zum Scrollbar entfernen

                                          /** Scrollbar entfernen: Für Chrome, Fully **/
                                          .mAppBar .mdc-drawer__content::-webkit-scrollbar {
                                              width: 0px;
                                              background: transparent; 
                                          }
                                          

                                          2 - Alternativ: Scrollbar ändern:

                                          /** Scrollbar: anderer Style (Chrome, Fully) **/
                                          .mAppBar .mdc-drawer__content::-webkit-scrollbar { width: 15px; }
                                          .mAppBar .mdc-drawer__content::-webkit-scrollbar-track { background: transparent; }
                                          .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb { background-color: rgba(63,64,71,1); border-radius: 7px; border-color: rgba(63,64,71,1); }
                                          .mAppBar .mdc-drawer__content::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }
                                          

                                          Sieht dann z.B. so aus.
                                          scroll-x.png

                                          NegaleinN Offline
                                          NegaleinN Offline
                                          Negalein
                                          Global Moderator
                                          schrieb am zuletzt editiert von Negalein
                                          #112

                                          @Mic sagte in Material Design Widgets: Top App Bar Widget:

                                          Alternativ: Scrollbar ändern:

                                          Hi Mic!

                                          Ich hätte gerade versucht mit deinem CSS die Scrollbar umzufärben.

                                          Aber sie bleibt immer im Standardoutfit.

                                          Egal ob der CSS unter Global oder Projekt ist.
                                          Es ändert sich nichts.

                                          Was könnte ich noch versuchen?

                                          EDIT: Funktioniert. War ein Fehler zwischem linken und rechtem Ohr ;)

                                          ° Node.js: 20.17.0 NPM: 10.8.2
                                          ° Proxmox, Ubuntu 22.04.3 LTS
                                          ° Fixer ---> iob fix

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          643

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe