Trạng thái phần tử

Các phần tử flow tương tác thay đổi giao diện dựa trên hành động của người dùng: một tùy chọn quiz được nhấn sẽ chuyển sang trạng thái Selected (Đã chọn), một ô nhập liệu được focus sẽ chuyển sang trạng thái Active (Đang hoạt động). Một số trạng thái được điều khiển theo điều kiện — ví dụ, bạn có thể disable (vô hiệu hóa) một nút. Hãy tùy chỉnh style riêng cho từng trạng thái để cung cấp phản hồi trực quan cho người dùng mà không cần viết code ứng dụng.

Các trạng thái có sẵn theo loại phần tử

Loại phần tử	Trạng thái tích hợp sẵn	Trạng thái có thể thêm
Phần tử có thể chọn	Default, Selected	Disabled
Ô nhập liệu	Default, Active, Invalid	Disabled
Bất kỳ phần tử nào có tương tác chạm — nút, hình ảnh, icon, container, v.v.	Default	Disabled
Các bước chỉ báo tiến trình	Completed, Current, Upcoming	—
Các trạng thái Addable không hiển thị mặc định — mở States settings để thêm chúng. Chúng được điều khiển bởi điều kiện: bạn tự định nghĩa khi nào chúng được kích hoạt.

Cách tạo kiểu cho một trạng thái

Phần States trong panel bên phải của phần tử được chọn

Chọn một phần tử. Phần States trong panel bên phải liệt kê các trạng thái mà phần tử đó hỗ trợ.
Trong phần States, kích hoạt trạng thái mục tiêu. Thêm trạng thái Disabled theo điều kiện nếu cần.
Thay đổi bất kỳ thuộc tính nào — fill, border, typography, v.v. Thay đổi đó chỉ áp dụng cho trạng thái đó. Nested elements trở thành stateful cùng với parent. Mọi thay đổi trên child đều được áp dụng trong phạm vi trạng thái active của parent.
Builder áp dụng style phù hợp tại runtime.

Trạng thái của phần tử có thể chọn

Phần tử có thể chọn với trạng thái Selected được kích hoạt và áp dụng ghi đè kiểu dáng

Các phần tử có thể chọn — tùy chọn quiz, sản phẩm, tab, nút bật/tắt dùng thử, và bất kỳ phần tử có thể chọn tùy chỉnh nào — đều có sẵn hai trạng thái:

Default: Giao diện mặc định của phần tử.
Selected: Áp dụng khi người dùng nhấn vào phần tử. Builder sẽ quay lại Default khi người dùng bỏ chọn phần tử đó. Trong nhóm chọn một, khi chọn một phần tử thì các phần tử còn lại sẽ bị bỏ chọn. Nhóm chọn nhiều cho phép chọn đồng thời nhiều phần tử. Toggle hoạt động độc lập — chọn một toggle không ảnh hưởng đến các toggle khác cùng cấp. Xem các loại nhóm.

Cần áp dụng cùng một style cho trạng thái của nhiều phần tử (ví dụ: các lựa chọn quiz)? Hãy style một phần tử trước, rồi nhân bản nó. Style theo trạng thái không được kế thừa giữa các phần tử cùng cấp — nhân bản là cách xử lý hiện tại.

Trạng thái của input

Default: Giao diện mặc định của input.
Active: Áp dụng khi input đang được focus.
Invalid: Áp dụng khi nội dung của input không vượt qua validation. Ví dụ: khi trường email không có @. Xem Validation input.
Disabled: Input không thể tương tác. Thêm trạng thái này thủ công; xem Trạng thái Disabled theo điều kiện.

Tùy chỉnh từng trạng thái theo cách tương tự như element selectable: kích hoạt trạng thái cần chỉnh, rồi thay đổi thuộc tính.

Trạng thái Disabled theo điều kiện

Trạng thái Disabled ngăn người dùng tương tác với một phần tử. Khác với các trạng thái Default, Selected, Active hay Invalid, trạng thái Disabled không tự kích hoạt — nó cần một điều kiện do người dùng định nghĩa.

Disabled có thể áp dụng trên:

Inputs: Bất kỳ trường nhập liệu nào — văn bản, email, mật khẩu, số, điện thoại, ngày và/hoặc giờ.
Các phần tử có thể chọn: Tùy chọn quiz, sản phẩm, tab, toggle dùng thử, và bất kỳ phần tử có thể chọn tùy chỉnh nào.
Bất kỳ phần tử nào có tương tác nhấn: Ví dụ: nút, hình ảnh hoặc biểu tượng kích hoạt hành động điều hướng.

Thêm trạng thái Disabled

Bảng cài đặt States với tùy chọn Add Disabled state hiển thị

Để thêm và cấu hình trạng thái Disabled:

Chọn phần tử mục tiêu.
Trong phần States, nhấp vào Settings .
Chọn Add Disabled state. Trạng thái Disabled sẽ xuất hiện trong phần States.
Bên cạnh trạng thái Disabled mới, nhấp vào Edit conditional state .
Thêm một điều kiện. Nếu bạn muốn vô hiệu hóa nút submit khi dữ liệu nhập chưa vượt qua xác thực, hãy so sánh biến isValid của input với false.
Tùy chỉnh giao diện cho trạng thái Disabled để thể hiện rõ sự hạn chế (ví dụ: giảm độ mờ đục).

Đặt điều kiện cho trạng thái bị vô hiệu hóa

SDK đánh giá điều kiện tại thời điểm chạy và tự động áp dụng trạng thái Disabled khi phù hợp — không cần thay đổi code trong ứng dụng.

Trạng thái bước của progress indicator

Bài viết chính: Progress indicator

Progress indicator cho người dùng biết họ đang ở đâu trong flow onboarding. Mỗi bước có ba trạng thái:

Completed: Các bước người dùng đã hoàn thành.
Current: Bước hiện tại của người dùng.
Upcoming: Các bước người dùng chưa đến.