设计更好的表格：使用弹出窗口获取额外数据-css教程-PHP中文网

在处理大型数据表时，一次显示所有可用信息通常会使表格变得难以阅读。因此，隐藏次要信息并使用设计模式仅在需要时显示更多细节是很常见的。

数据表设计对于良好的用户体验 (UX) 至关重要，尤其是在处理大量或复杂的数据时。根据为什么表格设计用户体验很重要？和设计更好的数据表，对于管理这些隐藏细节的三种主要方法达成了共识：

可扩展行 – 内联扩展表格行以显示更多详细信息。
模态视图 – 打开包含更深入信息的模态对话框。
快速查看（侧边栏） – 在可以从边缘滑入的侧边栏中显示额外的详细信息。

在本文中，我将向您展示如何灵活设置这三个选项，以便您可以在它们之间进行切换，而无需重写表格的标记。

为此，我们将使用弹出窗口，它非常适合轻松地将信息直接附加到特定行。

设置基本表

首先，我们将使用与表格样式指南中相同的标记和样式：

Designing Better Tables: Using Popovers for Extra Data

在最后一个单元格的文本内容之后，我们添加了一个简单的按钮（图标来自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;
    }
  }
}

登录后复制

Designing Better Tables: Using Popovers for Extra Data

快速查看（侧边栏）

为了创建快速视图侧边栏，我们将向弹出窗口添加一个新的修饰符类 --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) 行确保它在关闭时滑出。

Designing Better Tables: Using Popovers for Extra Data

我们可以应用类似的调整来创建从右侧或从上方和下方滑入的效果：

内联结束（--inline-end）

Designing Better Tables: Using Popovers for Extra Data

块结束（--block-end）

Designing Better Tables: Using Popovers for Extra Data

可扩展行

最后，让我们看看可扩展行。与模式和侧边栏不同，可扩展行直接集成在表格布局中。传统上，这种方法涉及隐藏的

。带有跨越所有列，以及一个用于切换其可见性的 JavaScript 函数。

但是我们可以重用现有的弹出窗口来内联扩展行吗？不直接 - 但我们可以伪造它，通过将弹出窗口定位到该行的正下方，创建类似的效果。

首先，我们通过在

上设置锚点名称，将弹出窗口附加到表格行的左下角。并应用以下 CSS：

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

登录后复制

接下来，我们需要两个功能，不幸的是，目前仅限 Chrome：

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

登录后复制

interpolate-size 属性允许弹出窗口平滑地动画到其最终高度，而anchor-size 让它匹配行的宽度（或高度，使用anchor-size(height)）。

Designing Better Tables: Using Popovers for Extra Data

到目前为止，一切顺利 - 但展开的行覆盖了接下来的行。

我们可以通过将弹出框高度添加到展开行内表格单元格的填充块末端来解决此问题：

Designing Better Tables: Using Popovers for Extra Data

酷。幻象完成了！

为了动画高度，我们将在 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，以匹配打开时的弹出窗口高度。