Weiter zum Inhalt
  • Home
  • Aktuell
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Hell
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dunkel
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

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

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [HowTo] Material Design: Transparentes Slider-Widget, eigener Hintergrund

NEWS

  • Neu im Blog: Was die neue Website alles kann
    BluefoxB
    Bluefox
    4
    1
    141

  • Node.js 24 ist jetzt offiziell empfohlen!
    apollon77A
    apollon77
    8
    1
    415

  • NEWS Räume und Funktionen in einem Durchlauf: der Assistent in Admin 8 (mit Video)
    BluefoxB
    Bluefox
    7
    1
    338

[HowTo] Material Design: Transparentes Slider-Widget, eigener Hintergrund

Geplant Angeheftet Gesperrt Verschoben Visualisierung
1 Beiträge 1 Kommentatoren 3.4k Aufrufe
  • Ä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.
  • UhulaU
    UhulaU
    Uhula
    schrieb am zuletzt editiert von
    #1

    <size size="150">[HowTo] Material Design: Transparentes Slider-Widget, eigener Hintergrund</size>

    Wird dem Slider-Widget die CSS-Klasse mdui-transparent-acc zugewiesen, so wird nur das Slider-Handle (der Anfasser) gezeichnet, der Slider-Weg ist transparent. Dieses ermöglicht einen individuellen Slider-Hintergrund, z.B. um eine Farbauswahl, Helligkeit usw darstellen zu können.
    3336_slider-transparent.png
    Beispiele für Hintergründe (jeweils ein eigenes basic-HTML hinter dem Slider mit background-Eigenschaft):

    ! ````
    Helligkeit: linear-gradient(to right, #404040, #ffffff)
    Farbtemperatur: linear-gradient(to right, #FFFF80, #E0E0FF)
    Sättigung: linear-gradient(to right, white, blue)
    Farbton: inear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff)

    Eine detaillierte Beschreibung: [https://github.com/Uhula/ioBroker-Mater … eitung.pdf](https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/anleitung.pdf)
    
    ioBroker.vis Demo-Projekt: [https://github.com/Uhula/ioBroker-Mater … 20projects](https://github.com/Uhula/ioBroker-Material-Design-Style/tree/master/ioBroker%20projects)
    
    __Hinweis: Da hierbei die CSS-Klassen und Javascript-Code des Material Designs benutzt werden, funktioniert es nur dort. CSS und JS müssen dazu aus dem aktuellen MD_Demo Projekt übernommen werden.__

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

    1 Antwort Letzte Antwort
    0

    Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.

    Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.

    Mit deinem Input könnte dieser Beitrag noch besser werden 💗

    Registrieren Anmelden
    Antworten
    • In einem neuen Thema antworten
    Anmelden zum Antworten
    • Älteste zuerst
    • Neuste zuerst
    • Meiste Stimmen


    Support us

    ioBroker
    Community Adapters
    Donate

    483

    Online

    33.1k

    Benutzende

    83.9k

    Themen

    1.4m

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

    • Du hast noch kein Konto? Registrieren

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