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 lựa chọn quiz được nhấn sẽ chuyển sang trạng thái Selected, một trường nhập liệu được focus sẽ chuyển sang Active. Một số trạng thái được điều khiển bởi điều kiện — ví dụ, bạn có thể disable một nút. Hãy tùy chỉnh style cho từng trạng thái riêng biệt để cung cấp phản hồi trực quan cho người dùng mà không cần viết thêm code trong app.

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

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

1. Chọn một phần tử. Mục States trong bảng bên phải liệt kê các trạng thái mà phần tử đó hỗ trợ.
2. Trong mục 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.
3. Thay đổi bất kỳ thuộc tính nào — màu nền, viền, typography, v.v. Thay đổi sẽ 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.

4. Builder áp dụng style phù hợp tại runtime.

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

Các phần tử có thể chọn — tùy chọn quiz, sản phẩm, tab, toggle và checkbox, cùng 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ẽ trở về 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ử sẽ bỏ chọn các phần tử còn lại. 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. Xem loại nhóm.

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 và checkbox, 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

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

1. Chọn phần tử mục tiêu.
2. Trong phần States, nhấp vào Settings .
3. Chọn Add Disabled state. Trạng thái Disabled sẽ xuất hiện trong phần States.
4. Bên cạnh trạng thái Disabled mới, nhấp vào Edit conditional state .
5. 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.
6. 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).

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

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.