더 나은 테이블 디자인: 추가 데이터에 팝오버 사용

대규모 데이터 테이블로 작업할 때 사용 가능한 모든 정보를 한 번에 표시하면 테이블이 너무 부담스럽고 ​​읽기 어려울 수 있습니다. 결과적으로 부차적인 정보를 숨기고 필요할 때만 더 많은 세부정보를 공개하는 디자인 패턴을 사용하는 것이 일반적입니다.

데이터 테이블 디자인은 특히 대용량 또는 복잡한 데이터를 처리할 때 우수한 사용자 경험(UX)의 핵심입니다. 테이블 디자인 UX가 왜 중요한가요? 더 나은 데이터 테이블을 설계하려면 이러한 숨겨진 세부 정보를 관리하는 세 가지 주요 방법에 대한 합의가 있습니다.

• 확장 가능한 행 – 테이블 행을 인라인으로 확장하여 추가 세부정보를 표시합니다.
• 모달 뷰 – 더 자세한 정보가 포함된 모달 대화 상자를 엽니다.
• 빠른 보기(사이드바) – 가장자리에서 밀어 넣을 수 있는 사이드바에 추가 세부정보를 표시합니다.

이 글에서는 테이블의 마크업을 다시 작성할 필요 없이 옵션 간에 전환할 수 있도록 이 세 가지 옵션을 유연하게 설정하는 방법을 보여 드리겠습니다.

이를 위해 특정 행에 직접 정보를 쉽게 첨부하는 데 이상적인 팝오버를 사용하겠습니다.

---

기본 테이블 설정

시작하려면 스타일링 테이블 가이드와 동일한 마크업과 스타일을 사용하겠습니다.

마지막 셀의 텍스트 내용 뒤에 팝오버를 실행하는 간단한 버튼(아이콘은 tabler에서 가져옴)을 추가했습니다.

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

다음으로 문서 어딘가에 팝오버를 추가하여 트리거 시 추가 콘텐츠를 표시합니다.

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

팝오버 스타일링

팝오버 스타일에는 Adam Argyle의 Steal this 팝오버 코드 템플릿을 사용하겠습니다. 이 템플릿에는 팝오버의 표시 및 사라짐에 대한 부드러운 전환이 포함되어 있습니다.

.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 속성을 사용하면 팝오버가 최종 높이까지 부드럽게 애니메이션화할 수 있고, 앵커 크기를 사용하면 행의 너비(또는 앵커 크기(높이)를 사용하여 높이)와 일치시킬 수 있습니다.

지금까지는 괜찮습니다. 하지만 확장된 행이 다음 행을 덮습니다.

확장된 행 내 테이블 셀의 패딩 블록 끝에 팝오버 높이를 추가하여 이 문제를 해결할 수 있습니다.

멋지네요. 환상이 완성되었습니다!

높이를 애니메이션하기 위해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!