Editor Gaya

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

Editor Gaya Bawaan adalah alat lengkap yang memungkinkan Anda untuk membuat, mengelola, dan menerapkan gaya UI untuk pengalaman Roblox melalui kombinasi token , lembar desain , aturan gaya , dan tema .

Akses Editor Gaya melalui tab UI (jika tidak terlihat, akses dari tab Rumah).

Style Editor tool indicated in UI tab of Studio toolbar

Setelah dibuka, klik tombol Buat Desain untuk menghasilkan set gaya dasar.

Create Design button in opening dialog of Style Editor.

Token gaya

Gaya token , didefinisikan melalui atribut dari token StyleSheet , mewakili variabel properti UI yang dapat digunakan di antara gaya dan komponen; misalnya, bisa ada warna umum untuk Frame.BackgroundColor3 , TextLabel.TextColor3 , dan UIStroke.Color .Token dapat dibandingkan dengan variabel CSS.

  1. Buat lembar gaya token baru:

    1. Di kolom kiri Editor Gaya, hover over Token , klik the ⊕ , dan pilih Gaya Token Baru .
    2. Ganti nama lembar baru menjadi TokenSheet.
    New token sheet created in Style Editor.

  2. Dengan lembar token baru yang dipilih, buat beberapa token dengan mengklik Tambahkan Token… di panel utama.Token ini akan digunakan di seluruh panduan ini untuk kedua aturan dan tema .

    Nama TokenJenisNilainya
    GoldColor3#ffcc00
    MagentaColor3#ff0099
    OrangeColor3#dd6030
    OswaldFontOswald
    Rad20UDim0, 20
    RectLUDim20, 300, 0, 160
    SquareLUDim20, 200, 0, 200
    Text24angka24
    Text32angka32
    Tokens added to TokenSheet in Style Editor.

Halaman desain

Gaya desain lembar mengumpulkan aturan gaya dan dapat dihubungkan ke pohon untuk menerapkan properti gaya ke instans UI.Hanya satu StyleSheet yang dapat diterapkan pada pohon tertentu, meskipun Anda dapat menggunakan tema untuk bertukar gaya terkait di UI Anda, konsep yang dibahas nanti dalam panduan ini.

Sebuah lembar desain pra-isi bernama StyleSheet dibuat melalui tombol Buat Desain .Ini berisi aturan kelas untuk objek UI umum seperti Frame dan TextLabel .Ini juga berisi dua instansi StyleDerive yang berasal (mendapatkan) token dan gaya dari lembar gaya dasar untuk digunakan dalam konfigurasi penataan khusus Anda.

Initial configuration of design sheet in Style Editor.

Setelah Anda memiliki lembar desain, Anda dapat mengatur pengujian wadah layar untuk digunakan dengan Editor Gaya, atau wadah pengalaman dalam jika diinginkan.

  1. Pasang di atas StarterGui di Explorer dan masukkan ScreenGui .

  2. Konfirmasikan bahwa instansi baru StyleLink muncul di bawah ScreenGui dengan set properti StyleSheet ke halaman desain StyleSheet .

Peraturan gaya

Gaya aturan berlaku untuk setiap instansi yang sesuai dengan definisi aturan Selector untuk mencocokkan karakteristik seperti nama kelas, tag instans, dan hubungan hierarki.Pada tingkat tinggi, pertandingan dan modifikasi instansi melalui definisi aturan Selector beroperasi melalui:

Peraturan kelas

Gaya kelas selektor menargetkan semua instansi dari kelas UI tertentu.Gaya aturan berikut semua Frames dengan warna latar belakang dan ukuran yang seragam.

  1. Di kolom kiri Editor Gaya, pilih Frame di cabang Elemen UI .

    Default class style in the Style Editor.

  2. Hubungkan dua token gaya yang dibuat sebelumnya ke dua properti :

    PropinsiToken Gaya
    BackgroundColor3$Magenta
    Size$SquareL
    1. Klik Tambahkan Properti... di panel utama dan pilih properti yang diperlukan.Perhatikan bahwa Anda dapat mengetik kata kunci untuk lebih cepat menemukan properti di menu dropdown.
    2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Token Tautan .
    3. Klik $ yang muncul di bidang nilai dan pilih token yang sesuai terkait.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.

  3. Sisipkan baru ke dalam yang sebelumnya Anda buat dan terhubung . Gaya yang Anda definisikan harus secara otomatis diterapkan kepadanya.

    Final styled class rule in the Style Editor.

Aturan tag

Instance tag selektor target spesifik objek UI ditagih melalui CollectionService .Gaya aturan berikut menyiapkan tag dengan warna latar belakang, font, dan ukuran teks khusus.

  1. Di kolom kiri Editor Gaya, hover di atas lembar StyleSheet , klik tombol ⋮ , dan navigasikan ke Baru ⟩ Tag .

    Creation of tag rule in the Style Editor.

  2. Ganti nama aturan tag baru .ButtonPrimary (perhatikan yang di depan . ).

    Tag rule renamed in the Style Editor.

  3. Hubungkan tiga token gaya yang dibuat sebelumnya ke tiga properti :

    PropinsiToken Gaya
    BackgroundColor3$Gold
    FontFace$Oswald
    TextSize$Text32
    1. Klik Tambahkan Properti... di panel utama dan pilih properti yang diperlukan.Ingat bahwa Anda dapat mengetik kata kunci untuk lebih cepat menemukan properti di menu dropdown.
    2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Token Tautan .
    3. Klik $ yang muncul di bidang nilai dan pilih token yang sesuai terkait.

    Token linking workflow diagrammed in the Style Editor.
    Tag rule configured with tokens in the Style Editor.

  4. Sisipkan baru TextButton ke dalam ScreenGui yang sebelumnya Anda buat dan terhubung dan tag sebagai ButtonPrimary.Jalan pintas yang nyaman adalah sebagai berikut:

    1. Pastikan bahwa baru TextButton dipilih di Explorer .
    2. Dengan aturan tag .ButtonPrimary yang dipilih di kolom kiri Editor Gaya, klik Terapkan Tag di panel utama.Gaya yang Anda definisikan harus secara otomatis diterapkan pada tombol.

    Tag linking workflow diagrammed in the Style Editor.
    Final styled tag rule in the Style Editor.

Pengubah UI

Pemodifikasi instansi selektor menerapkan phantom UIComponents seperti UICorner atau UIStroke untuk lebih lanjut memodifikasi gaya objek.Gaya aturan berikut membuat TextLabel dengan ukuran teks khusus dan sudut bulat.

  1. Di kolom kiri Editor Gaya, pilih Label Teks di cabang Elemen UI .

    Default class style in the Style Editor.

  2. Hubungkan token gaya yang sebelumnya dibuat ke properti :

    1. Klik Tambahkan Properti... di panel utama dan pilih properti TextSize.Ingat bahwa Anda dapat mengetik kata kunci untuk lebih cepat menemukan properti di menu dropdown.
    2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Token Tautan .
    3. Klik $ yang muncul di bidang nilai dan pilih token $Text32.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.

Sebuah instansi palsu diperlukan untuk mengonfigurasi dan menerapkan sudut bulat ke elemen lain. Untuk membuat satu:

  1. Di kolom kiri, hover over Label Teks , klik tombol ⋮ , dan navigasikan ke Baru ⟩ Pseudo Instansi ⟩ UICorner .

    Creation of a pseudo instance in the Style Editor.

    Sebuah instansi palsu baru UICorner muncul di bawah elemen Label Teks di kolom kiri.

    Resulting pseudo instance in the Style Editor.

  2. Dengan instansi UICorner baru yang dipilih di kolom kiri, hubungkan token gaya yang sebelumnya dibuat ke properti :

    1. Klik Tambahkan Properti... di panel utama dan pilih properti CornerRadius.
    2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Token Tautan .
    3. Klik $ yang muncul di bidang nilai dan pilih token $Rad20.
    Pseudo instance configured with tokens in the Style Editor.

  3. Sisipkan baru ke dalam yang sebelumnya Anda buat dan terhubung . Gaya yang Anda definisikan harus secara otomatis diterapkan kepadanya.

    Final styled modifier rule in the Style Editor.

Aturan negara

negara selektor sesuai dengan salah satu dari empat nilai enum seperti , memungkinkan Anda secara otomatis mengkonfigurasi perubahan gaya untuk negara interaktif.Pengaturan aturan berikut membuat negara hover dari -4 derajat rotasi untuk semua ImageButtons .

  1. Di kolom kiri Editor Gaya, pilih Tombol Gambar di cabang Elemen UI .

    Default class style in the Style Editor.

  2. Klik tombol ⋮ dan navigasikan ke Baru ⟩ GuiState ⟩ Hover .

    Creation of state rule in the Style Editor.

    Instansi modifikasi status baru Hover muncul di bawah elemen Tombol Gambar di kolom kiri.

    Resulting state rule in the Style Editor.

  3. Dengan modifikasi baru Hover yang dipilih di kolom kiri, klik Tambahkan Properti... di panel utama dan pilih Rotation.Ingat bahwa Anda dapat mengetik kata kunci untuk lebih cepat menemukan properti di menu dropdown.

  4. Masukkan -4 di bidang nilai properti.

    State rule configured with tokens in the Style Editor.

  5. Sisipkan baru ke dalam yang sebelumnya Anda buat dan terhubung .Ketika Anda mengarahkan mouse ke tombol di jendela, itu harus berputar 4 derajat ke kanan.

    Final styled state rule in the Style Editor.

Gaya topik

Gaya tema terdiri dari serangkaian token khusus yang dapat dipertukarkan, misalnya token warna yang mendefinisikan tema "ringan" dan "gelap".

Pembuatan tema

Untuk ekstensibilitas, tema diatur ke dalam folder.Sementara satu folder mungkin cukup untuk sebagian besar tujuan, Anda bebas untuk mengatur tema di folder seperti "warna" atau "font" jika diinginkan.

  1. Buat folder tema baru:

    1. Di kolom kiri Editor Gaya, hover over Tema , klik the ⊕ , dan pilih Tema Baru .
    2. Ganti nama item Folder baru menjadi Umum .
    New themes folder created in the Style Editor.

  2. Buat lembar gaya tema baru:

    1. Pasang mouse di atas folder baru Umum , klik tombol ⋮ , dan pilih Style Sheet Tema Baru .
    2. Ganti namanya menjadi TemaA .
    New theme created in the Style Editor.

Token topik

Setelah tema dibangun, Anda dapat menautkan tokennya ke berbagai properti UI seperti BackgroundColor3 dari sebuah TextButton.Halaman tema harus menggunakan set token umum untuk berfungsi dengan benar.

Dengan TemaA dipilih di kolom kiri Editor Gaya:

  1. Hubungkan tiga token gaya yang dibuat sebelumnya ke tiga token tema baru:

    Token TemaToken Gaya
    BackColor$Gold
    ButtonFont$Oswald
    ButtonTextSize$Text32
    1. Klik Tambahkan Token... di panel utama dan masukkan nama token tema.
    2. Klik $ yang muncul di bidang nilai dan pilih token gaya yang terkait.
    Theme configured with tokens in the Style Editor.

  2. Di kolom kiri Editor Gaya, pilih Tombol Teks di cabang Elemen UI .

    Default class style in the Style Editor.

  3. Hubungkan token tema ke tiga properti baru TextButton:

    PropinsiToken Tema
    BackgroundColor3$BackColor
    FontFace$ButtonFont
    TextSize$ButtonTextSize
    1. Klik Tambahkan Properti... di panel utama dan pilih properti yang diperlukan.
    2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Token Tautan .
    3. Klik $ yang muncul di bidang nilai dan pilih token tema yang tepat.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with theme tokens in the Style Editor.

Duplikasi tema

Setelah Anda memiliki tema yang umumnya ditetapkan, Anda dapat mengulanginya dan mengubah berbagai token untuk mendefinisikan gaya tema unik.

  1. Di kolom kiri Editor Gaya, gulir di atas tema TemaA , klik tombol ⋮ dan pilih Duplikasi .

  2. Ganti nama tema duplikasi menjadi ThemeB .

    Theme duplicated in the Style Editor.

  3. Hubungkan dua token tema ke dua token gaya yang berbeda:

    Token TemaToken Gaya
    BackColor$Magenta
    ButtonTextSize$Text24
    1. Di sebelah kanan bidang nilai properti, klik tombol ⋮ dan pilih Hapus Token .
    2. Klik ⋮ lagi dan pilih Token Tautan .
    3. Di bidang nilainya, klik $ dan pilih token gaya terkait baru.
    Theme configured with tokens in the Style Editor.

Penggantian tema

Setelah Anda memiliki beberapa tema , Anda dapat bertukar di antara mereka melalui folder tema, atau melalui skrip seperti yang dijelaskan di SetDerives() .

  1. Di kolom kiri Editor Gaya, pilih folder Umum di cabang Tema .

  2. Di panel utama, bertukar antara tema menggunakan tombol radio.

    ThemeA swapped in the Style Editor.