Eine der leistungsstärksten Funktionen in Blocs ist die Möglichkeit, benutzerdefinierte Klassen in Ihren Projekten zu verwenden. Wenn Sie aus einem Grafikdesign-Hintergrund stammen, stellen Sie sich benutzerdefinierte Klassen als Ebenenstile vor, die Sie jedem Element in zuweisen können Blocs um ihm ein bestimmtes Erscheinungsbild zu geben. Die Regeln dieser Klassen können so angepasst werden, dass sie auf Desktop, Tablet und Handy unterschiedlich aussehen. Dies bedeutet, dass Sie jedes Detail eines Elements speziell für das Gerät optimieren können, auf dem es angezeigt wird. Das folgende Video behandelt die Grundlagen benutzerdefinierter Klassen und wie sie in Ihren Entwürfen verwendet werden können.
Anwenden einer benutzerdefinierten Klasse
So wenden Sie eine benutzerdefinierte Klasse auf ein Element in an BlocsWählen Sie zuerst das Element auf der Hauptdesign-Leinwand von aus Linksklick es. Suchen Sie nun in den Optionen der Seitenleiste das Feld mit der Bezeichnung Klassen und klicken Sie in dieses Feld, um es zu aktivieren.
Geben Sie nach der Aktivierung mit Ihrer Tastatur den Namen ein, den Sie Ihrer Klasse geben möchten, oder den Namen einer Klasse, die bereits in Ihrem Projekt vorhanden ist, und drücken Sie dann die Eingabetaste. Dadurch wird ein benutzerdefiniertes Klassen-Tag im Feld "Klassen" erstellt. Dies bedeutet, dass diese Klasse jetzt diesem Element zugewiesen ist. Sie können diesen Vorgang wiederholen, um demselben Element mehrere Klassen hinzuzufügen.
Zugriff auf die Werte einer benutzerdefinierten Klasse
Es gibt verschiedene Möglichkeiten, auf die Werte einer benutzerdefinierten Klasse zuzugreifen Blocs. Der einfachste Weg ist zu der rechten Maustaste auf Ein Element, das das Kontextmenü anzeigt. Wählen Sie in diesem Menü die Option Benutzerdefinierte Klassen und dann Links Klick Die Klasse, die Sie aus der Dropdown-Liste anzeigen möchten. Dadurch wird die ausgewählte Klasse im Klasseneditor geöffnet, sodass Sie ihre Werte anzeigen und bearbeiten können.
Sie können auch über auf die Werte einer benutzerdefinierten Klasse zugreifen Linksklick auf einem der Klassen-Tags, die sich im Klassenfeld befinden und sich in den Hauptoptionen des Seitenleisteninspektors befinden.
Bearbeiten einer benutzerdefinierten Klasse
Blocs Im Lieferumfang ist ein leistungsstarker Klasseneditor enthalten, mit dem Sie Klassen einfach visuell bearbeiten können.
Der Klasseneditor ist unterteilt in 9 Abschnitte um die Bearbeitung verschiedener Regeltypen und Werte übersichtlicher und übersichtlicher zu gestalten.
1. Metrik
Diese Optionen enthalten die Messsteuerelemente, z. B. Breite, Höhe.
2. Box
Diese Optionen enthalten die Box-Steuerelemente, z. B. Rand, Abstand, Rand.
3. Typographie
Diese Optionen enthalten die Steuerelemente für die Typografie, z. B. Schriftgröße und Buchstabenabstand.
4. Hintergrund
Diese Optionen enthalten die Hintergrundsteuerelemente, z. B. Hintergrundbild, Farbverlauf.
5. Positionierung
Diese Optionen enthalten die Positionierungssteuerelemente, z. B. Float, Display, Clear.
6. Schatten
Diese Optionen enthalten die Schattensteuerelemente, z. B. Textschatten, Feldschatten.
7. Filter
Diese Optionen enthalten die Steuerelemente für CSS-Filter, z. B. Unschärfe, Sättigung und Kontrast.
8.SVG
Diese Optionen enthalten die SVG-Steuerelemente, z. B. Strichfarbe, Linienkappe.
9. Biegen
Diese Optionen enthalten die Flex-Steuerelemente, z. B. Richtung, Ausrichten.
In jedem der vier Abschnitte gibt es eine Reihe von beschrifteten Benutzeroberflächenelementen, mit denen Sie bestimmte Werte für die Standard-CSS3-Regeln anwenden können.
Bearbeiten einer Klasse für einen bestimmten Haltepunkt
In Blocs Es ist möglich, die Werte jeder Klasse basierend auf dem Haltepunkt anzupassen, an dem sie angezeigt wird. Dies ist äußerst nützlich, da Sie damit Ihren Benutzern je nach dem Gerät, das sie beim Besuch Ihrer Website verwenden, eine völlig einzigartige Erfahrung bieten können.
Um die Werte einer Klasse an einem bestimmten Haltepunkt zu bearbeiten, wechseln Sie einfach mit dem in diesen Haltepunkt Haltepunktansicht Optionen, die sich in der befinden Zentrum Klicken Sie in der Hauptsymbolleiste der Apps auf und bearbeiten Sie dann die Werte dieser benutzerdefinierten Klasse.
Weitere Informationen zur Funktionsweise der Steuerelemente für die Haltepunktansicht finden Sie hier HIER.
Wir empfehlen außerdem, die folgende Videolektion anzusehen, in der die Grundlagen der Arbeit mit reaktionsschnellen Klassen behandelt werden.
Klassenstaaten
Sie können nicht nur den visuellen Stil eines Elements basierend auf dem Gerät festlegen, auf dem es angezeigt wird Blocs Mit dem Klasseneditor können Sie auch den Stil eines Elements basierend auf seinem aktuellen Status festlegen. Innerhalb sind drei Zustände verfügbar Blocs.
Normal
Der Standardstatus eines Elements.
Schweben
Die :schweben Der Status wird angezeigt, wenn sich der Mauszeiger über dem Element befindet.
Aktives
Die :aktiv Mit dem Selektor wird der aktive Link ausgewählt und formatiert.
Setzen Sie mit Achtsamkeit
Die :Fokus Mit dem Selektor wird das Element ausgewählt, das den Fokus hat.
Besucht
Die :hat besucht Mit dem Selektor werden besuchte Links ausgewählt.
Wenn Sie diese Zustände nutzen, können Sie beispielsweise die Farbe einer Schaltfläche ändern, wenn Sie mit der Maus darüber fahren, oder die Textgröße eines Links ändern, wenn Sie darauf klicken. Durch die Verwendung von Status können Sie das Erscheinungsbild eines Elements auf Ihrer Webseite dynamisch ändern, wenn es von einem Benutzer interagiert wird. Dies kann besonders nützlich sein, wenn Sie eine Nachricht zur Benutzerfreundlichkeit übermitteln müssen.
Staaten ändern
So bearbeiten Sie einfach die Werte für einen bestimmten Status einer benutzerdefinierten Klasse Links Klick Klicken Sie auf die Dropdown-Menüschaltfläche links neben dem Feld für den Namen der Hauptklasse und wählen Sie den Status aus, den Sie bearbeiten möchten.
Benutzerdefinierte Klasse entfernen
Um eine benutzerdefinierte Klasse aus einem Element zu entfernen, wählen Sie einfach das Element aus und navigieren Sie dann in den Seitenleistenoptionen zum Feld "Benutzerdefinierte Klasse" und Links Klick die kleine x Symbol auf der rechten Seite des Klassen-Tag Sie möchten entfernen. Dadurch wird die Klasse aus dem ausgewählten Element entfernt.
Durch das Entfernen von Klassen aus einem Objekt wird die benutzerdefinierte Klasse nicht vollständig aus Ihrem Projekt gelöscht, es sei denn, es handelt sich um eine FreihandklasseWeitere Informationen zum Löschen benutzerdefinierter Klassen finden Sie in diesem Artikel über die Klassenmanager.