1. Home
  2. Erste Schritte
  3. Grundlagen zu benutzerdefinierten Klassen
  1. Home
  2. Blöcke verwenden
  3. Design
  4. Grundlagen zu benutzerdefinierten Klassen

Grundlagen zu benutzerdefinierten Klassen

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.

Benutzerdefiniertes Einführungsvideo für Klassen

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.

Klassenfeld

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.

Klassen-Tag

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.

benutzerdefinierte Klasse bearbeiten

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.

Klasseneditor

Der Klasseneditor ist unterteilt in 9 Abschnitte um die Bearbeitung verschiedener Regeltypen und Werte übersichtlicher und übersichtlicher zu gestalten.

Klassenabschnitte

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.

Haltepunktauswahl

Haltepunktsteuerungen

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.

Responsive Classes Video Lektion

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

Das :schweben Der Status wird angezeigt, wenn sich der Mauszeiger über dem Element befindet.

Aktives

Das :aktiv Mit dem Selektor wird der aktive Link ausgewählt und formatiert.

Setzen Sie mit Achtsamkeit

Das :Fokus Mit dem Selektor wird das Element ausgewählt, das den Fokus hat.

Besucht

Das :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.

Klassenstaat

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.

Klasse entfernen

Anfängertipp

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.

Aktualisiert am 18. November 2020

War dieser Artikel hilfreich?

Ähnliche Artikel