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 - Switches, Radio buttons, …

NEWS

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

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

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

Material Design - Switches, Radio buttons, …

Scheduled Pinned Locked Moved Visualisierung
13 Posts 6 Posters 4.9k Views
  • 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.
  • E Offline
    E Offline
    eastcoast
    wrote on last edited by
    #1

    Hallo,

    ich möchte meine Views soweit als möglich im "Material Design" gestalten.

    Hierzu währen natürlich auch die passenden "Switches", "Radio buttons" und "Checkboxes" wünschenswert;

    hier eine Übersicht: https://material.google.com/components/ … rols.html#

    Hat dies eventuell schon jemand realisiert, in Vorbereitung oder Planung?

    Gibt es evtl. frei zugängliche Quellen welche sich mit geringem Aufwand implementieren ließen?

    Oder hat jemand eine Idee diesen Look mit existierenden Widges zu erzeugen?

    1 Reply Last reply
    0
    • Jeeper.atJ Offline
      Jeeper.atJ Offline
      Jeeper.at
      wrote on last edited by
      #2

      Hallo,

      es gibt doch die beiden Adapter:

      "Material Google design Icons as PNG"

      und

      "Material Google design Icons as SVG"

      Ich habe die nicht installiert, aber sind das nicht die richtigen?

      lg

      Günther

      1 Reply Last reply
      0
      • E Offline
        E Offline
        eastcoast
        wrote on last edited by
        #3

        @Jeeper.at:

        …

        Ich habe die nicht installiert, aber sind das nicht die richtigen? `
        Nein, das sind nur Icons jedoch keine Control Widgets.

        1 Reply Last reply
        0
        • Jeeper.atJ Offline
          Jeeper.atJ Offline
          Jeeper.at
          wrote on last edited by
          #4

          OK, aber man kann doch die Widgets mit eigenen Icons versehen. Ich kann grad nicht auf mein System, aber ich verwende z.B. das Socket-CTRL Widget und habe meinen eigenen Symbole drauf (ich mach ich grüne Icons für ein, Rote für aus).

          1 Reply Last reply
          0
          • E Offline
            E Offline
            eastcoast
            wrote on last edited by
            #5

            @Jeeper.at:

            OK, aber man kann doch die Widgets mit eigenen Icons versehen… `
            Für einen einfachen Button ist das ja ok,

            aber für einen "Switch", "Radio Button" oder "Controlbox" (siehe dazu den Link im ersten Post) nicht unbedingt praktikabel.

            Deshalb sind entsprechende Symbole natürlich nicht im Icon-Pack enthalten,

            da dies eher eigenständige "Controls" oder "fancyswitch" wären.

            1 Reply Last reply
            0
            • Jeeper.atJ Offline
              Jeeper.atJ Offline
              Jeeper.at
              wrote on last edited by
              #6

              Alles klar.

              1 Reply Last reply
              0
              • S Online
                S Online
                SchuetzeSchulz
                wrote on last edited by
                #7

                Die o.g. Widgets in VIS zu haben wäre schon super 🙂

                1 Reply Last reply
                0
                • E Offline
                  E Offline
                  eastcoast
                  wrote on last edited by
                  #8

                  Habe mal planlos im Internet gestöbert,

                  wie es scheint gibt es unzählige Material Design HTML/CSS Frameworks (Materialize, Material UI, MUI, …).

                  Leider habe ich keine Ahnung ob auf dieser Basis eine einfache Integration in ioBroker.vis möglich wäre.

                  Wäre schon toll, solche Widgets in Zukunft in ioBroker zu sehen! 😉

                  1 Reply Last reply
                  0
                  • P Offline
                    P Offline
                    pix
                    wrote on last edited by
                    #9

                    Hallo,

                    gemäß dieser Ankündigung vom Homematic Usertreffen

                    http://download.iobroker.net/ioBroker%20Usertreffen%20Total%202016.pptx

                    gibt es demnächst auch einen anderen coolen neuen Widgetsatz.

                    Gruß

                    Pix

                    ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

                    1 Reply Last reply
                    0
                    • E Offline
                      E Offline
                      eastcoast
                      wrote on last edited by
                      #10

                      Hallo,

                      habe mich für einen Button ein bischen mit dem MUI CSS framework gespielt (https://www.muicss.com/docs/v1/css-js/buttons).

                      Hierfür habe ich einfach aus dem MUI Paket alle Zeilen ab "MUI Buttons" aus mui.css

                      nach vis-Eigenschaften-CSS-Projekt kopiert sowie alles aus mui.js in vis-Eigenschaften-Skripte.

                      Aus der Klasse mui-btn habe ich noch die Parameter "padding", "margin-top", "marging-bottom" und "position" entfernt.

                      Anschließend ein BOOL-HTML-Steuer-Widget eingefügt und als CSS Klasse z.b. "mui-btn mui-btn–raised mui-btn--primary" angegeben.

                      Damit können nun unterschiedliche Material Design Buttons inkl. Effekte erzeugt werden.

                      Leider fehlt mir das Wissen und die Zeit...

                      ...möglicherweise wäre es für jemanden mit Erfahrung kein riesen Aufwand auf Basis von

                      http://www.muicss.com oder http://materializecss.com/

                      einen neuen Widget Satz mit einem Teil der verfügbaren Komponenten (Buttons, Dropdowons, Navbar, etc…) zu erstellen?
                      1408_clipboard01.jpg

                      1 Reply Last reply
                      0
                      • P Offline
                        P Offline
                        Pumbadinho
                        wrote on last edited by
                        #11

                        Also ich wäre auch interessiert… Leider fehlt mir auch die Zeit. Aber da material so popular ist, wird es doch sicher jemandem geben, der damit Erfahrung hat.

                        Gesendet von meinem Nexus 6P mit Tapatalk

                        1 Reply Last reply
                        0
                        • S Online
                          S Online
                          SchuetzeSchulz
                          wrote on last edited by
                          #12

                          Für meine Visu:

                          294_unbenannt.png

                          wären die hier super: https://material.google.com/components/ … rols.html#

                          Allerdings habe ich keine Idee wie man die einbindet.

                          1 Reply Last reply
                          0
                          • UhulaU Offline
                            UhulaU Offline
                            Uhula
                            wrote on last edited by
                            #13

                            Wenn noch nicht bekannt, vielleicht hilft http://forum.iobroker.net/viewtopic.php?f=30&t=7739&p=83147#p83147 weiter.

                            Uhula - Leise und Weise
                            Ex: ioBroker on Gigabyte NUC Proxmox

                            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

                            253

                            Online

                            32.4k

                            Users

                            81.4k

                            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