CSS & enfant unique au lieu de la logique conditionnelle

Dans de nombreux frameworks frontend avec lesquels je travaille, il existe des options pour les ternaires ou les branches if injectées dans la logique HTML. C'est une logique que j'utilise beaucoup. Un cas particulier est de montrer quand il n'y a pas de données.

Je viens de tomber sur un modèle CSS qui me facilite grandement la vie : la pseudo-classe :only-child.

Réagir

Dans React, je ferais "quelque chose" comme ça...

{
  data.length === 0
    ? <div>Nothing to show.</div>
    : <TableWithRecords />
}

Angulaire

En Angular, je ferais "quelque chose" comme ça...

@if (data.length === 0) {
   <div>Nothing to show.</div>
} @else {
   <TableWithRecords />
}

Utiliser CSS

Pour faire simple, j'ai deux cas.

1. Il n'y a pas de données.
2. Il y a des données.

<h2>No Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <!-- <li>Data here</li> -->
</ul>

<h2>Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <li>Data here</li>
</ul>

En utilisant une simple classe CSS .single ...

.handle-no-data:not(:only-child) {
  display: none;
}
.handle-no-data:only-child {
  display: flex;
}

Ce CSS pourrait être simplifié en ...

.handle-no-data {
  &:not(:only-child) {
    display: none;
  }
  &:only-child {
    display: flex;
  }
}

Voici le résultat du code ci-dessus...

Résumé

Comme vous pouvez le voir, je devrais déplacer la gestion des données au niveau de la table, mais le CSS est assez simple pour gérer un scénario « sans données ».

C'est excitant !

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!