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.3k

  • 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.
  • IccubeI Offline
    IccubeI Offline
    Iccube
    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #4

        @Scrounger danke funktioniert
        bist der beste :+1:

        1 Antwort Letzte Antwort
        0
        • ScroungerS Offline
          ScroungerS Offline
          Scrounger
          Developer
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antworten Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  0
                  • Stephan SchleichS Offline
                    Stephan SchleichS Offline
                    Stephan Schleich
                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        0
                        • K Offline
                          K Offline
                          Kuddel
                          schrieb am zuletzt editiert von
                          #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 Antworten Letzte Antwort
                          0
                          • Stephan SchleichS Offline
                            Stephan SchleichS Offline
                            Stephan Schleich
                            schrieb am zuletzt editiert von
                            #14

                            @Kuddel klappen bei dir die Submenü links?

                            K 1 Antwort Letzte Antwort
                            0
                            • Stephan SchleichS Stephan Schleich

                              @Kuddel klappen bei dir die Submenü links?

                              K Offline
                              K Offline
                              Kuddel
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #17

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • M Offline
                                    M Offline
                                    mctom
                                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                    0
                                    • Stephan SchleichS Offline
                                      Stephan SchleichS Offline
                                      Stephan Schleich
                                      schrieb am zuletzt editiert von Stephan Schleich
                                      #19

                                      delete me

                                      1 Antwort Letzte Antwort
                                      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
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        0
                                        • K Kuddel

                                          @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 Offline
                                          ScroungerS Offline
                                          Scrounger
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #21

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

                                          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.

                                          Geht nicht, müssen manuell zugeklappt 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.

                                          Ich versteh die Frage nicht. Wieso sollte die Steuerung auf dem Tablet nicht mehr funktionieren?
                                          Falls du damit meinst, dass du für Desktop und Tablet verschiedene Views erstellt hast, gibt es zwei möglichkeiten. Je für Desktop und Tablet verschiedene Startseiten erstellen mit TopAppBar + View in Widget 8. Alternativ kannst auch das Masnory oder Grid Widget verwenden, damit kann man ein responsiv layout erstellen - also ein Layout für Dekstop Handy und Tablet.

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

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

                                          K 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

                                          495

                                          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