Merekabentuk Jadual Lebih Baik: Menggunakan Popovers untuk Data Tambahan

Apabila bekerja dengan jadual data yang besar, memaparkan semua maklumat yang tersedia serentak selalunya boleh menjadikan jadual itu hebat dan sukar dibaca. Akibatnya, adalah perkara biasa untuk menyembunyikan maklumat sekunder dan menggunakan corak reka bentuk untuk mendedahkan lebih banyak butiran hanya apabila diperlukan.

Reka bentuk jadual data adalah penting kepada pengalaman pengguna (UX) yang baik, terutamanya apabila mengendalikan data volum tinggi atau kompleks. Menurut artikel seperti Mengapa UX reka bentuk jadual penting? dan Reka bentuk jadual data yang lebih baik, terdapat kata sepakat mengenai tiga cara utama untuk mengurus butiran tersembunyi ini:

• Baris Boleh Dikembangkan – Kembangkan baris jadual sebaris untuk mendedahkan butiran tambahan.
• Modal Views – Membuka dialog modal dengan maklumat yang lebih mendalam.
• Pandangan Pantas (Bar Sisi) – Memaparkan butiran tambahan dalam bar sisi yang boleh meluncur masuk dari tepi.

Dalam artikel ini, saya akan menunjukkan kepada anda cara menyediakan tiga pilihan ini secara fleksibel, supaya anda boleh bertukar antara pilihan tersebut tanpa perlu menulis semula penanda jadual.

Untuk ini, kami akan menggunakan popovers, yang sesuai untuk melampirkan maklumat dengan mudah terus ke baris tertentu.

---

Menyediakan Jadual Asas

Untuk bermula, kami akan menggunakan penanda dan gaya yang sama seperti dalam Panduan Menggayakan Jadual:

Dalam sel terakhir, selepas kandungan teks, kami telah menambahkan butang mudah (ikon adalah daripada tabler), yang akan mencetuskan popover:

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

Seterusnya, kami menambah popover di suatu tempat dalam dokumen untuk memaparkan kandungan tambahan apabila dicetuskan:

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

Menggayakan Popover

Untuk penggayaan popover, kami akan menggunakan templat daripada Adam Argyle's Steal kod popover ini. Templat ini termasuk peralihan lancar untuk penampilan dan kehilangan 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;
    }
  }
}

Pandangan Modal

Untuk reka letak modal, kami akan menambah kelas pengubah --modal untuk menentukan saiz modal dan memusatkannya pada skrin:

&.--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;
    }
  }
}

---

Pandangan Pantas (Bar sisi)

Untuk mencipta bar sisi paparan pantas, kami akan menambah kelas pengubah suai baharu, --inline-start, pada popover. Bar sisi ini meluncur masuk dari sisi port pandangan dan boleh ditutup dengan animasi yang lancar. Berikut ialah persediaan:

&.--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));
  }
}

Dengan persediaan ini, popover meluncur masuk dari kiri. Baris &[popover]:not(:popover-open) memastikan ia meluncur keluar semula apabila ditutup.

Kami boleh menggunakan pelarasan serupa untuk mencipta kesan slaid masuk dari kanan atau dari atas dan bawah:

Tamat Sebaris (--hujung sebaris)

Block End (--block-end)

---

Baris Boleh Dikembangkan

Dan akhirnya, mari lihat baris boleh kembang. Tidak seperti modal dan bar sisi, baris boleh dikembangkan berintegrasi terus dalam reka letak jadual. Secara tradisinya, pendekatan ini melibatkan dengan merangkumi semua lajur dan fungsi JavaScript untuk menogol keterlihatannya.

Tetapi bolehkah kita menggunakan semula popover sedia ada untuk mengembangkan baris sebaris? Tidak secara langsung — tetapi kita boleh memalsukannya dengan meletakkan popover supaya muncul betul-betul di bawah baris, mencipta kesan yang serupa.

---

Mula-mula, kami melampirkan popover ke bahagian bawah sebelah kiri baris jadual dengan menetapkan nama sauh pada dan menggunakan CSS berikut:

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

Seterusnya, kami memerlukan dua ciri yang, malangnya, pada masa ini Chrome sahaja:

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

Sifat bersaiz interpolasi membenarkan popover bernyawa dengan lancar ke ketinggian terakhirnya, manakala saiz sauh membolehkannya sepadan dengan lebar baris (atau ketinggian, menggunakan saiz sauh(tinggi)).

Setakat ini, sangat bagus — tetapi baris yang dikembangkan meliputi baris seterusnya.

Kita boleh membetulkannya dengan menambahkan ketinggian popover pada hujung blok padding sel jadual dalam baris yang dikembangkan:

Sejuk. Ilusi sudah lengkap!

Untuk menghidupkan ketinggian, kami akan menambah beberapa pengisytiharan tambahan pada 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;
    }
  }
}

Mengautomasikan Pelarasan Padding

Untuk mengelakkan mengemas kini padding secara manual, kami boleh menggunakan skrip yang mengemas kini padding secara dinamik berdasarkan ketinggian popover:

&.--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;
    }
  }
}

Skrip ini mendengar acara togol popover, mengemas kini sifat tersuai secara dinamik, --row, untuk memadankan ketinggian popover apabila dibuka.

---

Demo

Anda boleh melihat demo di browser.style/ui/table-expand, di mana anda juga akan menemui gaya demo jadual asal.

Atas ialah kandungan terperinci Merekabentuk Jadual Lebih Baik: Menggunakan Popovers untuk Data Tambahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!