Trình Chỉnh Phong Cách

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Trình soạn thảo phong cách tích hợp là một công cụ toàn diện cho phép bạn tạo, quản lý và áp dụng kiểu UI cho trải nghiệm Roblox thông qua sự kết hợp của token , tờ thiết kế , quy tắc kiểu và chủ đề .

Truy cập Trình soạn thảo phong cách thông qua tab UI (nếu nó không hiển thị, truy cập từ tab Trang chủ).

Style Editor tool indicated in UI tab of Studio toolbar

Khi mở, hãy nhấp vào nút Tạo thiết kế để tạo một bộ bảng phong cách cơ bản.

Create Design button in opening dialog of Style Editor.

Xu phong cách

Phong cách token , được xác định thông qua thuộc tính của một token StyleSheet , đại diện cho các biến thuộc tính UI có thể được sử dụng trên các phong cách và thành phần; ví dụ, có thể có một màu chung cho một Frame.BackgroundColor3 , TextLabel.TextColor3UIStroke.Color .Token có thể so sánh với biến CSS.

  1. Tạo một trang phong cách token mới:

    1. Trong cột bên trái của Trình soạn thảo phong cách, di chuột qua Token , nhấp vào và chọn Tờ phong cách Token mới .
    2. Đổi tên trang tính mới thành TokenSheet.
    New token sheet created in Style Editor.
  2. Với trang bảng mã mới được chọn, tạo một số token bằng cách nhấp vào Thêm một token… trong bảng điều khiển chính.Các token này sẽ được sử dụng suốt hướng dẫn này cho cả quy tắcchủ đề .

    Tên tokenLoạiGiá trị
    GoldColor3#ffcc00
    MagentaColor3#ff0099
    OrangeColor3#dd6030
    OswaldFontOswald
    Rad20UDim0, 20
    RectLUDim20, 300, 0, 160
    SquareLUDim20, 200, 0, 200
    Text24số24
    Text32số32
    Tokens added to TokenSheet in Style Editor.

Tờ thiết kế

Một tờ phong cách thiết kế tổng hợp các quy tắc kiểu style và có thể được liên kết với DataModel cây để áp dụng các thuộc tính phong cách cho các thực thể UI.Chỉ một StyleSheet có thể áp dụng cho một cây nhất định, mặc dù bạn có thể sử dụng chủ đề để thay đổi các phong cách liên quan trên UI của bạn, một khái niệm được bao gồm sau này trong hướng dẫn này.

Một tờ thiết kế đã được lấp đầy có tên là Tờ phong cách được tạo bằng nút Tạo thiết kế .Nó bao gồm các quy tắc lớp cho các đối tượng UI phổ biến như FrameTextLabel .Nó cũng bao gồm hai StyleDerive instance mà có nguồn gốc (thừa kế) token và phong cách từ trang phong cách cơ bản để sử dụng trong cấu hình phong cách tùy chỉnh của bạn.

Initial configuration of design sheet in Style Editor.

Khi bạn có một tờ thiết kế, bạn có thể thiết lập một thùng chứa kiểm tra trên màn hình để sử dụng với Trình biên tập phong cách, hoặc một thùng chứa trong kinh nghiệm nếu muốn.

  1. Chuyển qua StarterGui trong Trình khám phá và chèn ScreenGui .

  2. Xác nhận rằng một instance mới StyleLink xuất hiện dưới ScreenGui với bộ đặt tính StyleSheet của nó được đặt vào trang thiết kế Sheet phong cách .

Quy tắc phong cách

Phong cách quy tắc áp dụng cho mọi ví dụ phù hợp với định nghĩa Selector để phù hợp với các tính năng như tên lớp, thẻ của thực thể và các mối quan hệ cấu trúc.Ở cấp cao, phù hợp và chỉnh sửa ví dụ thông qua định nghĩa Selector của một quy tắc hoạt động thông qua:

  • Các máy chọn lớp Roblox class mục tiêu tất cả các thực thể của một lớp UI cụ thể, ví dụ Frame , ImageLabel , TextButton , v.v.
  • Các thẻ instance tag chọn các đối tượng UI cụ thể mục tiêu tagged thông qua CollectionService .
  • Ví dụ biến thể áp dụng thông qua phantom UIComponents như UICorner hoặc UIStroke .
  • trạng thái lựa chọn phù hợp với một trong bốn giá trị enum như .
  • Lựa chọn tên của instance theo giá trị của đối tượng UI Instance.Name.

Quy tắc lớp

Một style lớp selector mục tiêu tất cả các ví dụ của một lớp UI cụ thể.Các kiểu cài đặt quy tắc sau đây tất cả Frames với một màu nền và kích thước đồng nhất.

  1. Trong cột bên trái của Trình soạn thảo phong cách, chọn Khung trong chi nhánh Nguyên tố UI .

    Default class style in the Style Editor.
  2. Kết nối hai thẻ phong cách đã tạo trước style token đến hai thuộc tính Frame:

    Tài sảnXu phong cách
    BackgroundColor3$Magenta
    Size$SquareL
    1. Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính cần thiết.Lưu ý rằng bạn có thể nhập từ khóa để tìm nhanh hơn các thuộc tính trong menu thả xuống.
    2. Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút và chọn Token Liên kết .
    3. Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ liên quan thích hợp.

    Token linking workflow diagrammed in the Style Editor.
    Class rule configured with tokens in the Style Editor.
  3. Chèn một kiểu mới vào bạn đã tạo và liên kết trước đó . Các kiểu bạn đã định nghĩa sẽ tự động áp dụng cho nó.

    Final styled class rule in the Style Editor.

Quy tắc nhãn

Thẻ instance tag chọn các đối tượng UI cụ thể tagged thông qua CollectionService .Các kiểu cài đặt quy tắc sau đây thiết lập thẻ TextButton được gắn thẻ là ButtonPrimary với một màu nền, phông chữ và kích thước văn bản tùy chỉnh.

  1. Trong cột bên trái của Trình soạn thảo phong cách, di chuột qua tờ Tờ phong cách tờ, nhấp vào nút và điều hướng đến MớiThẻ .

    Creation of tag rule in the Style Editor.
  2. Đổi tên quy tắc thẻ mới (lưu ý dẫn đầu ) .

    Tag rule renamed in the Style Editor.
  3. Kết nối ba thẻ phong cách đã tạo trước style token đến ba đặc tính TextButton :

    Tài sảnXu phong cách
    BackgroundColor3$Gold
    FontFace$Oswald
    TextSize$Text32
    1. Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính cần thiết.Hãy nhớ rằng bạn có thể nhập từ khóa để tìm kiếm các thuộc tính nhanh hơn trong menu thả xuống.
    2. Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút và chọn Token Liên kết .
    3. Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ liên quan thích hợp.

    Token linking workflow diagrammed in the Style Editor.
    Tag rule configured with tokens in the Style Editor.
  4. Thêm một mới vào bạn đã tạo và liên kết trước đó và thẻ nó như .Một lối tắt thuận tiện như sau:

    1. Hãy chắc chắn rằng mới TextButton được chọn trong Explorer .
    2. Với quy tắc thẻ .ButtonPrimary được chọn trong cột bên trái của Trình soạn thảo phong cách, nhấp vào Áp dụng thẻ trong bảng điều khiển chính.Các kiểu bạn đã xác định sẽ tự động áp dụng cho nút.

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

Người thay đổi UI

Các trình biến thể ví dụ chọn phantom UIComponents như UICorner hoặc UIStroke để làm cho một đối tượng trở nên phong phú hơn.Các kiểu cài đặt quy tắc sau đây thiết lập một TextLabel với kích thước văn bản tùy chỉnh và các cạnh bo tròn.

  1. Trong cột bên trái của Trình soạn thảo phong cách, chọn Thẻ văn bản trong chi nhánh Các thành phần UI .

    Default class style in the Style Editor.
  2. Kết nối một thẻ phong cách đã tạo trước style token với thuộc tính TextSize:

    1. Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính TextSize.Hãy nhớ rằng bạn có thể nhập từ khóa để tìm kiếm các thuộc tính nhanh hơn trong menu thả xuống.
    2. Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút và chọn Token Liên kết .
    3. Nhấp vào $ xuất hiện trong trường giá trị và chọn token $Text32.

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

Một pseudo instance là cần thiết để cấu hình và áp dụng các cạnh bo tròn cho các thành phần khác. Để tạo một:

  1. Trong cột bên trái, di chuột qua Nhãn văn bản , nhấp vào nút , và điều hướng đến Mới > Pseudo Instances > Góc UICorner .

    Creation of a pseudo instance in the Style Editor.

    Một ví dụ mới UICorner hiện lên dưới thành phần TextLabel trong cột bên trái.

    Resulting pseudo instance in the Style Editor.
  2. Với ví dụ mới UICorner được chọn trong cột bên trái, liên kết một token phong cách đã tạo trước style token đến thuộc tính CornerRadius

    1. Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính CornerRadius.
    2. Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút và chọn Token Liên kết .
    3. Nhấp vào $ xuất hiện trong trường giá trị và chọn token $Rad20.
    Pseudo instance configured with tokens in the Style Editor.
  3. Chèn một kiểu mới vào bạn đã tạo và liên kết trước đó . Các kiểu bạn đã định nghĩa sẽ tự động áp dụng cho nó.

    Final styled modifier rule in the Style Editor.

Quy tắc tiểu bang

trạng thái selectors tương ứng với một trong bốn giá trị enum như , cho phép bạn tự động cấu hình thay đổi phong cách cho các trạng thái tương tác.Cài đặt quy tắc sau đây tạo ra một trạng thái di chuột của -4 độ xoay cho tất cả ImageButtons .

  1. Trong cột bên trái của Trình soạn thảo phong cách, chọn Nút hình ảnh trong chi nhánh Các thành phần UI .

    Default class style in the Style Editor.
  2. Nhấp vào nút và di chuyển qua đến MớiGuiState > Chuyển sang .

    Creation of state rule in the Style Editor.

    Một ví dụ chỉnh sửa trạng thái mới Hover xuất hiện dưới đoạn ImageButton trong cột bên trái.

    Resulting state rule in the Style Editor.
  3. Với người thay đổi mới Hover được chọn trong cột bên trái, nhấp vào Thêm một thuộc tính… trong bảng điều khiển chính và chọn Rotation .Hãy nhớ rằng bạn có thể nhập từ khóa để tìm kiếm các thuộc tính nhanh hơn trong menu thả xuống.

  4. Nhập -4 vào trường giá trị của thuộc tính.

    State rule configured with tokens in the Style Editor.
  5. Chèn một cái mới vào bạn đã tạo và liên kết trước đó .Khi bạn di chuột qua nút trong viewport, nó nên xoay 4 độ theo chiều kim đồng hồ.

    Final styled state rule in the Style Editor.

Chủ đề phong cách

Chủ đề phong cách bao gồm các bộ token cụ thể có thể được thay thế, ví dụ như token màu định nghĩa một chủ đề "ánh sáng" và "bóng tối".

Tạo chủ đề

Đối với khả năng mở rộng, chủ đề được tổ chức thành các thư mục.Trong khi một thư mục duy nhất có thể đủ cho hầu hết mục đích, bạn có thể tự do sắp xếp chủ đề trong các thư mục như "màu" hoặc "phông chữ" nếu muốn.

  1. Tạo một thư mục chủ đề mới:

    1. Trong cột bên trái của Trình soạn thảo phong cách, di chuột qua Chủ đề , nhấp vào và chọn Chủ đề mới .
    2. Đổi tên mục thư mới Thư mục thành Tổng quát .
    New themes folder created in the Style Editor.
  2. Tạo một trang phong cách chủ đề mới:

    1. Chuyển qua trên thư mục mới Chung , nhấp vào nút và chọn Tờ phiếu chủ đề mới .
    2. Đổi tên thành ThemeA .
    New theme created in the Style Editor.

Token chủ đề

Khi một chủ đề được xây dựng, bạn có thể liên kết các token của nó với các thuộc tính UI khác nhau như BackgroundColor3 của một TextButton.Các tờ nhạc phải sử dụng một bộ thẻ chung để hoạt động đúng cách.

Với Chủ đềA được chọn trong cột bên trái của Trình soạn thảo phong cách:

  1. Kết nối ba thẻ phong cách đã tạo trước style tokens đến ba thẻ chủ đề mới:

    Token chủ đềXu phong cách
    BackColor$Gold
    ButtonFont$Oswald
    ButtonTextSize$Text32
    1. Nhấp vào Thêm một token… trong bảng chính và nhập tên token chủ đề.
    2. Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ phong cách liên quan.
    Theme configured with tokens in the Style Editor.
  2. Trong cột bên trái của Trình soạn thảo phong cách, chọn TextButton trong chi nhánh UI Elements .

    Default class style in the Style Editor.
  3. Kết nối các token chủ đề với ba thuộc tính mới TextButton :

    Tài sảnToken chủ đề
    BackgroundColor3$BackColor
    FontFace$ButtonFont
    TextSize$ButtonTextSize
    1. Nhấp vào Thêm một thuộc tính… trong bảng chính và chọn thuộc tính cần thiết.
    2. Thay vì nhập một giá trị tĩnh, hãy nhấp vào nút và chọn Token Liên kết .
    3. Nhấp vào $ mà xuất hiện trong trường giá trị và chọn thẻ chủ đề thích hợp.

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

Sao chép chủ đề

Khi bạn đã có một chủ đề chung được thiết lập, bạn có thể sao chép nó và thay đổi các token khác nhau để xác định một phong cách chủ đề duy nhất.

  1. Trong cột bên trái của Trình soạn thảo phong cách, di chuột qua chủ đề ThemeA , nhấp vào nút và chọn Lặp lại .

  2. Đổi tên chủ đề bị sao chép thành ThemeB .

    Theme duplicated in the Style Editor.
  3. Liên kết hai token chủ đề đến hai token phong cách khác nhau:

    Token chủ đềXu phong cách
    BackColor$Magenta
    ButtonTextSize$Text24
    1. Bên phải của trường giá trị của thuộc tính, nhấp vào nút và chọn Phá vỡ liên kết Token .
    2. Nhấp lại và chọn Token Liên kết .
    3. Trong trường giá trị của nó, nhấp vào $ và chọn thẻ phong cách mới liên quan.
    Theme configured with tokens in the Style Editor.

Chuyển đổi chủ đề

Khi bạn có nhiều chủ đề, bạn có thể chuyển đổi giữa chúng thông qua thư mục của chủ đề, hoặc thông qua một kịch bản như được mô tả trong SetDerives() .

  1. Trong cột bên trái của Trình soạn thảo phong cách, hãy chọn thư mục Tổng quát trong nhánh Chủ đề .

  2. Trong bảng chính, thay đổi giữa các chủ đề bằng cách sử dụng nút radio.

    ThemeA swapped in the Style Editor.