Grup

​

1. Pengantar komponen Grup

​

1.1 Apa itu Grup

Grup adalah pengelola blok yang direkomendasikan secara resmi, digunakan untuk mengumpulkan modul dengan fungsi serupa ke dalam satu grup. Efeknya ditunjukkan di bawah ini: Komponen Grup Tambah komponen di dalam grup

​

1.2 Kasus penggunaan

Ketika sebuah halaman menampilkan beberapa modul independen (misalnya, produk, rak, dan harga di sebuah toko, dengan setiap produk ditempatkan pada modulnya sendiri) dan setiap modul mencakup beberapa komponen formulir, tempatkan setiap modul ke dalam sebuah grup.

​

2. Atribut

​

2.1 Tampilkan header

Saat toggle dinonaktifkan, semua opsi konfigurasi header dilipat secara otomatis. Tampilkan header vs. sembunyikan header: Tampilkan header Sembunyikan header

​

2.1.1 Judul grup

Menampilkan nama grup. Jika teks terlalu panjang, teks dipotong dan hanya 9 karakter Tionghoa pertama yang ditampilkan.

​

2.1.2 Ikon

Atur ikon untuk grup. Efeknya ditunjukkan di bawah ini: Atur ikon

​

2.1.3 Tips pengguna

Ikon “i” ditambahkan setelah nama grup. Klik ikon tersebut untuk melihat informasi penting. Efeknya ditunjukkan di bawah ini: Tips dan catatan

​

2.1.4 Pembatas header

Saat toggle dinonaktifkan, Pembatas header disembunyikan. Efeknya ditunjukkan di bawah ini: Pembatas header

​

2.2 Pengaturan PC

Mengontrol tampilan komponen Grup pada tata letak halaman formulir. Efeknya ditunjukkan di bawah ini:

​

2.2.1 Tampilkan border

Border ditampilkan di sekeliling komponen Grup. Efek saat mengaktifkan dan menonaktifkannya ditunjukkan di bawah ini: Tampilkan border

​

2.2.2 Margin

Menyesuaikan jarak luar komponen Grup. Efeknya ditunjukkan di bawah ini:

​

2.2.3 Padding

Menyesuaikan jarak dalam komponen Grup. Efeknya ditunjukkan di bawah ini: Aktifkan dan nonaktifkan padding

​

2.3 Pengaturan mobile

Mirip dengan pengaturan PC, tetapi hanya berlaku untuk sisi mobile. Konfigurasinya sama dengan PC. Efeknya ditunjukkan di bawah ini:

​

3. Gaya

Untuk konfigurasi gaya sebuah grup, mode tampilan blok biasanya digunakan secara langsung. Konfigurasi gaya

​

3.1 Edit source code

Edit gaya langsung melalui source code CSS. Div saat ini menggunakan tata letak flex secara default.

​

3.2 Status

Konfigurasikan grup berdasarkan status komponen tradisional sisi PC:

• Default: status normal
• hover: kursor mouse berada di atas hotspot komponen tanpa mengklik
• focus: elemen halaman memiliki fokus kursor
• active: elemen halaman dipilih dan diaktifkan

Catatan:

• Di antara pengaturan status yang berbeda, status Default menimpa 3 status lainnya.
• Status hover, focus, dan active dikonfigurasi secara independen dan tidak saling memengaruhi.
• Di CSS, ketiganya diatur sebagai selector independen.

​

3.3 Tampilan

Sesuai dengan mode display pada CSS:

• block: box model
• inline-block: inline box model
• inline: inline model
• flex: flexible layout model

Keempat mode di atas merupakan model tata letak CSS standar di sisi front-end dan tidak dibahas secara rinci di sini. Untuk informasi lebih lanjut, lihat dokumentasi W3C terkait. Sebagai contoh, penggunaan umum flex meliputi:

• Gunakan tata letak flex untuk menyusun item secara horizontal atau vertikal sesuai kebutuhan.
• Atur perataan tengah baik secara horizontal maupun vertikal. Efeknya ditunjukkan di bawah ini:

​

3.4 Margin dan Padding

Margin adalah jarak antara box model dan elemen node lainnya. Padding adalah ruang kosong antara box model dan elemen di dalamnya. Efeknya ditunjukkan di bawah ini:

​

3.5 Teks

Pengaturan Teks memengaruhi judul komponen di dalam grup. Sesuaikan sendiri atau pilih judul teks secara langsung. Efeknya ditunjukkan di bawah ini:

​

3.6 Latar belakang

Pilih warna sistem bawaan, atau unggah gambar lokal sebagai latar belakang. Efeknya ditunjukkan di bawah ini:

​

3.7 Border

Mengatur efek border komponen Grup. Juga mendukung pengaturan corner radius, yang mengontrol tingkat kelengkungan keempat sudut komponen. Efeknya ditunjukkan di bawah ini:

​

3.8 Bayangan

Atur bayangan komponen. Gunakan x dan y untuk mengatur arah, serta blur dan spread untuk mengatur bayangannya.

​

3.9 Opasitas

Mengatur transparansi keseluruhan modul komponen. Rentangnya 0 sampai 100, dengan Default 100. Nilai 0 berarti sepenuhnya transparan.

​

3.10 Cursor

• Pilih pointer: ikon tangan muncul saat kursor mouse berada di atas blok.
• Pilih Default: ikon panah muncul saat kursor mouse berada di atas blok.