設計更好的表格：使用彈出視窗取得額外數據

在處理大型資料表時，一次顯示所有可用資訊通常會使表格變得難以閱讀。因此，隱藏次要資訊並使用設計模式僅在需要時顯示更多細節是很常見的。

資料表設計對於良好的使用者體驗 (UX) 至關重要，尤其是在處理大量或複雜的資料時。根據為什麼表格設計使用者體驗很重要？和設計更好的數據表，對於管理這些隱藏細節的三種主要方法達成了共識：

• 可擴充行 – 內嵌擴充表格行以顯示更多詳細資訊。
• 模態視圖 – 開啟包含更深入資訊的模態對話框。
• 快速檢視（側邊欄） – 在可以從邊緣滑入的側邊欄中顯示額外的詳細資訊。

在本文中，我將向您展示如何靈活設定這三個選項，以便您可以在它們之間進行切換，而無需重寫表格的標記。

為此，我們將使用彈出視窗，它非常適合輕鬆地將資訊直接附加到特定行。

---

設定基本表

首先，我們將使用與表格樣式指南中相同的標記和樣式：

在最後一個單元格的文字內容之後，我們添加了一個簡單的按鈕（圖標來自tabler），它將觸發彈出視窗：

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

接下來，我們在文件中的某處添加彈出窗口，以在觸發時顯示附加內容：

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

設計彈出框的樣式

對於彈出視窗樣式，我們將使用 Adam Argyle 的 Steal this popover 程式碼中的範本。此範本包括彈出視窗的出現和消失的平滑過渡：

.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：

<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中文網其他相關文章！