Skip to main content

​
1. Tentang komponen kontainer tata letak

​
1.1 Apa itu kontainer tata letak

  • Tata letak: Mengontrol penempatan komponen visual yang sudah ada. Merupakan sebuah tindakan.
  • Kontainer tata letak: Kontainer dengan kemampuan tata letak. Beberapa komponen dapat ditempatkan di dalam kontainer tata letak untuk ditampilkan.
  • Untuk skenario tata letak yang kompleks, disarankan menggunakan flex layout YiDA (flex-layout). Ini juga merupakan pendekatan tata letak CSS utama di industri front-end saat ini.
  • Untuk pengenalan lebih rinci tentang flex layout, lihat tautan tutorial.
Tambahkan komponen kontainer tata letak. Tambahkan komponen individual di dalam kontainer tata letak.

​
1.2 Skenario penggunaan

  • Ketika halaman perlu dibagi menjadi beberapa bagian, misalnya saat halaman harus ditampilkan dalam dua kolom.
  • Ketika halaman perlu menyesuaikan dengan berbagai ukuran layar.
  • Ketika tata letak halaman melibatkan penyusunan bertingkat, posisi relatif, atau desain yang bergantung pada posisi.
  • Ketika gaya halaman yang diterapkan memerlukan teknik tata letak CSS tingkat lanjut.
Untuk atribut, penggunaan, dan contoh komponen, lihat dokumentasi komponen kontainer tata letak.

​
2. Atribut

​
2.1 Tata letak

Pilih templat sistem secara langsung, atau konfigurasikan tata letak kustom. Lihat contoh di bawah. Pilih mode tata letak.

​
2.2 Pengaturan mobile

Menentukan cara komponen disusun pada perangkat mobile. Lihat contoh di bawah. Pengaturan mobile.

​
3. Gaya

Konfigurasi gaya untuk kontainer tata letak. Konfigurasikan gaya komponen.

​
3.1 Pengeditan kode sumber

Edit gaya langsung dalam kode sumber CSS. Div saat ini menggunakan flex layout secara default.

​
3.2 Status

Pengaturan grup berdasarkan status komponen PC tradisional:
  • default: Status normal.
  • hover: Pointer sedang mengarah ke zona aktif komponen tanpa mengklik.
  • focus: Elemen halaman berada pada posisi fokus Cursor.
  • active: Elemen halaman berada dalam status dipilih dan aktif.
Catatan:
  • Status default menimpa ketiga status lainnya.
  • Konfigurasi status hover, focus, dan active saling terisolasi dan tidak mengganggu satu sama lain.
  • Dalam CSS, masing-masing direpresentasikan sebagai selector independen.

​
3.3 Tampilan

Sesuai dengan mode display CSS:
  • block: Model kotak (box model).
  • inline-block: Model kotak inline.
  • inline: Model inline.
  • flex: Model tata letak fleksibel.
Keempatnya adalah model tata letak CSS front-end standar dan tidak dibahas secara rinci di sini. Untuk informasi lebih lanjut, lihat dokumentasi W3C. Sebagai contoh, flex umumnya digunakan dengan cara berikut:
  • Gunakan flex layout untuk menyusun komponen secara horizontal atau vertikal sesuai kebutuhan.
  • Kemudian atur perataan horizontal dan vertikal ke tengah. Lihat contoh di bawah.

​
3.4 Margin dan padding

Margin mengacu pada jarak antara kotak dan node elemen lain dalam box model. Padding mengacu pada ruang kosong antara kotak dan elemen internalnya dalam box model. Lihat contoh di bawah.

​
3.5 Teks

Pengaturan teks memengaruhi judul komponen dalam Grup. Kustomisasi teks atau pilih judul teks preset. Lihat contoh di bawah.

​
3.6 Latar belakang

Pilih dari warna bawaan sistem, atau unggah gambar lokal sebagai latar belakang. Lihat contoh di bawah.

​
3.7 Border

Mengatur efek border komponen kontainer tata letak. Juga mendukung pengaturan corner radius, yang mengontrol tingkat kelengkungan keempat sudut komponen. Lihat contoh di bawah.

​
3.8 Bayangan

Mengatur proyeksi bayangan komponen. Gunakan x dan y untuk mengatur arah, serta blur dan spread untuk mengatur bayangan. Lihat contoh di bawah.

​
3.9 Opasitas

  • Mengatur transparansi keseluruhan blok. Rentangnya adalah 0 hingga 100.
  • Default-nya adalah 100. Nilai 0 berarti sepenuhnya transparan.

​
3.10 Cursor

  • Pilih pointer untuk menampilkan ikon tangan saat pointer diarahkan ke blok.
  • Pilih default untuk menampilkan ikon panah saat pointer diarahkan ke blok.