Regrouper les éléments de la liste de sélection avec la grille CSS

GRASSER IMMISSIEMENT LES Éléments de liste sélectionnés via la grille CSS pour améliorer l'expérience utilisateur! Le regroupement d'éléments sélectionné est une stratégie de conception courante qui aide les utilisateurs à distinguer rapidement les éléments sélectionnés et non sélectionnés. Par exemple, dans la liste des tâches, les éléments terminés montent vers le haut, ce qui facilite la concentration sur les tâches restantes.

Nous concevons une interface utilisateur de regroupement similaire. Contrairement au réarrangement simple des éléments sélectionnés, nous utiliserons la grille CSS pour disposer horizontalement les éléments sélectionnés pour distinguer davantage les éléments sélectionnés et non sélectionnés.

Nous explorerons deux méthodes. On utilise auto-fill, qui convient aux situations où l'élément sélectionné ne dépasse pas la limite du conteneur de la grille, assurant une disposition stable; span

Le code HTML des deux méthodes est le même:

Le code

<li>
?
Bento
<li>
?
Dangos

se compose d'une liste non ordonnée (

). Nous n'avons pas besoin d'envelopper les éléments supplémentaires, car l'attribut GRID CSS déterminera la disposition du projet. Notez que j'utilise des éléments implicites <ul></ul> pour envelopper, en évitant un emballage supplémentaire, mais les balises explicites sont généralement plus prises en charge par les technologies d'assistance. <label></label>

Méthode 1: Utilisez auto-fill

ul {
  width: 250px;
  display: grid;
  gap: 14px 10px;
  grid-template-columns: repeat(auto-fill, 40px);
  justify-content: center;
  /* ...其他样式... */
}

L'élément

contenant l'élément de liste est défini sur <ul></ul> pour en faire un conteneur de grille. Il définit un espace de 14px et 10px entre les lignes de grille et les colonnes. Le contenu de la grille est aligné horizontalement sur le centre. La propriété display: grid spécifie la taille des colonnes dans la grille. Dans l'état initial, tous les éléments se trouvent dans une seule colonne. Une fois les éléments sélectionnés, ils passeront à la première ligne, chaque élément sélectionné occupant une colonne. La clé réside dans la valeur. grid-template-columns La valeur auto-fill

est utilisée pour le nombre de répétitions de la fonction

. Il garantit que les colonnes sont répétées, chaque colonne a la taille de piste donnée dans auto-fill (40px dans l'exemple) et peut s'adapter aux limites du récipient de grille. repeat() repeat() pour s'assurer que l'état initial de l'élément de liste est une seule colonne:

Lorsque l'élément est sélectionné (l'élément

li {
  width: inherit;
  grid-column: 1;
  /* 等同于：grid-column-start: 1; grid-column-end: auto; */
  /* ...其他样式... */
}

est sélectionné), utilisez le sélecteur

: <input> :has(:checked)

Cela fait regrouper les éléments sélectionnés en haut de la liste et organisé horizontalement.

li {
  width: inherit;
  grid-column: 1;
  /* ...其他样式... */
  &:has(:checked) {
    grid-area: 1;
    /* 等同于：grid-row-start: 1; grid-column-start: auto; grid-row-end: auto; grid-column-end: auto; */
    width: 40px;
    /* ...其他样式... */
  }
  /* ...其他样式... */
}

Méthode 2: Utilisez le mot-clé

span Cette méthode ne nécessite pas l'attribut

. Le nouveau style

est le suivant: grid-template-columns <ul></ul>

ul {
  width: 250px;
  display: grid;
  gap: 14px 10px;
  justify-content: center;
  justify-items: center;
  /* ...其他样式... */
}

Aide à aligner les éléments de la grille. Style

mis à jour: justify-items: center <li>

Chaque élément est placé dans la première colonne, mais maintenant ils couvrent également six pistes de colonne (car il y a six éléments). Cela garantit que lorsque plusieurs colonnes apparaissent dans la grille, les éléments non sélectionnés après l'élément sélectionné restent unique, en dessous de l'élément sélectionné - les éléments non sélectionnés couvrent désormais plusieurs pistes de colonnes.

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* 等同于：grid-column-start: 1; grid-column-end: span 6; */
  /* ...其他样式... */
}

La déclaration gardera les articles centrés.

justify-items: center

La largeur de l'élément sélectionné a été augmentée pour afficher la disposition de l'interface utilisateur sélectionnée lorsque l'élément déborde du conteneur est sélectionné.

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* ...其他样式... */
  &:has(:checked) {
    grid-area: 1;
    width: 120px;
    /* ...其他样式... */
  }
  /* ...其他样式... */
}

Sélectionner l'ordre

L'ordre des éléments sélectionnés et non sélectionnés restera le même que l'ordre source. Si l'ordre d'écran est nécessaire pour correspondre à la sélection de l'utilisateur, la valeur de commande incrémentée est attribuée dynamiquement lorsque l'élément est sélectionné.

<li>
?
Bento
<li>
?
Dangos

Résumé

La grille CSS rend les deux méthodes très flexibles sans beaucoup de configuration. En plaçant des éléments sur l'une des axes (ligne ou colonne) en utilisant auto-fill, vous pouvez facilement regrouper les éléments sélectionnés dans des conteneurs de grille sans affecter la disposition des éléments non sélectionnés dans le même récipient, tant que les éléments sélectionnés ne débordent pas du conteneur.

Si l'élément déborde du conteneur, l'utilisation de la méthode span aide à maintenir la disposition quelle que soit la longueur de l'élément sélectionné sur l'axe donné. Certaines alternatives de conception à l'interface utilisateur incluent le regroupement des éléments sélectionnés à la fin d'une liste, ou l'échange de structures horizontales et verticales.

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!