Kiểu dáng và giao diện

Tab Design trong bảng bên phải kiểm soát giao diện trực quan của từng phần tử. Các thuộc tính có sẵn tùy thuộc vào loại phần tử, nhưng hầu hết các phần tử đều có chung các tùy chọn tạo kiểu.

Về kích thước, khoảng cách và vị trí, xem Bố cục và định vị.

Hiển thị

Nút bật tắt Visibility xác định xem phần tử đó có hiển thị trên màn hình hay không.

Show (mặc định): Phần tử luôn hiển thị.
Conditional: Phần tử chỉ hiển thị khi đáp ứng các điều kiện cụ thể. Xem Hiển thị có điều kiện để biết thêm thông tin.
Hide: Phần tử luôn ẩn. Dùng tùy chọn này để tạm thời xóa một phần tử khỏi flow mà không cần xóa hẳn.

Tô màu nền

Phần Fill điều chỉnh nền của phần tử. Có bốn kiểu tô màu nền: màu đặc, gradient, hình ảnh và video.

Dùng thuộc tính này để đặt ảnh hero / video cho toàn bộ màn hình.

Solid color . Dùng bộ chọn màu, nhập giá trị hex, hoặc chỉ định màu dùng chung cho toàn dự án. Điều chỉnh opacity để làm nền trong suốt một phần.
Gradient . Thêm gradient với hai điểm màu trở lên. Kéo các điểm màu để thay đổi hiệu ứng chuyển tiếp, và điều chỉnh góc gradient để kiểm soát hướng.

Image hoặc Video . Đặt hình ản��h / video làm nền cho phần tử.

Đường viền

Đường viền mặc định bị tắt. Nhấn bên cạnh Border trong bảng bên phải để thêm đường viền. Để xóa đường viền, nhấn bên cạnh tiêu đề Border.

Khi đã có đường viền, bạn có thể cấu hình:

Color: Dùng bộ chọn màu, nhập giá trị hex, hoặc gán màu toàn dự án. Điều chỉnh opacity để làm đường viền bán trong suốt.
Width: Độ dày của đường viền tính bằng pixel.

Góc bo tròn

Mục Corners kiểm soát bán kính viền (góc bo tròn).

Radius slider: Đặt cùng một bán kính cho cả bốn góc
Per-corner toggle : Bật để đặt bán kính khác nhau cho từng góc riêng lẻ

Hiệu ứng

Nhấn nút dấu cộng bên cạnh Effects để thêm một hoặc nhiều hiệu ứng hình ảnh:

Drop shadow: Bóng đổ phía sau phần tử
Inner shadow: Bóng đổ bên trong ranh giới phần tử
Background blur: Làm mờ nền phía sau
Layer blur: Làm mờ phần tử và các phần tử con của nó

Bạn có thể kết hợp nhiều hiệu ứng trên cùng một phần tử. Nhấn vào biểu tượng hiển thị để tạm thời tắt một hiệu ứng.

Hiệu ứng động

Nhấn nút bên cạnh Animation để thêm hiệu ứng động. Hiện tại, Pulse là hiệu ứng duy nhất có sẵn — phần tử sẽ phóng to thu nhỏ nhịp nhàng để thu hút sự chú ý.

Cấu hình hiệu ứng Pulse với các thông số sau:

Tham số	Mô tả
Scale amount (%)	Mức độ phóng to của phần tử so với kích thước gốc
Duration (ms)	Độ dài của một chu kỳ animation
Delay between loops (ms)	Khoảng dừng giữa các lần lặp
Shadow color	Màu của hiệu ứng bóng đổ nhấp nháy
Shadow size (px)	Kích thước của bóng đổ nhấp nháy

Xem trước hoạt ảnh

Theo mặc định, builder hiển thị màn hình tĩnh — các hoạt ảnh đứng yên cho đến khi bạn bật chúng lên. Có hai cách:

Nhấp vào nút Toggle animations phía trên phần xem trước thiết bị. Nút này bật/tắt hoạt ảnh của màn hình — sau khi bật, hoạt ảnh chạy liên tục cho đến khi bạn nhấp lại. Nút chỉ xuất hiện khi màn hình đang chọn có ít nhất một hoạt ảnh.
Mở menu ngữ cảnh của màn hình (biểu tượng ba chấm bên cạnh layer màn hình) và chọn Play Animation.

Giao diện

Opacity: Từ 0% (trong suốt hoàn toàn) đến 100% (không trong suốt)
Rotation: Nhập giá trị tính bằng độ để xoay phần tử

Thuộc tính kiểu chữ (phần tử văn bản)

Các phần tử văn bản hiển thị mục Typography với các điều khiển sau:

Phông chữ

Xem thêm: Phông chữ tùy chỉnh

Nhấn vào dropdown phông chữ để mở bộ chọn phông chữ. Bộ chọn có hai tab:

Styles: Liệt kê các kiểu chữ đã lưu trong dự án của bạn. Chọn một kiểu để áp dụng toàn bộ cài đặt typography của nó cùng một lúc.
Fonts: Liệt kê tất cả các họ phông chữ có sẵn. Tìm kiếm hoặc cuộn để tìm phông chữ bạn cần. Phông chữ tích hợp sẵn có thể hiển thị khác nhau trên các thiết bị — để hiển thị nhất quán, hãy tải lên phông chữ tùy chỉnh.

Kích thước và độ đậm

Đối với font tùy chỉnh, các điều khiển Weight, Bold và Italic chỉ ảnh hưởng đến bản xem trước tích hợp trong trình chỉnh sửa. Để hiển thị các độ đậm và kiểu chữ khác nhau, hãy tải lên từng biến thể của font dưới dạng một file riêng.

Weight: Chọn độ đậm của font từ menu thả xuống
Size: Chọn kích thước từ menu thả xuống hoặc nhập giá trị tùy chỉnh

Màu sắc

Nhấp vào ô màu để mở bộ chọn màu. Nhập giá trị hex, dùng bảng màu, hoặc chọn một trong các style có thể tái sử dụng. Điều chỉnh thanh trượt opacity để làm văn bản trong suốt một phần.

Căn chỉnh

Hai nhóm điều khiển căn chỉnh:

Horizontal: Trái , Giữa , hoặc Phải
Vertical: Trên , Giữa , hoặc Dưới

Trang trí

None : Không có trang trí (mặc định)
Underline : Thêm gạch chân vào văn bản
Strikethrough : Thêm đường gạch ngang xuyên văn bản

Cắt bớt văn bản

Bật tính năng cắt bớt để ngắt văn bản vượt quá cài đặt Max Lines. Tính năng này hữu ích khi hỗ trợ nhiều ngôn ngữ: nếu chuỗi đã dịch dài hơn bản gốc, việc cắt bớt sẽ ngăn nó làm vỡ bố cục.

Khi bạn chọn một phần tử văn bản, một thanh công cụ inline cũng xuất hiện phía trên nó trên canvas. Thanh công cụ này cung cấp quyền truy cập nhanh vào font, độ đậm, cỡ chữ và căn chỉnh mà không cần cuộn qua bảng bên phải.

Cài đặt theo trạng thái (phần tử tương tác)

Các phần tử tương tác hỗ trợ nhiều trạng thái trực quan. Khi bạn chọn một phần tử như vậy, mục States sẽ xuất hiện trong bảng bên phải. Chuyển đổi giữa các trạng thái để cấu hình các thuộc tính trực quan khác nhau cho từng trạng thái.

Mỗi trạng thái có thể ghi đè bất kỳ thuộc tính trực quan nào — fill, viền, màu chữ, opacity và nhiều hơn nữa.

Trạng thái có thể chọn

Bài viết chính: Phần tử có thể chọn

Các phần tử thuộc nhóm có thể chọn (tùy chọn quiz, sản phẩm, tab, nút bật/tắt dùng thử) mặc định có hai trạng thái:

Default: Giao diện bình thường của phần tử
Selected: Giao diện khi người dùng đã chọn tùy chọn này. Ghi đè các thuộc tính như màu nền, màu viền và màu chữ để làm nổi bật lựa chọn đang hoạt động Để tạo kiểu cho một phần tử có thể chọn khi nó không tương tác được, hãy thêm trạng thái thứ ba theo cách thủ công. Mở States settings và thêm Disabled state.

Trạng thái Disabled được điều khiển bởi điều kiện. Chọn nó và nhấp vào Set conditions để xác định khi nào phần tử trở nên bị vô hiệu hóa trong lúc chạy, ví dụ như khi một trường bắt buộc bị trống.

Trạng thái input

Các trường nhập liệu cung cấp thêm các trạng thái:

Default: Giao diện bình thường, chưa được focus
Active: Trường đang được focus và sẵn sàng nhận dữ liệu nhập
Invalid: Giá trị đã nhập không qua xác thực
Disabled: Trường không tương tác

Switching states and applying visual overrides

Các phần tử có trạng thái khác

Một số phần tử hiển thị định dạng theo trạng thái ngoài mẫu Default / Selected / Disabled tiêu chuẩn:

Bước của progress indicator — ba trạng thái mỗi bước: Completed, Current và Upcoming.
Dấu chấm carousel — hai biến thể màu: Color cho các dấu chấm không hoạt động và Active Color cho dấu chấm của slide hiện tại.

Style có thể tái sử dụng

Bảng Styles trong thanh bên trái cho phép bạn định nghĩa các style có thể tái sử dụng áp dụng trong toàn bộ flow. Có hai loại style: text style và color style. Bạn cần dùng color style để bật tính năng hỗ trợ dark mode.

Kiểu văn bản

Bài viết chính: Nội dung văn bản

Kiểu văn bản lưu trữ toàn bộ cài đặt typography — bao gồm họ font, độ đậm, kích thước, chiều cao dòng, căn chỉnh và trang trí. Mỗi template flow đều có sẵn các preset mặc định, và bạn có thể tạo thêm kiểu tùy chỉnh.

Để tạo một kiểu văn bản:

Mở bảng Styles và chọn tab Text.
Nhấp vào Create style.
Nhập tên và cấu hình các thiết lập typography.
Nhấp vào Create.

Để áp dụng text style, chọn một phần tử văn bản và chọn style từ dropdown font trong mục Typography.

Style update propagating across the flow

Màu sắc theo kiểu dáng

Màu sắc theo kiểu dáng là các màu được đặt tên mà bạn có thể tham chiếu xuyên suốt flow của mình. Mỗi kiểu màu có một tên (như “Primary text” hoặc “Brand”), giá trị hex và số lần sử dụng cho biết có bao nhiêu phần tử đang tham chiếu đến nó.

Để tạo một kiểu màu:

Mở bảng Styles và chọn tab Colors.
Nhấn Create style.
Nhập tên và chọn màu. Khi bạn cập nhật một kiểu màu, mọi phần tử tham chiếu đến nó sẽ tự động được cập nhật.

Chế độ tối

Bài viết chính: Chế độ tối

A screen previewed in light and dark mode

Nếu cần, bạn có thể thêm hai biến thể cho mỗi kiểu màu — một cho chế độ sáng và một cho chế độ tối . SDK sẽ tự động áp dụng biến thể phù hợp dựa trên chế độ màu hiện tại của thiết bị. Để xem trước chế độ tối trong builder, hãy dùng nút chuyển đổi giao diện trong thanh công cụ phía dưới.