Widget-Bibliothek
Die Widget-Bibliothek ist dein zentraler Ort zur Anpassung aller UI-Elemente deiner App. Hier findest du jeden Button, jedes Eingabefeld und jede Karte - mit voller Kontrolle über das Aussehen.
Übersicht
Abschnitt betitelt „Übersicht“Die Widgets sind in Kategorien organisiert. Du kannst entweder alle anzeigen oder nach Kategorie filtern.
Kategorien
Abschnitt betitelt „Kategorien“| Kategorie | Widgets | Beschreibung |
|---|---|---|
| Alle | 23 Widgets | Zeigt alle verfügbaren Widgets |
| Buttons | 5 | Interaktive Schaltflächen |
| Eingaben | 6 | Formular-Elemente |
| Karten | 3 | Container für Inhalte |
| Feedback | 4 | Benachrichtigungen und Dialoge |
| Navigation | 1 | Navigations-Elemente |
| Listen | 1 | Listeneinträge |
| Indikatoren | 2 | Lade- und Fortschrittsanzeigen |
| Chips | 1 | Kompakte Info-Elemente |
Widget-Karten
Abschnitt betitelt „Widget-Karten“Jedes Widget wird als Karte dargestellt mit:
- Vorschau: Zeigt das Widget mit aktuellen Einstellungen
- Name: Bezeichnung des Widgets
- Kategorie: Zugehörige Kategorie als Badge
- Edit-Button: Öffnet den detaillierten Editor
Tippe auf eine Karte oder den Edit-Button, um den Editor zu öffnen.
Buttons
Abschnitt betitelt „Buttons“Buttons sind die wichtigsten interaktiven Elemente. BLOCQ bietet fünf Button-Typen:
Der Haupt-Call-to-Action Button:
- Auffälligste Schaltfläche
- Für wichtigste Aktionen (Speichern, Absenden, etc.)
- Standardmäßig mit Primärfarbe gefüllt
Alternative Aktionen:
- Weniger auffällig als der primäre Button
- Für “Abbrechen”, “Später”, etc.
- Oft als Outline-Button gestaltet
Minimalistischer Button:
- Nur Text, kein Hintergrund
- Für weniger wichtige Aktionen
- Links in Texten, “Mehr erfahren”, etc.
Button nur mit Symbol:
- Kompakt und platzsparend
- Für Toolbar-Aktionen
- Beispiele: Teilen, Favorisieren, Menü
Schwebender Aktions-Button:
- Prominent positioniert (meist rechts unten)
- Für die wichtigste Aktion einer Seite
- Rund mit Icon, optional mit Text (Extended FAB)
Eingaben
Abschnitt betitelt „Eingaben“Eingabe-Elemente für Formulare und Benutzerinteraktion:
Textfeld für Benutzereingaben:
- Einzeilig oder mehrzeilig
- Mit Label, Platzhalter, Icons
- Verschiedene Zustände (Normal, Fokus, Fehler, Deaktiviert)
Auswahlfeld mit Optionsliste:
- Klick öffnet Menü mit Optionen
- Einzelauswahl
- Anpassbares Menü-Styling
Kontrollkästchen:
- An/Aus-Zustand
- Für Mehrfachauswahl
- Anpassbare Farben und Animation
Optionsfelder:
- Einzelauswahl aus einer Gruppe
- Runde Auswahlelemente
- Anpassbare Farben und Größe
Schalter für Ein/Aus:
- Visuell als Toggle
- Für Einstellungen
- Anpassbare Track- und Thumb-Farben
Datumsauswahl:
- Kalender-Interface
- Anpassbare Farben und Stil
- Header und Buttons konfigurierbar
Container für zusammengehörige Inhalte:
Standard-Karte:
- Flexibler Container
- Anpassbare Hintergrundfarbe, Rahmen, Schatten
- Für allgemeine Inhalte
Erhöhte Karte:
- Stärkerer Schatten
- Hebt sich vom Hintergrund ab
- Für wichtige Inhalte
Umrandete Karte:
- Rahmen statt Schatten
- Flaches Design
- Für Listen und Galerien
Feedback
Abschnitt betitelt „Feedback“Elemente zur Benutzer-Rückmeldung:
Modale Fenster:
- Für wichtige Entscheidungen
- Titel, Inhalt, Buttons
- Anpassbare Größe und Ecken
Unteres Einblendfeld:
- Erscheint von unten
- Für Aktionen und Formulare
- Mit Handle zum Ziehen
Kurze Benachrichtigung:
- Erscheint kurz am unteren Rand
- Für Bestätigungen und Hinweise
- Mit optionaler Aktion
Hilfstext bei Hover/Langdruck:
- Erklärt Elemente
- Erscheint mit Verzögerung
- Automatisches Positionieren
Navigation
Abschnitt betitelt „Navigation“Tab-Navigation:
- Horizontale Tabs
- Für Abschnitts-Navigation
- Anpassbare Indikatoren und Farben
Listeneintrag:
- Standard-Listenelement
- Führendes Icon, Titel, Untertitel
- Trailing-Widget (Icon, Switch, etc.)
Indikatoren
Abschnitt betitelt „Indikatoren“Fortschrittsanzeige:
- Linear oder zirkulär
- Bestimmter oder unbestimmter Fortschritt
- Anpassbare Farben und Stärke
Lade-Animation:
- Für Wartezeiten
- Verschiedene Animationsstile
- Anpassbare Größe und Farbe
Kompakte Info-Elemente:
- Tags, Filter, Aktionen
- Optional mit Icon
- Anpassbare Größe und Stil
Editor-Aufbau
Abschnitt betitelt „Editor-Aufbau“Jeder Widget-Editor folgt dem gleichen Aufbau:
Vorschau-Bereich
Abschnitt betitelt „Vorschau-Bereich“- Zeigt das Widget mit aktuellen Einstellungen
- Zustandsauswahl (Normal, Fokus, Fehler, Deaktiviert)
- Light/Dark Mode Umschalter
Die meisten Editoren haben vier Tabs:
| Tab | Inhalt |
|---|---|
| Aussehen | Farben, Rahmen, Schatten, Gradienten |
| Layout | Größen, Abstände, Schrift |
| Zustände | Farben für verschiedene Zustände |
| Erweitert | Spezielle Einstellungen, Animationen |
Aktionen
Abschnitt betitelt „Aktionen“- Speichern: Änderungen in Datenbank sichern
- Als Vorlage speichern: Design als Template speichern
- Zurücksetzen: Widget auf Standardwerte zurücksetzen
- Stil kopieren: Einstellungen auf andere Widgets übertragen
Häufige Fragen
Abschnitt betitelt „Häufige Fragen“Kann ich Widgets auf Standardwerte zurücksetzen?
Abschnitt betitelt „Kann ich Widgets auf Standardwerte zurücksetzen?“Ja, jeder Editor hat einen “Zurücksetzen”-Button. Er setzt nur das aktuelle Widget zurück, nicht alle.
Werden meine Widget-Änderungen überall angewendet?
Abschnitt betitelt „Werden meine Widget-Änderungen überall angewendet?“Ja, die Einstellungen gelten für alle Instanzen dieses Widget-Typs in der gesamten App.
Was ist der Unterschied zwischen Appearance und States?
Abschnitt betitelt „Was ist der Unterschied zwischen Appearance und States?“- Appearance: Grundlegende Farben und Stile
- States: Farben für spezielle Zustände (Fokus, Fehler, etc.)
Kann ich eigene Widgets hinzufügen?
Abschnitt betitelt „Kann ich eigene Widgets hinzufügen?“Nein, die Widget-Bibliothek enthält vordefinierte Widgets. Du kannst aber deren Aussehen vollständig anpassen.