CSS&# 条件付きロジックの代わりに子のみを使用

私が扱っているフロントエンド フレームワークの多くには、HTML ロジックに挿入される 3 項または if 分岐のオプションがあります。これは私がよく使うロジックです。特別なケースの 1 つは、データがない場合に表示することです。

私は、自分の作業をずっと楽にしてくれる CSS パターン、:only-child 疑似クラスを見つけました。

反応する

React では、次のような「何か」を行います...

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

角度のある

Angular では、次のような「何か」を行います...

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

CSSの使用

簡単に言うと、2 つのケースがあります。

1. データがありません。
2. データがあります。

<h2 id="No-Data-Showing">No Data Showing</h2>

• Nothing to show.

Data Showing

• Nothing to show.
• Data here

単純な CSS クラス .single の使用 ...

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

この CSS は次のように簡略化できます...

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

上記のコードの結果は次のとおりです ...

まとめ

ご覧のとおり、データの処理をテーブル レベルに移動する必要がありますが、CSS は「データなし」シナリオを非常に簡単に処理できます。

これはエキサイティングです!

以上がCSS&# 条件付きロジックの代わりに子のみを使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。