Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
Logo
  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.0k

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

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

Material Design Widgets: Top App Bar Widget

Material Design Widgets: Top App Bar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
412 Posts 74 Posters 87.6k Views 79 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    wrote on last edited by Scrounger
    #1

    Top App Bar Widget

    topappbar_modal.gif

    Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

    Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

    • Dokumentation
    • Online Beispiel

    Themen zu anderen Widgets findest du hier!

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

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

    S ub.privatU G 3 Replies Last reply
    1
    • IccubeI Offline
      IccubeI Offline
      Iccube
      wrote on last edited by Iccube
      #2

      @Scrounger habe immer noch das Problem wenn ich die Schrift-family für alle widgets ändere, das der NAV Button verschwinden.
      Wie kann ich das wieder ändern.
      das.png test.png

      ScroungerS 1 Reply Last reply
      0
      • IccubeI Iccube

        @Scrounger habe immer noch das Problem wenn ich die Schrift-family für alle widgets ändere, das der NAV Button verschwinden.
        Wie kann ich das wieder ändern.
        das.png test.png

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        wrote on last edited by
        #3

        @Icube

        Problem ist das du die Schriftart überschreibst und die Material Icons halt auch ne Schriftart sind.
        Musst dann entsprechnd ausnahmen angeben, z.B. so

        .materialdesign-widget *:not(.mdc-top-app-bar__navigation-icon) {
            font-family: Jura-DemiBold !important;
        }
        

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

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

        IccubeI 1 Reply Last reply
        2
        • ScroungerS Scrounger

          @Icube

          Problem ist das du die Schriftart überschreibst und die Material Icons halt auch ne Schriftart sind.
          Musst dann entsprechnd ausnahmen angeben, z.B. so

          .materialdesign-widget *:not(.mdc-top-app-bar__navigation-icon) {
              font-family: Jura-DemiBold !important;
          }
          
          IccubeI Offline
          IccubeI Offline
          Iccube
          wrote on last edited by
          #4

          @Scrounger danke funktioniert
          bist der beste 👍

          1 Reply Last reply
          0
          • ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            wrote on last edited by Scrounger
            #5

            @Oli sagte in Test Adapter Material Design Widgets v0.2.x:

            @Scrounger

            ich habe leider immer noch das Problem, dass ich auf der Navigationsseite keine Popup Fenster öffnen oder Button betätigen kann.

            Ein Teil meines Projektes füge ich bei, wäre schön, wenn du es dir mal anschauen könntest.

            Bei einem Klick auf Warnungen DWD sollte es eigentlich so aussehen:
            dfdda0b6-1e0c-4ff4-976d-1e9ff0f8ee2c-image.png

            2020-01-27-Mein.zip

            Vielen Dank

            z-index unter css allgemein löschen, dann funktioniert es
            50b90265-230c-4c9e-a3ed-393db467b9ff-grafik.png

            z-index muss beim TopAppBar Widget für Top App Bar und Navigationsleiste wie folgt eingestellt werden - Navigationsleiste muss größer sein!

            12cdd7fe-9a66-4bf0-a280-6887a9bb7c9e-grafik.png

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

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

            O 1 Reply Last reply
            0
            • ScroungerS Scrounger

              @Oli sagte in Test Adapter Material Design Widgets v0.2.x:

              @Scrounger

              ich habe leider immer noch das Problem, dass ich auf der Navigationsseite keine Popup Fenster öffnen oder Button betätigen kann.

              Ein Teil meines Projektes füge ich bei, wäre schön, wenn du es dir mal anschauen könntest.

              Bei einem Klick auf Warnungen DWD sollte es eigentlich so aussehen:
              dfdda0b6-1e0c-4ff4-976d-1e9ff0f8ee2c-image.png

              2020-01-27-Mein.zip

              Vielen Dank

              z-index unter css allgemein löschen, dann funktioniert es
              50b90265-230c-4c9e-a3ed-393db467b9ff-grafik.png

              z-index muss beim TopAppBar Widget für Top App Bar und Navigationsleiste wie folgt eingestellt werden - Navigationsleiste muss größer sein!

              12cdd7fe-9a66-4bf0-a280-6887a9bb7c9e-grafik.png

              O Online
              O Online
              Oli
              wrote on last edited by
              #6

              @Scrounger

              wenn ich den Z-Index in der Top App Bar und im View im Widget 8 lösche, ist die Top App Bar hinterm View im Widget 8, oder habe ich dich falsch verstanden?

              Gruß
              Oliver

              ScroungerS 1 Reply Last reply
              0
              • O Oli

                @Scrounger

                wenn ich den Z-Index in der Top App Bar und im View im Widget 8 lösche, ist die Top App Bar hinterm View im Widget 8, oder habe ich dich falsch verstanden?

                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                wrote on last edited by
                #7

                @Oli
                Deshlab musst du ja auch wie im zweiten Screenshot zu sehen ist, z-index für die TopAppBar einstellen.

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

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

                O 1 Reply Last reply
                0
                • ScroungerS Scrounger

                  @Oli
                  Deshlab musst du ja auch wie im zweiten Screenshot zu sehen ist, z-index für die TopAppBar einstellen.

                  O Online
                  O Online
                  Oli
                  wrote on last edited by
                  #8

                  @Scrounger

                  das habe ich auch gemacht

                  58be143d-7822-4669-b1d2-c4535bd4937c-image.png

                  Mit folgenden Ergebiss
                  7f63290c-57cb-49b8-87dd-7d91495bc0d8-image.png

                  Gruß
                  Oliver

                  ScroungerS C 2 Replies Last reply
                  0
                  • O Oli

                    @Scrounger

                    das habe ich auch gemacht

                    58be143d-7822-4669-b1d2-c4535bd4937c-image.png

                    Mit folgenden Ergebiss
                    7f63290c-57cb-49b8-87dd-7d91495bc0d8-image.png

                    ScroungerS Offline
                    ScroungerS Offline
                    Scrounger
                    Developer
                    wrote on last edited by
                    #9

                    @Oli
                    Dann hast noch irgendwo z-indizies die höher sind.

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

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

                    1 Reply Last reply
                    0
                    • Stephan SchleichS Offline
                      Stephan SchleichS Offline
                      Stephan Schleich
                      wrote on last edited by Stephan Schleich
                      #10

                      Ich habe ein Problem mit der Top App Bar in Kombi mit dem View 8.

                      ich leg in der Top Bar App eine Menü mit Subitems an ({"itemText": "Bus / Bahn", "subItems": ["Bus", "Bahn"]}) und weise diese danach im View 8 dementsprechend zu, jedoch bleibt die View immer leer.
                      Weiß jemand warum?

                      App Bar:
                      4cf778d7-81c0-42ac-ba30-d59d664429a4-image.png

                      View8:
                      47b95db0-6e00-48fa-825d-aca2a81a0abc-image.png

                      ScroungerS 1 Reply Last reply
                      0
                      • Stephan SchleichS Stephan Schleich

                        Ich habe ein Problem mit der Top App Bar in Kombi mit dem View 8.

                        ich leg in der Top Bar App eine Menü mit Subitems an ({"itemText": "Bus / Bahn", "subItems": ["Bus", "Bahn"]}) und weise diese danach im View 8 dementsprechend zu, jedoch bleibt die View immer leer.
                        Weiß jemand warum?

                        App Bar:
                        4cf778d7-81c0-42ac-ba30-d59d664429a4-image.png

                        View8:
                        47b95db0-6e00-48fa-825d-aca2a81a0abc-image.png

                        ScroungerS Offline
                        ScroungerS Offline
                        Scrounger
                        Developer
                        wrote on last edited by
                        #11

                        @Stephan-Schleich
                        Ist beiden widgets die gleiche Objekt ID eingetragen? Der Datenpunkt muss vom Typ Numbers sein.

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

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

                        Stephan SchleichS 1 Reply Last reply
                        0
                        • ScroungerS Scrounger

                          @Stephan-Schleich
                          Ist beiden widgets die gleiche Objekt ID eingetragen? Der Datenpunkt muss vom Typ Numbers sein.

                          Stephan SchleichS Offline
                          Stephan SchleichS Offline
                          Stephan Schleich
                          wrote on last edited by Stephan Schleich
                          #12

                          @Scrounger "Gleiche ID" ist nur für Testzwecke, unterschiedliche wurden auch getestet.
                          Datenpunkt sollte auch passen, sonst würden die anderen Navi Punkte nicht gehen, oder wird für Submenüs ein eigener DP benötigt, dann liegt dort der Fehler und ich hab das übersehen?

                          Der Datenpunkt bekommt auch den richtigen Wert, nur die View wird nicht gezeigt.

                          1 Reply Last reply
                          0
                          • K Offline
                            K Offline
                            Kuddel
                            wrote on last edited by
                            #13

                            Hallo zusammen,

                            ich habe gestern angefangen das Design meiner VIS Link Text ein bisschen zu verbessern.

                            Als ersten Schritt woltte ich mir ein neues Menü bauen. Dazu habe ich das Widget "Top Add Bar Navigation Drawer" ausgewählt:

                            a34f8d36-8573-4a42-b7ed-48371a66a161-grafik.png

                            Jetzt stellt sich mir die Frage, ob sich die Menüpunkte (in meinem Beispiel "System") irgenwie wieder automatisch schließen lassen.
                            Aktuell werden die Unterpunkte nach dem Aufblättern immer angezeogt und müssen per erneutem klick wiede rzugeblättert werden.

                            Des Weiteren frage ich mich, wie man jetzt die einezelnen Seiten über den FullyBrowser ansteuern kann, da ja alle Seiten per View in Widget 8 angezeigt werden sich bei mir dann der Seitenlink nicht ändert.

                            Im Moment übergebe ich bei Ereignis XY immer die Adresse der jeweiligen Seiten an mein Tablet per FullyKioskBrowser.

                            K M 2 Replies Last reply
                            0
                            • Stephan SchleichS Offline
                              Stephan SchleichS Offline
                              Stephan Schleich
                              wrote on last edited by
                              #14

                              @Kuddel klappen bei dir die Submenü links?

                              K 1 Reply Last reply
                              0
                              • Stephan SchleichS Stephan Schleich

                                @Kuddel klappen bei dir die Submenü links?

                                K Offline
                                K Offline
                                Kuddel
                                wrote on last edited by
                                #15

                                @Stephan-Schleich was meinst du mit klappen ?

                                Ob die Navigation funktioniert ? Ja in Verbindung mit dem "View in Widget 8" Widget

                                Stephan SchleichS 1 Reply Last reply
                                0
                                • K Kuddel

                                  @Stephan-Schleich was meinst du mit klappen ?

                                  Ob die Navigation funktioniert ? Ja in Verbindung mit dem "View in Widget 8" Widget

                                  Stephan SchleichS Offline
                                  Stephan SchleichS Offline
                                  Stephan Schleich
                                  wrote on last edited by
                                  #16

                                  @Kuddel Ob sich das Submenü in der View verlinken lässt, da dies bei mir stetzt ohne Funktion bleibt trotz Verlinkung (Post über dir). Bin langsam echt ratlos.

                                  K 1 Reply Last reply
                                  0
                                  • Stephan SchleichS Stephan Schleich

                                    @Kuddel Ob sich das Submenü in der View verlinken lässt, da dies bei mir stetzt ohne Funktion bleibt trotz Verlinkung (Post über dir). Bin langsam echt ratlos.

                                    K Offline
                                    K Offline
                                    Kuddel
                                    wrote on last edited by
                                    #17

                                    @Stephan-Schleich ja bei mir funtionieren die Untermenüs wie sie sollen

                                    1 Reply Last reply
                                    0
                                    • M Offline
                                      M Offline
                                      mctom
                                      wrote on last edited by mctom
                                      #18

                                      Hallo zusammen,

                                      ich versuche gerade auf das Menü in meine neuen Views einzubauen.
                                      Leider bekomme ich das Menü nicht auf 100%.

                                      So sieht es aktuelle aus:
                                      2020-02-14 15_03_56-Window.png

                                      Hier meine Einstellungen dazu:
                                      2020-02-14 15_01_16-Window.png

                                      Woran kann dies liegen? Was kann ich noch probieren ?

                                      Gruß

                                      Michael


                                      Lösung: 15.02.2020
                                      Habe es gefunden. Wenn ich bei den Standard Einstellungen des Widgets auf 100% gehe funktioniert es.

                                      1 Reply Last reply
                                      0
                                      • Stephan SchleichS Offline
                                        Stephan SchleichS Offline
                                        Stephan Schleich
                                        wrote on last edited by Stephan Schleich
                                        #19

                                        delete me

                                        1 Reply Last reply
                                        0
                                        • K Kuddel

                                          Hallo zusammen,

                                          ich habe gestern angefangen das Design meiner VIS Link Text ein bisschen zu verbessern.

                                          Als ersten Schritt woltte ich mir ein neues Menü bauen. Dazu habe ich das Widget "Top Add Bar Navigation Drawer" ausgewählt:

                                          a34f8d36-8573-4a42-b7ed-48371a66a161-grafik.png

                                          Jetzt stellt sich mir die Frage, ob sich die Menüpunkte (in meinem Beispiel "System") irgenwie wieder automatisch schließen lassen.
                                          Aktuell werden die Unterpunkte nach dem Aufblättern immer angezeogt und müssen per erneutem klick wiede rzugeblättert werden.

                                          Des Weiteren frage ich mich, wie man jetzt die einezelnen Seiten über den FullyBrowser ansteuern kann, da ja alle Seiten per View in Widget 8 angezeigt werden sich bei mir dann der Seitenlink nicht ändert.

                                          Im Moment übergebe ich bei Ereignis XY immer die Adresse der jeweiligen Seiten an mein Tablet per FullyKioskBrowser.

                                          K Offline
                                          K Offline
                                          Kuddel
                                          wrote on last edited by
                                          #20

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

                                          Hallo zusammen,

                                          ich habe gestern angefangen das Design meiner VIS Link Text ein bisschen zu verbessern.

                                          Als ersten Schritt woltte ich mir ein neues Menü bauen. Dazu habe ich das Widget "Top Add Bar Navigation Drawer" ausgewählt:

                                          a34f8d36-8573-4a42-b7ed-48371a66a161-grafik.png

                                          Jetzt stellt sich mir die Frage, ob sich die Menüpunkte (in meinem Beispiel "System") irgenwie wieder automatisch schließen lassen.
                                          Aktuell werden die Unterpunkte nach dem Aufblättern immer angezeogt und müssen per erneutem klick wiede rzugeblättert werden.

                                          Des Weiteren frage ich mich, wie man jetzt die einezelnen Seiten über den FullyBrowser ansteuern kann, da ja alle Seiten per View in Widget 8 angezeigt werden sich bei mir dann der Seitenlink nicht ändert.

                                          Im Moment übergebe ich bei Ereignis XY immer die Adresse der jeweiligen Seiten an mein Tablet per FullyKioskBrowser.

                                          @Scrounger was sagt der Experte ? Möchte ungern das neue Menü erstllen und dann feststellen, dass ich die Seiten auf dem Tablet nicht mehr steuern kann.

                                          ScroungerS 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          609

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe