Elemen terpilih gaya keadaan dalam bekas grid

Banyak senario aplikasi memerlukan memaparkan item yang boleh dipilih dalam grid, seperti kalendar, kereta belanja, galeri, penyemak imbas fail, dan perpustakaan dalam talian, dan juga pemeriksaan keselamatan yang memerlukan anda memilih semua gambar dengan lintasan zebra.

Artikel ini memperkenalkan cara pintar untuk memaparkan item pilihan dalam grid, bukannya Recaptcha, anda boleh memilih beberapa item. Apabila memilih dua atau lebih projek bersebelahan, kami boleh merangka mereka dengan bijak menggunakan :nth-of-type , pseudo-element, dan :checked kelas pseudo untuk membuat mereka kelihatan digabungkan.

Idea gabungan dan pseudo-elemen ini untuk melaksanakan kotak semak bulat berpunca dari artikel yang saya tulis sebelum ini. Itu reka bentuk lajur tunggal yang mudah:

Walau bagaimanapun, kali ini, kesan sudut bulat digunakan untuk unsur -unsur pada paksi menegak dan mendatar pada grid. Anda tidak perlu membaca catatan terdahulu saya pada gaya kotak semak, kerana saya akan menampung semua yang perlu anda ketahui di sini. Walau bagaimanapun, jika anda berminat dengan versi mudah dari apa yang dilakukan dalam artikel ini, artikel itu patut dilihat.

Sebelum anda memulakan ...

Ia akan sangat berguna untuk melihat perkara -perkara berikut. Sebagai contoh, untuk kesederhanaan, saya menggunakan statik HTML dan CSS dalam demo saya. Bergantung pada aplikasi anda, anda mungkin perlu menjana grid dan itemnya secara dinamik di dalamnya. Untuk memberi tumpuan kepada kesannya, saya menghilangkan pemeriksaan sebenar fungsi tambahan, tetapi dalam persekitaran pengeluaran anda pasti perlu mempertimbangkan perkara seperti ini.

Juga, saya menggunakan grid CSS untuk susun atur. Saya cadangkan melakukan ini, tetapi ia hanya keutamaan peribadi dan pengalaman anda mungkin berbeza -beza. Bagi saya, menggunakan grid membolehkan saya dengan mudah mencari ::before dan ::after unsur-unsur pseudo projek menggunakan pemilih saudara.

Jadi, tidak kira apa piawaian susun atur yang mungkin anda gunakan dalam aplikasi anda, pastikan unsur-unsur pseudo masih boleh diletakkan di CSS dan pastikan susun atur tetap sama di seluruh pelayar dan skrin yang berbeza.

Mari bermula

Seperti yang mungkin anda perhatikan dalam demonstrasi sebelumnya, memilih dan menyahut elemen kotak semak mengubah reka bentuk kotak, bergantung kepada status pemilihan kotak semak lain di sekelilingnya. Ini kerana saya menggunakan elemen pseudo elemen bersebelahan dan bukannya sendiri untuk gaya setiap kotak.

Angka berikut menunjukkan bagaimana ::before pseudo-elemen kotak di setiap lajur (kecuali lajur pertama) bertindih dengan kotak di sebelah kiri mereka, dan bagaimana ::after pseudo-unsur kotak di setiap baris (kecuali baris pertama) bertindih dengan kotak di atas.

Ini adalah kod asas

Penandaan sangat mudah:

<main></main>

Terdapat lebih banyak lagi dalam CSS awal. Tetapi pertama sekali, grid itu sendiri:

 /* Grid*/
Utama {
  paparan: grid;
  Grid: Ulang (5, 60px) / Ulang (4, 85px);
  Align-item: pusat;
  Justify-items: Center;
  Margin: 0;
}

Ini adalah grid lima elemen dan empat lajur yang mengandungi kotak semak. Saya memutuskan untuk membersihkan penampilan lalai kotak semak dan kemudian memberi mereka latar belakang kelabu muda saya sendiri dan sempadan bulat:

 /* Semua kotak semak*/
input {
  -Webkit-appearing: Tiada;
  Penampilan: Tiada;
  Latar Belakang: #ddd;
  Radius sempadan: 20px;
  kursor: penunjuk;
  paparan: grid;
  Ketinggian: 40px;
  lebar: 60px;
  Margin: 0;
}

Juga ambil perhatian bahawa kotak semak itu sendiri juga merupakan grid. Ini adalah kunci untuk meletakkannya ::before dan ::after unsur-unsur pseudo. Setelah mengatakannya, mari kita lakukan sekarang:

 /* Pseudo-elements kecuali lajur pertama dan baris pertama*/
input: tidak (: nth-of-type (4n 1)) :: sebelum,
Input: nth-of-type (n 5) :: selepas {
  Kandungan: '';
  Radius sempadan: 20px;
  grid-kawasan: 1/1;
  Pointer-events: Tiada;
}

Kami hanya memilih unsur-unsur pseudo yang tidak berada di kotak semak lajur pertama atau baris grid. input:not(:nth-of-type(4n 1)) bermula dengan kotak semak pertama dan pilih ::before untuk setiap empat item bermula di sana. Tetapi sila ambil perhatian bahawa kita bercakap tentang :not() , jadi apa yang sebenarnya kita lakukan ialah melangkau ::before pseudo-elemen setiap kotak pilihan keempat bermula dari yang pertama. Kemudian, kita mulakan dengan kotak semak kelima dan memohon gaya ke ::after pseudo-elemen setiap kotak semak.

Sekarang kita boleh gaya ::before dan ::after unsur-unsur pseudo untuk setiap kotak semak yang tidak berada di lajur pertama atau baris grid, supaya mereka bergerak ke kiri atau ke atas masing-masing, menyembunyikannya secara lalai.

 /* Pseudo-element kecuali lajur pertama*/
input: tidak (: nth-of-type (4n 1)) :: sebelum {
  Transform: TranslateX (-85px);
}

/* Pseudo-element kecuali baris pertama*/
Input: nth-of-type (n 5) :: selepas {
  Transform: Translatey (-60px);
}

Tetapan: Gaya keadaan diperiksa

Sekarang adalah gaya apabila kotak semak berada di :checked . Pertama, mari memberi mereka warna, seperti latar belakang hijau kapur:

 Input: diperiksa {latar belakang: limegreen;

Kotak yang dipilih harus dapat menghidupkan semua kotak terpilih yang bersebelahan. Dalam erti kata lain, jika kita memilih kotak semak ke -11 dalam grid, kita juga harus dapat gaya kotak di atas, di bawah, kiri dan kanannya.

Ini dilakukan dengan meletakkan unsur-unsur pseudo yang betul. Bagaimana kita melakukan ini? Nah, ia bergantung kepada bilangan lajur sebenar dalam grid. Jika dua kotak bersebelahan dipilih dalam grid 5 × 4, CSS adalah seperti berikut:

 /* Sempadan kanan kotak yang dipilih (jika elemen di sebelah kanannya dipilih)*/
input: tidak (: nth-of-type (4n)): input diperiksa: diperiksa :: sebelum {
  Sempadan-Top-kanan-Radius: 0;
  Sempadan-Bottom-Right-Radius: 0;
  Latar Belakang: Limegreen;
}
/* Sempadan bawah kotak yang dipilih (jika elemen berikut dipilih)*/
Input: nth-last-of-type (n 5): diperiksa * * * input: diperiksa :: selepas {
  Sempadan-Bottom-Right-Radius: 0;
  Sempadan-Bottom-Left-Radius: 0;
  Latar Belakang: Limegreen;
}
/* Sempadan kiri kotak yang dipilih bersebelahan (kanan) kotak terpilih*/
input: tidak (: nth-of-type (4n)): input diperiksa: input yang diperiksa :: sebelum {
  Border-Top-Left-Radius: 0;
  Sempadan-Bottom-Left-Radius: 0;
  Latar Belakang: Limegreen;
}
/* Batasan atas kotak yang dipilih (di bawah) kotak terpilih*/
input: tidak (: nth-of-type (4n)): diperiksa * * * input: input diperiksa :: sebelum {
  Border-Top-Left-Radius: 0;
  Sempadan-Top-kanan-Radius: 0;
  Latar Belakang: Limegreen;
}

Jika anda mahu, anda boleh menjana kod di atas secara dinamik. Walau bagaimanapun, untuk grid biasa (seperti perpustakaan gambar), bilangan lajur akan kecil dan mungkin bilangan item tetap, sementara baris mungkin terus meningkat. Terutamanya jika direka untuk skrin mudah alih. Itulah sebabnya pendekatan ini masih merupakan pendekatan yang berkesan. Jika atas sebab tertentu aplikasi anda mempunyai baris terhingga dan lajur lanjutan, pertimbangkan untuk memutar grid ke sisi, kerana untuk satu siri projek, grid CSS mengaturnya dari kiri ke kanan, atas ke bawah (iaitu baris mengikut baris).

Kami juga perlu menambah gaya ke kotak semak terakhir dalam grid - mereka tidak semua dilapisi oleh unsur -unsur pseudo kerana mereka adalah item terakhir dalam setiap paksi.

 /* Sempadan kiri kotak yang dipilih (lajur terakhir)*/
Input: Nth-of-Type (4n-1): Input diperiksa: diperiksa {
  Border-Top-Left-Radius: 0;
  Sempadan-Bottom-Left-Radius: 0;
}
/* Batasan atas kotak yang dipilih (lajur terakhir) bersebelahan (lebih rendah) kotak diperiksa*/
Input: nth-of-type (4n): diperiksa * * * input: diperiksa {
  Border-Top-Left-Radius: 0;
  Sempadan-Top-kanan-Radius: 0;
}

Pemilih ini rumit! Yang pertama ...

 Input: Nth-of-type (4n-1): Input diperiksa: diperiksa

... pada dasarnya mengatakan ini:

Dalam lajur terakhir, elemen yang dipilih bersebelahan dengan elemen yang dipilih.

Kaedah pengiraan nth-of-type adalah seperti berikut:

 <code>4(0) - 1 = 无匹配项4(1) - 1 = 第3 个项目4(2) - 1 = 第7 个项目4(3) - 1 = 第11 个项目等等。</code>

Jadi, kami mulakan dengan kotak semak ketiga dan pilih setiap kotak semak keempat dari sana. Jika kotak semak dalam urutan dipilih, maka jika ia juga dipilih, kami juga gaya kotak semak bersebelahan.

Dan garis ini:

 Input: nth-of-type (4n): diperiksa * * * input: diperiksa

Dikatakan:

Unsur, dengan syarat ia dipilih, bersebelahan dengan satu elemen, elemen itu bersebelahan dengan elemen lain, elemen itu bersebelahan dengan elemen lain, dan elemen itu bersebelahan dengan elemen dalam keadaan yang dipilih.

Ini bermakna kami memilih setiap kotak semak keempat yang dipilih. Jika kotak semak dalam urutan dipilih, maka jika ia juga dipilih, kami akan gaya kotak semak keempat seterusnya bermula dari kotak semak.

Gunakannya

Apa yang kita lihat adalah prinsip umum dan logik di sebalik reka bentuk. Sekali lagi, kepraktisannya dalam aplikasi anda bergantung kepada reka bentuk mesh.

Saya menggunakan sempadan bulat, tetapi anda boleh mencuba bentuk lain dan juga mencuba kesan latar belakang (Temani memberi anda idea). Sekarang anda tahu bagaimana formula berfungsi, selebihnya bergantung sepenuhnya pada imaginasi anda.

Inilah yang kelihatan seperti dalam kalendar mudah:

Sekali lagi, ini hanya prototaip kasar menggunakan tag statik. Selain itu, terdapat banyak fungsi tambahan yang perlu dipertimbangkan dalam fungsi kalendar.

Itu sahaja! Sangat pandai, bukan? Maksud saya, tidak ada yang benar -benar "baru" tentang apa yang berlaku. Tetapi ia adalah contoh yang baik untuk memilih perkara dalam CSS. Jika kita menguasai teknik pemilihan yang lebih maju menggunakan kombiner dan unsur-unsur pseudo, keupayaan gaya kita boleh melampaui gaya yang hanya menetapkan satu item-seperti yang kita boleh gaya barangan berdasarkan keadaan elemen lain.

Atas ialah kandungan terperinci Elemen terpilih gaya keadaan dalam bekas grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!