より良いテーブルの設計: 追加データにポップオーバーを使用する

大規模なデータテーブルを扱う場合、利用可能な情報をすべて一度に表示すると、テーブルが膨大になって読みにくくなることがあります。その結果、二次情報を非表示にし、必要な場合にのみ詳細を明らかにするデザイン パターンを使用することが一般的です。

データ テーブルの設計は、特に大量のデータや複雑なデータを処理する場合、優れたユーザー エクスペリエンス (UX) の中心となります。次のような記事によると、テーブル デザインの UX はなぜ重要ですか?より良いデータ テーブルを設計するために、これらの隠された詳細を管理する 3 つの主な方法についてはコンセンサスがあります:

• 展開可能な行 – テーブルの行をインラインで展開して、追加の詳細を表示します。
• モーダル ビュー – より詳細な情報を含むモーダル ダイアログが開きます。
• クイック ビュー (サイドバー) – 端からスライドできるサイドバーに追加の詳細が表示されます。

この記事では、これら 3 つのオプションを柔軟に設定して、テーブルのマークアップを書き直さずにオプションを切り替える方法を示します。

このために、ポップオーバーを使用します。これは、情報を特定の行に直接簡単に添付するのに最適です。

---

基本テーブルの設定

まず、テーブルのスタイル設定ガイドと同じマークアップとスタイルを使用します。

最後のセルのテキストコンテンツの後に、ポップオーバーをトリガーする簡単なボタン (アイコンは tabler からのもの) を追加しました。

<button type="button" popovertarget="p1"></button>

次に、ドキュメント内のどこかにポップオーバーを追加し、トリガーされたときに追加のコンテンツを表示します。

<div id="p1" popover>
  ... content ...   
</div>

ポップオーバーのスタイリング

ポップオーバーのスタイルには、Adam Argyle の「Steal this Popover code」のテンプレートを使用します。このテンプレートには、ポップオーバーの出現と消滅のためのスムーズなトランジションが含まれています:

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

モーダルビュー

モーダル レイアウトの場合、--modal 修飾子クラスを追加してモーダルのサイズを定義し、画面の中央に配置します。

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

---

クイックビュー (サイドバー)

クイックビューサイドバーを作成するには、新しい修飾子クラス --inline-start をポップオーバーに追加します。このサイドバーはビューポートの横からスライドして挿入され、スムーズなアニメーションで閉じることができます。セットアップは次のとおりです:

&.--inline-start {
  --width: clamp(220px, 33vw, 350px);
  block-size: calc(100dvh - 2em);
  inline-size: var(--width);
  inset-block-start: 1em;
  inset-inline: 1em;

  @starting-style {
    &:popover-open {
      inset-inline: calc(0px - var(--width));
    }
  }
  &[popover]:not(:popover-open) { 
    inset-inline: calc(0px - var(--ui-width));
  }
}

この設定では、ポップオーバーが左側からスライドして表示されます。 &[popover]:not(:popover-open) 行は、閉じたときにスライドして元に戻るようにします。

同様の調整を適用して、右側または上下からスライドイン効果を作成できます。

インライン終了 (--inline-end)

ブロック終了 (--block-end)

---

拡張可能な行

そして最後に、展開可能な行を見てみましょう。モーダルやサイドバーとは異なり、展開可能な行はテーブル レイアウト内に直接統合されます。従来、このアプローチには、隠された

が含まれます。 付きすべての列にまたがり、その表示を切り替える JavaScript 関数。

しかし、行をインラインで展開するために既存のポップオーバーを再利用できるでしょうか?直接ではありませんが、ポップオーバーを行のすぐ下に配置して、同様の効果を作成することで偽装できます。

---

まず、 にアンカー名を設定して、テーブル行の左下にポップオーバーを接続します。そして次の CSS を適用します:

<button type="button" popovertarget="p1"></button>

次に、残念ながら現在は Chrome のみ の 2 つの機能が必要です。

<div id="p1" popover>
  ... content ...   
</div>

interpolate-size プロパティを使用すると、ポップオーバーを最終的な高さまでスムーズにアニメーション化できます。一方、anchor-size を使用すると、行の幅 (または、anchor-size(height) を使用して高さ) に一致させることができます。

ここまでは問題ありませんが、展開された行が次の行を覆っています。

これは、展開された行内の表セルのパディングブロックエンドにポップオーバーの高さを追加することで修正できます。

かっこいい。錯覚が完成しました!

高さをアニメーション化するには、CSS にいくつかの追加宣言を追加します。

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

パディング調整の自動化

パディングを手動で更新することを避けるために、ポップオーバーの高さに基づいてパディングを動的に更新するスクリプトを使用できます。

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

このスクリプトは、ポップオーバーの切り替えイベントをリッスンし、カスタム プロパティ --row を動的に更新して、開いたときにポップオーバーの高さに一致させます。

---

デモ

browser.style/ui/table-expand でデモを表示できます。ここには、元のテーブル デモ スタイルもあります。

以上がより良いテーブルの設計: 追加データにポップオーバーを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。