Tulis style sheet

Untuk menjaga hal-hal yang terorganisir, UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Toolkit telah mengadopsi BEM sebagai metodologi untuk elemen styling. Saat menggunakan BEM tidak wajib, disarankan.

Tentang BEM

BEM berdiri untuk Pengubah Elemen Blok. BEM adalah sistem sederhana yang membantu Anda menulis terstruktur, non-ambigu, mudah untuk mempertahankan selektif. Dengan BEM, Anda menetapkan kelas untuk elemen dan kemudian menggunakan kelas-kelas ini sebagai pemilih dalam style sheet.

Kelas BEM memiliki hingga tiga komponen:

• Nama blok: blok adalah entitas atau kontrol yang berarti, mandiri. Sebagai contoh, menu, button, list-view
• Nama elemen: bagian dari blok yang tidak memiliki makna yang mandiri dan secara semantically terikat ke bloknya. Nama elemen ditujui dengan nama blok menggunakan dua core. Sebagai contoh, menu__item, button__icon, atau list-view__item
• Pengubah: bendera yang mengubah penampilan atau perilaku blok atau elemen. Menerapkan modifier ke nama blok atau elemen dengan dua dasbor. Sebagai contoh, menu--disabled, menu__item--disabled, button--small, atau list-view__item--selected.

Setiap bagian nama dapat terdiri dari huruf Latin, digit, dan dasbor. Setiap bagian nama bergabung bersama dengan underscore ganda __ atau dash ganda --.

Contoh berikut menunjukkan kode XML untuk menu:

<VisualElement class="menu">
    <Label class="menu__item" text="Banana" />
    <Label class="menu__item" text="Apple" />
    <Label class="menu__item menu__item--disabled" text="Orange" />
</VisualElement>

Selectors

Karena setiap elemen dilengkapi dengan kelas yang menggambarkan peran dan penampilannya, Anda dapat menulis sebagian besar pemilih Anda hanya dengan satu nama kelas:

.menu {
}

.menu__item {
}

.menu__item--disabled {
}

Anda harus dapat elemen gaya menggunakan nama kelas tunggal. Namun, dalam beberapa kasus, Anda mungkin perlu menggunakan pemilih yang kompleks. Misalnya, Anda bisa menggunakan pemilih yang kompleks ketika gaya elemen tergantung pada pengubah bloknya:

.button {
}

.button__icon {
}

.button--small {
}

.button--small .button__icon {
}

Berhati-hatilah bahwa Anda tidak menentukan pemilih panjang. pemilih panjang dapat menunjukkan inkonsistensi dalam desain grafis UI Anda. Anda juga harus menghindari menggunakan nama tipe (Button, Label) atau nama elemen (#my-button) dalam pemilih BEM Anda.

Membuat VisualElement BEM-friendly

UI Toolkit mematuhi BEM. Setiap elemen visual memiliki nama kelas yang diperlukan. Sebagai contoh, semua TextElement memiliki kelas unity-text-element. Setiap contoh Button, yang berasal dari TextElement, memiliki daftar kelasnya yang diisi dengan kelas unity-button dan unity-text-element.

Jika Anda mendapatkan elemen baru dari VisualElement atau salah satu keturunannya, mengikuti panduan ini untuk memastikan bahwa elemen Anda mudah untuk gaya menggunakan metodologi BEM:

• Gunakan AddToClassList() di konstruktor untuk menambahkan kelas USS yang relevan untuk instance elemen Anda.
• Jika elemen baru Anda menggigit elemen anak dalam konstruktornya, menetapkan kelas yang relevan untuk anak-anak. Contohnya, my-block__first-child, my-block__other-child.
• Jika elemen Anda mendukung beberapa negara atau varian, seperti kecil dan besar, tambahkan dan menghapus kelas yang relevan ketika perubahan state elemen atau ketika varian elemen dipilih.
• Jika elemen Anda dimaksudkan untuk digunakan dalam proyek lain, pertimbangkan untuk memperbaiki kelas Anda untuk menghindari konflik dengan nama kelas pengguna yang ada.