Pengaturan Tata Letak

Lebar

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Poin:
Mengatur lebar elemen; penggunaan min/max secara bersamaan meningkatkan stabilitas Tata Letak.

Apa yang diubah oleh pengaturan ini:
Terutama penting untuk operasi dengan panjang kalimat variabel.

Tips untuk penyesuaian:
Jika Anda mengatur lebar-min terlebih dahulu dan kemudian menyesuaikan lebar / lebar-maks, kecil kemungkinannya untuk rusak.

Item-item konfigurasi ###.

• Gunakan lebar: mengaktifkan/menonaktifkan pengaturan lebar dan memperbaikinya hanya jika perlu.
• Lebar + Satuan (px / % / vw / vh / fit-content): atur lebar dan Satuan untuk menyesuaikan penyebaran menurut jumlah konten.
• Gunakan lebar minimum / Min Lebar + Satuan: mengatur lebar minimum dan mencegah penghancuran dalam kalimat pendek.
• Gunakan lebar maksimum / Max Lebar + Satuan: Mengatur lebar maksimum dan mencegah peregangan horizontal yang berlebihan pada kalimat yang panjang.

Memilih konten yang sesuai untuk Satuan akan menyesuaikan lebar Tombol ke Otomatis agar sesuai dengan panjang Teks. Spesifikasi % adalah rasio terhadap lebar elemen induk; bila digunakan bersama dengan min/max, ini memungkinkan Tata Letak yang fleksibel sekaligus mencegah fluktuasi lebar yang ekstrem.

Tinggi

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Tujuan:
Mengatur Tinggi elemen, pengaturan yang selaras dengan jumlah baris dan dekorasi Teks.

Apa yang diubah oleh pengaturan ini:
Tinggi yang tidak mencukupi membuat elemen terlihat sempit, Teks yang berlebihan membuatnya terlihat melar.

Tips untuk penyesuaian:
Pertama-tama, tentukan Tinggi minimum dan hanya gunakan Tinggi tetap bila perlu untuk memastikan fleksibilitas.

Opsi pengaturan.

• Gunakan tinggi: aktifkan/nonaktifkan pengaturan Tinggi dan perbaiki hanya bila diperlukan.
• Tinggi + Satuan (px / % / vw / vh): atur Tinggi dan Satuan untuk menyesuaikan kesan kerapatan elemen.
• Gunakan tinggi minimum / Min Tinggi + Satuan: mengatur Tinggi minimum dan memastikan area yang ramah ketukan.
• Gunakan tinggi maksimum / Max Tinggi + Satuan: Menetapkan Tinggi maksimum dan mencegah spasi.

Memperbaiki Tinggi terlalu banyak dapat menyebabkan overhang jika jumlah Teks ditingkatkan. Jika Tinggi tetap diperlukan, akan lebih aman jika menggunakan min-height agar dapat diregangkan sesuai dengan jumlah konten. Minimal 44px Tinggi direkomendasikan untuk area ketukan (Pedoman Target Sentuhan WCAG).

Efek overflow: tersembunyi:** Badan Tombol, area konten, gambar mini, pita, dan latar belakang semuanya memiliki overflow: tersembunyi Terapkan. Oleh karena itu, konten terpotong di sepanjang Pengaturan Radius Tepi. Perhatikan bahwa Bayangan yang besar atau deformasi yang melimpah terpotong oleh overflow: hidden (neon-01 / glow-01 pada Animasi Bingkai secara luar biasa dialihkan ke overflow: visible).

Margin

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Point:
Menetapkan margin luar elemen. Ini adalah item dasar untuk mendesain jarak antara elemen depan dan belakang.

Apa yang diubah oleh pengaturan ini:
Desain margin yang lebih baik akan meningkatkan kohesi informasi dan panduan mata.

Tips untuk penyesuaian:
Tetapkan aturan vertikal terlebih dahulu, kemudian Terapkan ke setiap Tombol, sehingga seluruh halaman menjadi rata.

Item pengaturan

• Gunakan Pengaturan Individual: Mengaktifkan penyesuaian detail dengan nilai terpisah untuk atas, kanan, bawah, dan kiri.
• Seragam: Margin + satuan (px / % / vw / vh / auto): menerapkan margin luar yang sama ke empat sisi.
• Individual: Margin Atas / Kanan / Bawah / Kiri + satuan: mengatur margin per sisi untuk kontrol jarak yang lebih presisi.
• Pengalihan Responsif: Mengaktifkan nilai berbeda per perangkat.

Gunakan auto untuk menyelaraskan Tengah ke arah Horizontal (mis. Margin Kiri: auto + Margin Kanan: auto); gunakan vw / vh pada Satuan di Margin untuk menentukan relatif terhadap viewport Otomatis, margin relatif terhadap Otomatis dan disesuaikan Otomatis menurut lebar layar.

Pengisian

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Tujuan:
Menetapkan margin bagian dalam elemen, menghilangkan keketatan Teks dan Pilih Ikon.

Apa yang diubah oleh pengaturan ini:
Pengaturan ini juga secara langsung memengaruhi daya tekan (area ketuk).

Kiat penyesuaian:
SP khususnya rentan terhadap margin vertikal yang tidak mencukupi, jadi sesuaikan berdasarkan margin yang sedikit lebih tebal daripada PC.

Item pengaturan

• Gunakan Pengaturan Individual: Memungkinkan penyesuaian detail per sisi (atas, kanan, bawah, kiri).
• Seragam: Padding + satuan (px / % / vw / vh): menerapkan margin dalam yang sama ke empat sisi.
• Individual: Padding Atas / Kanan / Bawah / Kiri + satuan: mengatur ruang dalam tiap sisi untuk menjaga keterbacaan teks dan ikon.
• Pengalihan Responsif: Memungkinkan pengaturan individual per perangkat.

Posisi

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Titik:
Mengatur posisi penempatan elemen. Anda dapat mengontrol tumpang-tindih dan jarak ke elemen di sekelilingnya.

Apa yang diubah oleh pengaturan ini:
Pengaturan posisi adalah item yang sangat berpengaruh karena dapat menyebabkan kegagalan Tata Letak.

Tips untuk penyesuaian:
Lebih mudah untuk mempertahankan jika Relatif ditetapkan terlebih dahulu dan Absolut dibatasi hanya pada bagian yang diperlukan.

Item konfigurasi.

• Jenis Posisi (relatif/absolut): memilih kriteria penempatan dan menentukan apakah penempatan Normal atau Absolut ditetapkan.
• Atas / Kanan / Bawah / Kiri (Otomatis / Nilai) + Satuan: Mengatur offset di setiap arah dan menyempurnakan posisi.
• Z-Index (Auto / Value): menetapkan urutan tumpang-tindih dan mengontrol hubungan depan-belakang elemen.
• Transformasi Translate X / Y + Satuan: menetapkan pergeseran X/Y dan menyempurnakan posisi visual.

Memilih absolute akan memposisikan elemen relatif terhadap elemen induknya (leluhur terdekat dengan set posisi: relatif). Ini cocok untuk menghasilkan tumpang tindih, karena tidak akan memengaruhi Tata Letak elemen lain, tetapi harus berhati-hati untuk menghindari ketidaksejajaran pada Responsif. Transformasi Translate bekerja secara independen dari position dan hanya memindahkan posisi gambar elemen.

Urutan lapisan.

Mungkin sedikit berbeda dari antarmuka sebenarnya.

Poin:
Mengatur urutan tumpang tindih setiap lapisan. Mengontrol hubungan bolak-balik antara latar belakang, pita, gambar mini dan konten.

Apa yang diubah oleh pengaturan ini:
Menghilangkan masalah teks yang disembunyikan oleh tumpang-tindih yang tidak disengaja.

Kiat untuk penyesuaian:
Perbaiki Content (Isi) di bagian atas terlebih dulu, kemudian atur lapisan dekorasi di bawahnya untuk mengurangi masalah.

Pengaturan.

• Content: mengatur urutan tumpang-tindih lapisan konten, menjaga teks dan informasi penting di bagian atas.
• Thumbnail: mengatur urutan tumpang tindih lapisan gambar mini, sehingga Gambar tidak menyembunyikan teks.
• Band: mengatur urutan tumpang tindih lapisan pita dan mengontrol hubungan depan-belakang pita dekoratif.
• **Latar Belakang`: mengatur urutan tumpang tindih lapisan latar belakang, menjadikannya stabil Tampilan sebagai dasar keseluruhan.

Urutan lapisan dikontrol oleh z-index dari CSS. Semakin tinggi nilainya, semakin banyak Tampilan yang di-zoom ke depan; nilai Default adalah Latar Belakang: 0, Band: 5, Gambar Kecil: 10 dan Konten: 20. Jika terjadi tumpang tindih yang tidak diinginkan, periksa dulu urutannya dengan pengaturan ini.

Indeks z tetap internal:
Di dalam lapisan Konten, Pilih Ikon ditetapkan pada indeks-z: 25 dan Teks ditetapkan pada indeks-z: 30. Elemen semu ::after dalam Bayangan bagian dalam memiliki z-index: 100 dan Animasi Bingkai memiliki z-index: 1001. Nilai-nilai ini tidak dapat berupa Ubah dalam pengaturan urutan lapisan.