Sử dụng các điều khiển Fluent UI

Tạo các ứng dụng tuyệt vời trong Microsoft Teams sẽ dễ dàng hơn với các thành phần mới của chúng tôi. Được xây dựng trên Khung Fluent UI, các thành phần mới sẽ trông tuyệt vời với kiểu Teams và sẽ tự động điều chỉnh theo chủ đề mặc định của Teams. Các điều khiển mới là Nút, Hộp kiểm, Hộp tổ hợp, Bộ chọn ngày, Nhãn, Nhóm radio, Xếp hạng, Thanh trượt, Hộp văn bản và Chuyển đổi.

Chúng ta hãy xem xét từng điều khiển Fluent UI và các thuộc tính hữu ích nhất của nó. Để có danh sách đầy đủ các điều khiển và thuộc tính trong Power Apps, hãy đi đến Điều khiển và thuộc tính trong Power Apps.

Nút

Một điều khiển mà người dùng có thể chọn để tương tác với ứng dụng.

Mô tả

Định cấu hình thuộc tính OnSelect của điều khiển Nút để chạy một hoặc nhiều công thức khi người dùng chọn điều khiển.

Thuộc tính khóa

ButtonType – Kiểu nút để hiển thị, Tiêu chuẩn hoặc Chính. Giá trị mặc định: Tiêu chuẩn.

OnSelect – Cách ứng dụng phản hồi khi người dùng chọn một tùy chọn kiểm soát.

Văn bản – Văn bản xuất hiện trên điều khiển hoặc văn bản mà người dùng nhập vào điều khiển.

Hộp kiểm

Tùy chọn kiểm soát mà người dùng có thể chọn hoặc xóa để đặt giá trị thành đúng hoặc sai.

Mô tả

Người dùng có thể chỉ định giá trị Boolean bằng cách sử dụng điều khiển quen thuộc này, đã được sử dụng rộng rãi trong giao diện người dùng.

Thuộc tính khóa

Cạnh của hộp – Phần điều khiển mà hộp kiểm được hiển thị.

Nhãn – Văn bản xuất hiện trên điều khiển.

Đã chọn – Điều khiển có được chọn hay không.

Hộp tổ hợp

Tùy chọn kiểm soát cho phép người dùng đưa ra lựa chọn trong số các lựa chọn đã cho. Hỗ trợ tìm kiếm và nhiều lựa chọn.

Mô tả

Điều khiển Hộp tổ hợp cho phép người dùng tìm kiếm các mục để chọn.

Chế độ chọn một hoặc chọn nhiều được định cấu hình thông qua thuộc tính SelectMultiple.

Thuộc tính khóa

Mục – Nguồn dữ liệu mà bạn có thể đưa ra lựa chọn.

DefaultSelectedItems - Các mục được chọn lần đầu trước khi người dùng tương tác với điều khiển.

SelectMultiple – Liệu người dùng có thể chọn một mục hay nhiều mục.

IsSearchable – Liệu người dùng có thể tìm kiếm các mục trước khi chọn hay không.

Bộ chọn ngày

Một điều khiển mà người dùng có thể chọn để chỉ định ngày.

Mô tả

Nếu thêm tùy chọn Bộ chọn ngày thay vì tùy chọn điều khiển mục nhập văn bản, bạn sẽ giúp đảm bảo rằng người dùng chỉ định ngày ở định dạng chính xác.

Thuộc tính khóa

Giá trị – Ngày hiện được chọn trong điều khiển ngày. Ngày này được biểu thị bằng giờ địa phương.

Label

Hộp hiển thị dữ liệu như văn bản, số, ngày hoặc đơn vị tiền tệ.

Mô tả

Nhãn hiển thị dữ liệu mà bạn chỉ định dưới dạng một chuỗi văn bản theo nghĩa đen hoặc dưới dạng công thức đánh giá thành một chuỗi văn bản. Nhãn thường xuất hiện bên ngoài bất kỳ tùy chọn kiểm soát nào khác (chẳng hạn như biểu ngữ xác định màn hình), dưới dạng nhãn xác định tùy chọn kiểm soát khác (như tùy chọn kiểm soát xếp hạng hoặc âm thanh) hay trong bộ sưu tập để hiển thị loại thông tin cụ thể về một mục.

Thuộc tính khóa

Màu – Màu văn bản trong tùy chọn điều khiển.

Phông chữ – Tên của họ phông chữ mà văn bản hiển thị.

Văn bản – Văn bản xuất hiện trên điều khiển.

Nhóm chọn một

Một điều khiển đầu vào hiển thị nhiều tùy chọn. Người dùng chỉ có thể chọn một trong những tùy chọn đó cùng một lúc.

Mô tả

Điều khiển Nhóm radio, một điều khiển đầu vào HTML tiêu chuẩn, chỉ được sử dụng tốt nhất với một số tùy chọn loại trừ lẫn nhau.

Thuộc tính khóa

Mục – Nguồn dữ liệu xuất hiện trong tùy chọn điều khiển, chẳng hạn như bộ sưu tập, danh sách hoặc biểu đồ.

Selected – Bản ghi dữ liệu biểu thị mục đã chọn.

Xếp loại

Điều khiển mà người dùng có thể sử dụng để chỉ ra một giá trị từ 0 đến một số tối đa mà bạn chỉ định.

Mô tả

Trong tùy chọn kiểm soát này, người dùng có thể cho biết mức độ họ thích nội dung nào đó bằng cách chọn số lượng sao nhất định.

Thuộc tính khóa

Giá trị – Giá trị ban đầu của điều khiển trước khi được người dùng thay đổi.

Max – Giá trị tối đa mà người dùng có thể đặt thanh trượt hoặc xếp hạng.

Thanh trượt

Tùy chọn kiểm soát mà người dùng có thể chỉ định một giá trị bằng cách kéo núm điều khiển.

Mô tả

Người dùng có thể chỉ ra một giá trị, giữa giá trị tối thiểu và tối đa mà bạn chỉ định, bằng cách kéo thanh trượt từ trái sang phải hoặc lên và xuống, tùy thuộc vào hướng bạn chọn.

Thuộc tính khóa

Max – Giá trị tối đa mà người dùng có thể đặt thanh trượt hoặc xếp hạng.

Min – Giá trị tối thiểu mà người dùng có thể đặt thanh trượt.

Giá trị – Giá trị của một tùy chọn điều khiển nhập.

Bố cục – Một điều khiển được hiển thị theo chiều ngang hay chiều dọc.

Hiển thị giá trị – Một điều khiển có nên hiển thị giá trị hay không.

Hộp văn bản

Một hộp trong đó người dùng có thể nhập văn bản, số và dữ liệu khác.

Mô tả

Người dùng có thể chỉ định dữ liệu bằng cách nhập vào điều khiển Hộp văn bản. Tùy thuộc vào cách bạn đặt cấu hình ứng dụng, dữ liệu đó có thể được thêm vào nguồn dữ liệu, được dùng để tính giá trị tạm thời hoặc được kết hợp theo một số cách khác.

Thuộc tính khóa

Phông chữ – Tên của họ phông chữ mà văn bản hiển thị.

Văn bản – Văn bản xuất hiện trên điều khiển hoặc văn bản mà người dùng nhập vào điều khiển.

Bật tắt

Tùy chọn kiểm soát mà người dùng có thể bật hoặc tắt bằng cách di chuyển núm điều khiển.

Mô tả

Điều khiển Chuyển đổi được thiết kế cho giao diện người dùng hiện đại, nhưng hoạt động giống như một hộp kiểm.

Thuộc tính khóa

Đã chọn – Điều khiển có được chọn hay không.

OffText – Văn bản của trạng thái tắt.

OnText – Văn bản của trạng thái bật.

Sự khác biệt giữa Fluent UI và các điều khiển cổ điển

Các thuộc tính của điều khiển đã được đơn giản hóa để dễ sử dụng. Bảng sau liệt kê sự khác biệt giữa điều khiển Fluent UI và tên thuộc tính điều khiển cổ điển.

Loại điều khiển	Cũ	Fluent UI
Nút	Điền Nền TabIndex	ColorFill ColorBackground AcceptsFocus
Hộp kiểm	Mặc định TabIndex	Đã chọn AcceptsFocus
Hộp tổ hợp	InputTextPlaceholder TabIndex	Văn bản AcceptsFocus
Bộ chọn ngày	SelectedDate TabIndex	Giá_trị AcceptsFocus
Nhãn	Kích cỡ	FontSize
Nhóm chọn một	TabIndex	AcceptsFocus
Xếp loại	Mặc định TabIndex	Giá_trị AcceptsFocus
Thanh trượt	Mặc định TabIndex	Giá_trị AcceptsFocus
Hộp văn bản	Màu Mặc định Điền SpellCheck TabIndex	ColorText Giá_trị ColorBackground EnableSpellCheck AcceptsFocus
Bật tắt	Kích cỡ Mặc định TabIndex	FontSize Đã chọn AcceptsFocus

Xem thêm

Tạo ứng dụng bổ sung
Tìm hiểu Power Apps Studio

Lưu ý

Bạn có thể cho chúng tôi biết bạn thích dùng ngôn ngữ nào cho tài liệu không? Làm một cuộc khảo sát ngắn. (xin lưu ý, khảo sát này bằng tiếng Anh)

Cuộc khảo sát sẽ mất khoảng bảy phút. Không có dữ liệu cá nhân nào được thu thập (điều khoản về quyền riêng tư).