Styling conditionnellement des éléments sélectionnés dans un récipient de grille

De nombreux scénarios d'application nécessitent l'affichage des articles sélectionnables dans la grille, tels que les calendriers, les paniers d'achat, les galeries, les navigateurs de fichiers et les bibliothèques en ligne, et même les vérifications de sécurité qui vous obligent à choisir toutes les images avec les passages zébrés.

Cet article présente un moyen intelligent d'afficher des éléments optionnels dans la grille, au lieu de RecaptCha, vous pouvez sélectionner plusieurs éléments. Lors de la sélection de deux projets adjacents ou plus, nous pouvons les concevoir intelligemment à l'aide :nth-of-type , pseudo-élément et :checked pour les faire paraître combinés.

L'idée de ce combiner et de l'élément pseudo-élément pour implémenter des cases arrondies découle d'un article que j'ai écrit plus tôt. C'est une simple conception de colonne unique:

Cette fois, cependant, l'effet d'angle arrondi est appliqué aux éléments sur les axes verticaux et horizontaux sur la grille. Vous n'avez pas besoin de lire mon article précédent sur les styles de case à cocher, car je vais couvrir tout ce que vous devez savoir ici. Cependant, si vous êtes intéressé par une version simplifiée de ce qui est fait dans cet article, cet article vaut le coup.

Avant de commencer…

Il sera très utile de noter les points suivants. Par exemple, pour simplifier, j'ai utilisé des HTML et CSS statiques dans ma démo. Selon votre application, vous devrez peut-être générer dynamiquement la grille et ses éléments. Pour me concentrer sur les effets, j'ai omis le contrôle réel de la fonction auxiliaire, mais dans un environnement de production, vous devez certainement considérer ce genre de chose.

De plus, j'utilise la grille CSS pour la mise en page. Je recommande de le faire, mais c'est juste une préférence personnelle et votre expérience peut varier. Pour moi, l'utilisation d'une grille me permet de localiser facilement ::before et ::after des pseudo-éléments du projet à l'aide de sélecteurs de frère.

Ainsi, quelles que soient les normes de mise en page que vous pourriez souhaiter utiliser dans votre application, assurez-vous que les pseudo-éléments peuvent toujours être positionnés dans CSS et assurez-vous que la disposition reste la même sur différents navigateurs et écrans.

Commençons

Comme vous l'avez peut-être remarqué dans les démonstrations précédentes, la sélection et la déchaînement des éléments de case modifient la conception de la case, en fonction de l'état de sélection des autres cases à cocher autour de lui. En effet, j'utilise le pseudo-élément de l'élément adjacent au lieu de lui-même pour styliser chaque case.

La figure suivante montre comment le ::before le pseudo-élément de la boîte dans chaque colonne (à l'exception de la première colonne) chevauche avec la boîte sur leur gauche, et comment le ::after pseudo-élément de la boîte dans chaque ligne (sauf la première ligne) chevauche la case ci-dessus.

C'est le code de base

Le marquage est très simple:

<main></main>

Il y a plus dans le CSS initial. Mais tout d'abord, la grille elle-même:

 /* Grille*/
principal {
  Affichage: grille;
  Grille: répéter (5, 60px) / répéter (4, 85px);
  Align-Items: Centre;
  Justification-Items: Centre;
  marge: 0;
}

Il s'agit d'une grille de cinq éléments et de quatre colonnes contenant des cases à cocher. J'ai décidé d'effacer l'apparence par défaut des cases à cocher, puis de leur donner mon propre fond gris clair et des bordures hyper-artificielles:

 / * Toutes les cases à cocher * /
saisir {
  -Webkit-apparence: aucun;
  Apparence: aucun;
  Contexte: #ddd;
  Border-Radius: 20px;
  curseur: pointeur;
  Affichage: grille;
  hauteur: 40px;
  Largeur: 60px;
  marge: 0;
}

Notez également que la case à cocher elle-même est également une grille. C'est la clé pour mettre son ::before et ::after des pseudo-éléments. Cela dit, faisons-le maintenant:

 / * Pseudo-éléments à l'exception de la première colonne et de la première ligne * /
Entrée: pas (: nth de type (4n 1)) :: avant,
Entrée: nth-de-type (n 5) :: après {
  contenu: '';
  Border-Radius: 20px;
  Grid-Area: 1/1;
  Pointer-Events: Aucun;
}

Nous sélectionnons uniquement des pseudo-éléments qui ne sont pas dans la case à cocher de la première colonne ou de la ligne de la grille. input:not(:nth-of-type(4n 1)) commence par la première case et sélectionnez ::before pour les quatre éléments qui commencent là-bas. Mais veuillez noter que nous parlons :not() , donc ce que nous faisons réellement, c'est sauter le ::before la pseudo-élément de chaque quatrième case à partir de la première. Ensuite, nous commençons par la cinquième case à cocher et appliquons le style au ::after pseudo-élément de chaque case à cocher.

Maintenant, nous pouvons styliser le ::before et ::after des pseudo-éléments pour chaque case à cocher qui n'est pas dans la première colonne ou la ligne de la grille, afin qu'ils se déplacent respectivement à gauche ou vers le haut, les cachant par défaut.

 / * Pseudo-élément sauf la première colonne * /
Entrée: pas (: nth de type (4n 1)) :: avant {
  transform: tradlatex (-85px);
}

/ * Pseudo-élément sauf la première ligne * /
Entrée: nth-de-type (n 5) :: après {
  Transform: Translatey (-60px);
}

Paramètres: style d'état vérifié

Est maintenant le style lorsque la case à cocher est dans l'état :checked . Tout d'abord, donnons-leur une couleur, comme un fond vert lime:

 Entrée: vérifié {fond: limegreen;}

Une boîte sélectionnée doit être en mesure de restaurer toutes les cases sélectionnées adjacentes. En d'autres termes, si nous sélectionnons la 11ème case de la grille, nous devrions également être en mesure de coiffer les cases ci-dessus, ci-dessous, à gauche et à droite.

Cela se fait en positionnant les pseudo-éléments corrects. Comment faisons-nous cela? Eh bien, cela dépend du nombre réel de colonnes dans la grille. Si deux boîtes adjacentes sont sélectionnées dans une grille 5 × 4, le CSS est le suivant:

 / * La limite de droite de la boîte sélectionnée (si l'élément à sa droite est sélectionné) * /
Entrée: pas (: nth of-type (4n)): Entrée vérifiée: vérifié :: avant {
  Border-top-droite-radius: 0;
  Border-Bottom-Radius: 0;
  Contexte: Limegreen;
}
/ * La limite inférieure de la zone sélectionnée (si l'élément suivant est sélectionné) * /
Entrée: Nth-Last-of-Type (n 5): Vérifié * * * Entrée: vérifié :: après {
  Border-Bottom-Radius: 0;
  Border-Bottom-Left-Radius: 0;
  Contexte: Limegreen;
}
/ * La limite gauche de la boîte sélectionnée adjacente (droite) sélectionnée * /
Entrée: pas (: nth of-type (4n)): Entrée vérifiée: entrée vérifiée :: avant {
  Border-top-left-radius: 0;
  Border-Bottom-Left-Radius: 0;
  Contexte: Limegreen;
}
/ * La limite supérieure de la boîte sélectionnée (ci-dessous) Boîte sélectionnée * /
Entrée: pas (: nth of-type (4n)): vérifié * * * Entrée: entrée vérifiée :: avant {
  Border-top-left-radius: 0;
  Border-top-droite-radius: 0;
  Contexte: Limegreen;
}

Si vous le souhaitez, vous pouvez générer le code ci-dessus dynamiquement. Cependant, pour une grille typique (comme une bibliothèque d'images), le nombre de colonnes sera petit et peut être un nombre fixe d'éléments, tandis que les lignes peuvent continuer à augmenter. Surtout s'il est conçu pour les écrans mobiles. C'est pourquoi cette approche est toujours une approche efficace. Si pour une raison quelconque, votre application a des lignes finies et des colonnes étendues, envisagez de faire tourner la grille sur les côtés, car pour une série de projets, la grille CSS les organise de gauche à droite, de haut en bas (c'est-à-dire la ligne par ligne).

Nous devons également ajouter des styles à la dernière case à cocher de la grille - ils ne sont pas tous superposés par des pseudo-éléments car ils sont le dernier élément de chaque axe.

 / * La limite gauche de la boîte sélectionnée (dernière colonne) * /
Entrée: nth de type (4n-1): Entrée vérifiée: vérifié {
  Border-top-left-radius: 0;
  Border-Bottom-Left-Radius: 0;
}
/ * La limite supérieure de la case sélectionnée (dernière colonne) Adjacent (inférieur) Boîte cochée * /
Entrée: nth-of-type (4n): vérifié * * * Entrée: vérifié {
  Border-top-left-radius: 0;
  Border-top-droite-radius: 0;
}

Ces sélecteurs sont difficiles! Le premier ...

 Entrée: nième de type (4n-1): Entrée vérifiée: vérifié

... cela dit essentiellement ceci:

Dans l'avant-dernière colonne, un élément sélectionné est à côté d'un élément sélectionné.

La méthode de calcul du nth-of-type est la suivante:

 <code>4(0) - 1 = 无匹配项4(1) - 1 = 第3 个项目4(2) - 1 = 第7 个项目4(3) - 1 = 第11 个项目等等。</code>

Ainsi, nous commençons par la troisième case à cocher et sélectionnons chaque quatrième case à partir de là. Si les cases à cocher de la séquence sont sélectionnées, alors si elles sont également sélectionnées, nous stylisons également les cases à cocher adjacentes.

Et cette ligne:

 Entrée: nth-of-type (4n): vérifié * * * Entrée: vérifié

Il est dit:

Élément, à condition qu'il soit sélectionné, directement adjacent à un élément, l'élément est directement adjacent à un autre élément, l'élément est directement adjacent à un autre élément et l'élément est directement adjacent à un élément à l'état sélectionné.

Cela signifie que nous sélectionnons chaque quatrième case sélectionnée. Si la case à cocher dans la séquence est sélectionnée, si elle est également sélectionnée, nous styliserons la prochaine quatrième case à partir de la case à cocher.

Utilisez-le

Ce que nous venons de voir, ce sont les principes généraux et la logique derrière le design. Encore une fois, sa pratique dans votre application dépendra de la conception du maillage.

J'ai utilisé des frontières arrondies, mais vous pouvez essayer d'autres formes et même essayer des effets de fond (Temani vous donne des idées). Maintenant que vous savez comment fonctionnent les formules, le reste dépend entièrement de votre imagination.

Voici à quoi il pourrait ressembler dans un calendrier simple:

Encore une fois, ce n'est qu'un prototype rugueux utilisant des balises statiques. De plus, il existe de nombreuses fonctions auxiliaires qui doivent être prises en compte dans la fonction du calendrier.

C'est ça! Très intelligent, non? Je veux dire, rien de complètement "nouveau" sur ce qui s'est passé. Mais c'est un bon exemple de choix de choses dans CSS. Si nous maîtrisons les techniques de sélection plus avancées en utilisant des combinants et des pseudo-éléments, nos capacités de style peuvent aller au-delà des styles qui ne définissent qu'un seul élément - comme nous pouvons style conditionnellement des éléments basés sur l'état d'un autre élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!