Properti AS sintaks

Halaman ini memperkenalkan sifat ASS umum, sintaks dan nilai yang diterima, dan perbedaan dari CSS. Untuk daftar lengkap properti ASS, lihat Referensi properti ASS.

Properti AS menggunakan sintaks tata bahasa yang sama seperti dokumen CSS W3C:

• Nilai kata kunci muncul sebagai. Contoh: auto, baseline.
• Jenis data dasar muncul antara braket sudut ( < dan >). Contoh: <length>, <color>.
• Non-terminal yang berbagi nama yang sama dengan properti muncul antara kurung sudut dan kutipan lurus tunggal (<' dan '>). Sebagai contoh, <'width'>.

Jika nilai properti memiliki lebih dari satu komponen:

• Kata-kata samping berarti bahwa semua dari mereka harus terjadi dalam urutan yang diberikan.
• Sebuah bar (|) memisahkan dua atau lebih alternatif: persis yang harus terjadi.
• Sebuah bar ganda (||) memisahkan dua atau lebih pilihan: satu atau lebih harus terjadi, dalam urutan apa pun.
• Ampersand ganda (&&) memisahkan dua atau lebih komponen, yang harus terjadi, dalam urutan apa pun.
• Braket persegi ([ ]) kelompok menunjukkan.

Setiap jenis, kata kunci, atau kelompok bercak sudut dapat diikuti dengan pengubah:

• asterisk (*) menunjukkan bahwa jenis preceding, kata, atau kelompok terjadi nol atau lebih kali.
• ditambah (+) menunjukkan bahwa jenis preceding, kata, atau kelompok terjadi satu atau lebih kali.
• tanda pertanyaan (?) menunjukkan bahwa jenis preceding, kata, atau kelompok adalah opsional.
• sepasang angka di kawat gigi keriting ({A,B}) menunjukkan bahwa jenis preceding, kata, atau kelompok terjadi setidaknya A dan pada waktu yang paling B.

Model kotak

Dimensions

width: <length> | auto
height: <length> | auto
min-width: <length> | auto
min-height: <length> | auto
max-width: <length> | none
max-height: <length> | none

width dan height menentukan ukuran elemen. Jika width tidak ditentukan, lebar didasarkan pada lebar konten elemen. Jika height tidak ditentukan, tinggi didasarkan pada ketinggian konten elemen.

Margins

margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
/* Shorthand */
margin: [<length> | auto]{1,4}

Borders

border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
/* Shorthand */
border-width: <length>{1,4}

Padding

padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
/* Shorthand */
padding: <length>{1,4}

Perbedaan dari CSS

Model kotak alternatif yang digunakan AS berbeda dari model kotak CSS standar. Dalam model kotak CSS standar, width dan height menentukan ukuran kotak konten. Ukuran rendered elemen adalah jumlah padding, border-width, dan nilai width / height.

Model Unity setara dengan mengatur properti CSS box-sizing ke border-box. Lihat Dokumentasi MDN untuk rincian.

Flex tata letak

UI Toolkit termasuk elemen visual mesin tata letak yang didasarkan pada tata letak dan sifat styling. Mesin tata letak menerapkan subset Flexbox, sistem tata letak HTML / CSS.

Secara default, semua item ditempatkan secara vertikal dalam wadah mereka.

/* Items */
flex-grow: <number>
flex-shrink: <number>
flex-basis: <length> | auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | stretch

/* Containers */
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
align-content: flex-start | flex-end | center | stretch
align-items: flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around

Positioning

/* The default value is `relative` which positions the element based on its parent. 
If sets to `absolute`, the element leaves its parent layout and values are specified based on the parent bounds.*/
position: absolute | relative

/* The distance from the parent edge or the original position of the element. */
left: <length> | auto
top: <length> | auto
right: <length> | auto
bottom: <length> | auto

Background

background-color: <color>
background-image: <resource> | <url> | none
-unity-background-scale-mode: stretch-to-fill | scale-and-crop | scale-to-fit
-unity-background-image-tint-color: <color>

Slicing

Ketika menetapkan gambar latar belakang, Anda menariknya sehubungan dengan spesifikasi 9 silinder yang disederhanakan:

-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
-unity-slice-scale: <length>

Warna perbatasan

border-color: <color>

Radius perbatasan

border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
/* Shorthand */
border-radius: <length>{1,4}

Perbedaan dari CSS

Properti radius perbatasan bekerja hampir sama di USS dan CSS. Untuk informasi terperinci tentang border-radius, lihat Dokumentasi MDN.

Namun, ada dua perbedaan utama:

• Unity tidak mendukung shorthand kedua-radius (border-radius: (first radius values) / (second radius values);) digunakan untuk membuat sudut elips.
• Unity mengurangi nilai radius perbatasan menjadi setengah dari ukuran elemen pada pixelsUnit terkecil dalam gambar komputer. Ukuran piksel tergantung pada resolusi layar Anda. Pencahayaan pixel dihitung pada setiap piksel layar. More info
  Lihat di Glossary. Misalnya, untuk elemen 100px x 100px, nilai border-radius lebih besar dari 50px berkurang menjadi 50px. Jika Anda menggunakan nilai persentase (%) untuk sifat radius perbatasan, Unity pertama menyelesaikan persentase piksel dan kemudian mengurangi nilai border-radius menjadi setengah dari nilai piksel yang diselesaikan. Jika Anda memiliki nilai radius yang berbeda untuk dua sudut atau lebih, Unity mengurangi nilai yang lebih besar dari setengah ukuran elemen hingga setengah dari ukuran elemen.

Appearance

overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
-unity-paragraph-spacing: <length>
opacity: <number>
visibility: visible | hidden
display: flex | none

-unity-overflow-clip-box mendefinisikan persegi panjang klip untuk konten elemen. Defaultnya adalah padding-box, persegi panjang di luar area padding (sudut hijau dalam gambar model kotak di atas); content-box mewakili nilai di dalam area padding (sudut biru dalam gambar model kotak di atas).

Nilai default display adalah flex. Menyiapkan display ke none menghapus elemen. Menyiapkan visibility untuk hidden menyembunyikan elemen, tetapi elemen masih menempati ruang dalam tata letak.

Perbedaan dari CSS

Properti USS display hanya mendukung subset kecil CSS display properti yang tersedia nilai kata kunci. Versi ASS mendukung kata kunci yang bekerja dengan mesin tata letak Yoga.

• Untuk informasi lebih lanjut tentang Yoga, lihat Layout.
• Untuk informasi lebih lanjut tentang properti CSS display, lihat Dokumentasi MDN.

Sifat teks

Sifat teks mengatur warna, font, ukuran font, dan sifat khusus Unity untuk sumber daya font, gaya font, penyelarasan, bungkus kata, dan kliping.

color: <color>
-unity-font: <resource> | <url>
-unity-font-definition: <resource> | <url>
font-size: <number>
-unity-font-style: normal | italic | bold | bold-and-italic
-unity-text-align: upper-left | middle-left | lower-left | upper-center | middle-center | lower-center | upper-right | middle-right | lower-right
-unity-text-overflow-position: start | middle | end
white-space: normal | nowrap

-unity-text-outline-width: <length>
-unity-text-outline-color: <color>
/* Shorthand */
-unity-text-outline: <length> | <color>

Note: Saat menyiapkan font di UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Builder, kontrol Font pada set InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary, dan set kontrol -unity-font Font Asset. Karena -unity-font-definition mengambil precedence lebih dari -unity-font-definition, jika Anda ingin menggunakan font dari daftar -unity-font, Anda harus memilih Font dari None. Jika tidak, font yang Anda pilih tidak akan mengambil efek.Font Asset. Otherwise, the font you selected won’t take effect.

Cursor

Gunakan tipe tekstur default cursor untuk mengimpor tekstur kustom untuk kursor.

cursor: [ [ <resource> | <url> ] [ <integer> <integer>]? , ] [ arrow | text | resize-vertical | resize-horizontal | link | slide-arrow | resize-up-right | resize-up-left | move-arrow | rotate-arrow | scale-arrow | arrow-plus | arrow-minus | pan | orbit | zoom | fps | split-resize-up-down | split-resize-left-right ]

Perbedaan dari CSS

Dalam CSS, Anda dapat menentukan beberapa kurs khusus opsional dan kata kunci wajib dalam deklarasi gaya cursor tunggal. Ketika Anda menentukan beberapa kurs, mereka membentuk rantai fallback. Jika browser tidak dapat memuat kursor kustom pertama, itu mencoba masing-masing orang lain dalam urutan sampai salah satu dari mereka beban atau tidak ada lagi obat kustom untuk mencoba. Jika browser tidak dapat memuat obat kustom, itu menggunakan kata kunci.

Di AS, kurs khusus dan kata kunci saling eksklusif. deklarasi gaya cursor hanya dapat memiliki satu kursor kustom atau satu kata kunci.

Untuk informasi terperinci tentang properti CSS cursor, lihat Dokumentasi MDN.

Opacity

opacity: <number>

Perbedaan dari CSS

USS opacity mirip dengan CSS opacity. Tingkat opacity unsur induk mempengaruhi perceived opacity elemen anak. Perceivability berbeda antara opacity ASS dan opacity CSS.

Dalam contoh USS berikut, kotak biru adalah anak kotak merah. Persegi merah memiliki opacity 0.5.

.red {
    background-color: red;
    opacity: 0.5;
}

.blue {
    background-color: blue;
    left: 20px;
    top: 20px;
}

Meskipun kotak biru tidak memiliki nilai opacity, memiliki opacity yang dirasakan dari 0.5 dari kotak merah. Anda dapat melihat kotak merah melalui kotak biru.

Di CSS, jika Anda menerapkan gaya yang sama, kedua kotak merah dan biru 50% transparan. Namun, Anda tidak dapat melihat kotak merah melalui kotak biru, kecuali Anda juga mengatur opacity biru menjadi kurang dari 1.

Sumber daya tambahan

• USS mengubah
• USS transisi