L'une des fonctionnalités les plus puissantes de Blocs est la possibilité d'utiliser des classes personnalisées dans vos projets. Si vous venez du milieu de la conception graphique, considérez les classes personnalisées comme des styles de calque que vous pouvez Blocs pour lui donner un aspect et une sensation spécifiques. Les règles de ces classes peuvent être ajustées pour apparaître différentes sur le bureau, la tablette et le mobile, ce qui signifie que vous avez la possibilité d'affiner chaque détail d'un élément spécifiquement pour l'appareil sur lequel il est affiché. La vidéo ci-dessous couvre les bases des classes personnalisées et comment elles peuvent être utilisées dans vos conceptions.
Application d'une classe personnalisée
Pour appliquer une classe personnalisée à un élément dans Blocs, sélectionnez d'abord l'élément sur le canevas de conception principal en Clic gauche il. Maintenant, dans les options de la barre latérale, localisez le champ intitulé Cours et cliquez à l'intérieur de ce champ pour l'activer.
Une fois activé, à l'aide de votre clavier, tapez le nom que vous souhaitez donner à votre classe ou le nom d'une classe qui existe déjà dans votre projet, puis appuyez sur retour. Cela créera une balise de classe personnalisée dans le champ classes, cela signifie que cette classe est maintenant affectée à cet élément. Vous pouvez répéter ce processus pour ajouter plusieurs classes au même élément.
Accéder aux valeurs d'une classe personnalisée
Il existe plusieurs façons d'accéder aux valeurs d'une classe personnalisée dans Blocs. Le moyen le plus simple est de faites un clic droit un élément qui affichera le menu contextuel. Dans ce menu, sélectionnez Classes personnalisées et alors Click gauche la classe que vous souhaitez afficher dans la liste déroulante. Cela ouvrira la classe sélectionnée dans l'éditeur de classe afin que vous puissiez afficher et modifier ses valeurs.
Vous pouvez également accéder aux valeurs d'une classe personnalisée en Clic gauche sur l'une des balises de classe qui se trouvent dans le champ de classe, situé dans les options de l'inspecteur de la barre latérale principale.
Modification d'une classe personnalisée
Blocs est livré avec un puissant éditeur de classes intégré qui vous permet d'éditer facilement les classes visuellement.
L'éditeur de classe est divisé en 9 sections pour rendre la modification de différents types de règles et valeurs plus facile à gérer et plus claire.
1. Métrique
Cet ensemble d'options contient les commandes de mesure, par exemple la largeur, la hauteur.
2 Boîte
Cet ensemble d'options contient les contrôles de boîte, par exemple la marge, le remplissage, la bordure.
3. Typographie
Cet ensemble d'options contient les commandes de typographie, par exemple la taille de la police, l'espacement des lettres.
4. Contexte
Cet ensemble d'options contient les contrôles d'arrière-plan, par exemple l'image d'arrière-plan, le dégradé.
5. Positionnement
Cet ensemble d'options contient les commandes de positionnement, par exemple float, display, clear.
6. Ombres
Cet ensemble d'options contient les contrôles d'ombre, par exemple l'ombre du texte, l'ombre de la boîte.
7. Les filtres
Cet ensemble d'options contient les contrôles de filtre CSS, par exemple le flou, la saturation, le contraste.
8. SVG
Cet ensemble d'options contient les contrôles SVG, par exemple la couleur du trait, la casquette de ligne.
9. Fléchir
Cet ensemble d'options contient les commandes flex, par exemple direction, alignement.
Dans chacune des quatre sections, il existe un certain nombre d'éléments d'interface utilisateur étiquetés qui vous permettent d'appliquer des valeurs spécifiques pour les règles CSS3 standard.
Modification d'une classe pour un point d'arrêt spécifique
In Blocs il est possible d'ajuster les valeurs de n'importe quelle classe en fonction du point d'arrêt auquel elle est affichée. Ceci est extrêmement utile car cela vous permet de créer une expérience complètement unique pour vos utilisateurs en fonction de l'appareil qu'ils utilisent lorsqu'ils visitent votre site Web.
Pour modifier les valeurs d'une classe à un point d'arrêt spécifique, basculez simplement vers ce point d'arrêt à l'aide de la touche vue du point d'arrêt options qui se trouvent dans le centre de la barre d'outils principale des applications, puis modifiez les valeurs de cette classe personnalisée.
Vous pouvez en savoir plus sur le fonctionnement des commandes de la vue des points d'arrêt ici.
Nous vous recommandons également de regarder la leçon vidéo ci-dessous qui couvre les bases du travail avec des classes réactives.
États de classe
En plus de pouvoir définir le style visuel d'un élément en fonction de l'appareil sur lequel il est visualisé, le Blocs L'éditeur de classes vous permet également de définir le style d'un élément en fonction de son état actuel. Il y a trois états disponibles dans Blocs.
Normal
L'état par défaut d'un élément.
Flotter
Les :flotter l'état s'affiche lorsque le curseur de la souris se trouve sur l'élément.
Actif
Les :actif sélecteur est utilisé pour sélectionner et styliser le lien actif.
Focus
Les :concentrer sélecteur est utilisé pour sélectionner l'élément qui a le focus.
Visité
Les :a visité le sélecteur est utilisé pour sélectionner les liens visités.
Profiter de ces états signifie que vous pouvez faire des choses comme, changer la couleur d'un bouton lorsque la souris est dessus ou changer la taille du texte d'un lien quand on clique dessus. L'utilisation d'états vous permet de modifier dynamiquement l'apparence d'un élément de votre page Web lorsqu'il interagit avec un utilisateur, cela peut être extrêmement utile lorsque vous devez transmettre un message concernant la convivialité.
Changer les états
Pour modifier les valeurs d'un état spécifique d'une classe personnalisée, il suffit Click gauche le bouton du menu déroulant situé à gauche du champ du nom de la classe principale et sélectionnez l'état que vous souhaitez modifier.
Suppression d'une classe personnalisée
Pour supprimer une classe personnalisée de n'importe quel élément, sélectionnez simplement l'élément, puis dans les options de la barre latérale, accédez au champ de classe personnalisé et Click gauche le petit x symbole situé à droite du étiquette de classe vous souhaitez supprimer. Cela supprimera la classe de l'élément sélectionné.
La suppression de classes d'un objet ne supprimera pas entièrement la classe personnalisée de votre projet, sauf s'il s'agit d'un cours à main levée, vous pouvez obtenir plus d'informations sur la suppression des classes personnalisées, à partir de cet article sur la Gestionnaire de classe.