Pemilihan item senarai pemilihan bersama -sama dengan grid CSS

Cleverly Group Item senarai yang dipilih melalui grid CSS untuk meningkatkan pengalaman pengguna! Pengumpulan item terpilih adalah strategi reka bentuk biasa yang membantu pengguna dengan cepat membezakan item yang dipilih dan tidak dipilih. Sebagai contoh, dalam senarai tugasan, item yang lengkap bergerak ke atas, menjadikannya lebih mudah bagi pengguna untuk memberi tumpuan kepada tugas-tugas yang tinggal.

kami akan merancang UI pengelompokan yang sama. Tidak seperti penyusunan semula barangan yang dipilih, kami akan menggunakan grid CSS ke susun atur mendatar item yang dipilih untuk membezakan selanjutnya antara item yang dipilih dan tidak dipilih.

Kami akan meneroka dua kaedah. Satu menggunakan

, yang sesuai untuk situasi di mana item yang dipilih tidak melebihi sempadan bekas grid, memastikan susun atur yang stabil; auto-fill span Kod HTML dari dua kaedah adalah sama:

Kod

terdiri daripada senarai yang tidak teratur (

<li>
?
Bento
<li>
?
Dangos

). Kami tidak perlu membungkus elemen tambahan, kerana atribut grid CSS akan menentukan susun atur projek. Perhatikan bahawa saya menggunakan unsur -unsur yang tersirat untuk membungkus, mengelakkan pembungkus tambahan, tetapi tag eksplisit biasanya lebih disokong oleh teknologi bantuan.

<ul></ul> <label></label> Kaedah 1: Gunakan

auto-fill elemen

yang mengandungi item senarai ditetapkan ke

ul {
  width: 250px;
  display: grid;
  gap: 14px 10px;
  grid-template-columns: repeat(auto-fill, 40px);
  justify-content: center;
  /* ...其他样式... */
}

untuk menjadikannya bekas grid. Ia menetapkan jurang 14px dan 10px antara baris grid dan lajur. Kandungan grid diselaraskan secara mendatar ke pusat. Harta

menentukan saiz lajur dalam grid. Dalam keadaan awal, semua item berada dalam satu lajur. Sebaik sahaja item dipilih, mereka akan bergerak ke baris pertama, dengan setiap item yang dipilih menduduki lajur. Kunci terletak pada nilai. <ul></ul> Nilai display: grid grid-template-columns digunakan untuk bilangan pengulangan fungsi auto-fill. Ia memastikan bahawa lajur diulang, setiap lajur mempunyai saiz trek yang diberikan dalam

(40px dalam contoh) dan boleh menyesuaikan diri dengan sempadan bekas grid.

auto-fill untuk memastikan status awal item senarai adalah satu lajur: repeat() repeat()

Apabila item dipilih (elemen

dipilih), gunakan pemilih

:

li {
  width: inherit;
  grid-column: 1;
  /* 等同于：grid-column-start: 1; grid-column-end: auto; */
  /* ...其他样式... */
}

<input> Ini menyebabkan item yang dipilih dikelompokkan ke bahagian atas senarai dan disusun secara mendatar. :has(:checked)

li {
  width: inherit;
  grid-column: 1;
  /* ...其他样式... */
  &:has(:checked) {
    grid-area: 1;
    /* 等同于：grid-row-start: 1; grid-column-start: auto; grid-row-end: auto; grid-column-end: auto; */
    width: 40px;
    /* ...其他样式... */
  }
  /* ...其他样式... */
}

Kaedah 2: Gunakan kata kunci

Kaedah ini tidak memerlukan atribut span. Gaya baru adalah seperti berikut:

grid-template-columns <ul></ul> membantu menyelaraskan item grid. Dikemaskini

gaya:

ul {
  width: 250px;
  display: grid;
  gap: 14px 10px;
  justify-content: center;
  justify-items: center;
  /* ...其他样式... */
}

justify-items: center Setiap item diletakkan di lajur pertama, tetapi sekarang mereka juga merangkumi enam trek lajur (kerana terdapat enam item). Ini memastikan bahawa apabila pelbagai lajur muncul dalam grid, item yang tidak dipilih selepas item yang dipilih tetap tunggal, di bawah item yang dipilih -item yang tidak dipilih kini merangkumi pelbagai trek lajur. <li> Deklarasi akan menyimpan item yang berpusat.

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* 等同于：grid-column-start: 1; grid-column-end: span 6; */
  /* ...其他样式... */
}

Lebar item yang dipilih telah ditingkatkan untuk melihat susun atur UI yang dipilih apabila item melimpah bekas yang dipilih. justify-items: center

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* ...其他样式... */
  &:has(:checked) {
    grid-area: 1;
    width: 120px;
    /* ...其他样式... */
  }
  /* ...其他样式... */
}

Pilih Pesanan

Perintah item yang dipilih dan tidak dipilih akan tetap sama dengan urutan sumber. Jika pesanan skrin diperlukan untuk memadankan pemilihan pengguna, nilai pesanan yang ditambah secara dinamik diberikan apabila item dipilih.

<li>
?
Bento
<li>
?
Dangos

Ringkasan

Grid CSS menjadikan kedua -dua kaedah ini sangat fleksibel tanpa banyak konfigurasi. Dengan meletakkan item pada sama ada paksi (baris atau lajur) menggunakan auto-fill, anda boleh dengan mudah mengumpulkan item yang dipilih ke dalam bekas grid tanpa menjejaskan susun atur item yang tidak dipilih dalam bekas yang sama, selagi item yang dipilih tidak melimpah bekas.

Jika item melimpah bekas, menggunakan kaedah span membantu mengekalkan susun atur tanpa mengira panjang item yang dipilih pada paksi yang diberikan. Sesetengah alternatif reka bentuk untuk UI termasuk mengumpulkan item terpilih ke akhir senarai, atau menukar struktur mendatar dan menegak.

Atas ialah kandungan terperinci Pemilihan item senarai pemilihan bersama -sama dengan grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!