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ư).
Phản hồi
https://aka.ms/ContentUserFeedback.
Sắp ra mắt: Trong năm 2024, chúng tôi sẽ dần gỡ bỏ Sự cố với GitHub dưới dạng cơ chế phản hồi cho nội dung và thay thế bằng hệ thống phản hồi mới. Để biết thêm thông tin, hãy xem:Gửi và xem ý kiến phản hồi dành cho