Chia sẻ qua

Tùy chọn kiểm soát Nút trong Power Apps

  • Bài viết

Tùy chọn kiểm soát mà người dùng có thể bấm hoặc nhấn để tương tác với ứng dụng.

Mô tả

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

Thuộc tính khóa

OnSelect – Các thao tác cần thực hiện khi người dùng chạm hoặc bấm vào một tùy chọn điều khiển.

Văn bản – Văn bản xuất hiện trên tùy chọn kiểm soát hoặc người dùng nhập vào tùy chọn kiểm soát.

Thuộc tính bổ sung

Align – Vị trí của văn bản so với tâm ngang của tùy chọn kiểm soát.

AutoDisableOnSelect – Tự động tắt tùy chọn kiểm soát này khi chế độ OnSelect đang chạy.

BorderColor – Màu viền của tùy chọn kiểm soát.

BorderStyle – Liệu viền của tùy chọn kiểm soát là Nét liền, Nét đứt, Chấm chấm hay Không có.

BorderThickness – Độ dày viền của tùy chọn kiểm soát.

Color – Màu văn bản trong tùy chọn kiểm soát.

DisplayMode – Liệu tùy chọn kiểm soát này sẽ cho phép người dùng nhập (Chỉnh sửa), chỉ hiển thị dữ liệu (Xem) hay tắt (Tắt).

DisabledBorderColor – Màu viền của tùy chọn kiểm soát nếu thuộc tính DisplayMode của tùy chọn kiểm soát được đặt thành Tắt.

DisabledColor – Màu văn bản trong tùy chọn kiểm soát nếu thuộc tính DisplayMode được đặt thành Tắt.

DisabledFill – Màu nền của tùy chọn kiểm soát nếu thuộc tính DisplayMode được đặt thành Tắt.

FocusedBorderColor – Màu viền của tùy chọn kiểm soát khi trỏ chuột vào tùy chọn kiểm soát đó.

FocusedBorderThickness – Độ dày viền của tùy chọn kiểm soát khi trỏ chuột vào tùy chọn kiểm soát đó.

Fill – Màu nền của tùy chọn kiểm soát.

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

FontWeight – Độ dày của chữ trong tùy chọn kiểm soát: In đậm, Nửa đậm, Bình thường hoặc Nhạt hơn.

Height – Khoảng cách giữa cạnh trên cùng và cạnh dưới cùng của tùy chọn kiểm soát.

HoverBorderColor – Màu viền của tùy chọn kiểm soát khi người dùng giữ con trỏ chuột trên tùy chọn kiểm soát đó.

HoverColor – Màu văn bản trong tùy chọn kiểm soát khi người dùng giữ con trỏ chuột trên tùy chọn kiểm soát đó.

HoverFill – Màu nền của tùy chọn kiểm soát khi người dùng giữ con trỏ chuột trên tùy chọn kiểm soát đó.

Italic – Liệu văn bản trong tùy chọn kiểm soát có in nghiêng hay không.

PaddingBottom – Khoảng cách giữa văn bản trong tùy chọn kiểm soát và cạnh dưới cùng của tùy chọn kiểm soát đó.

PaddingLeft – Khoảng cách giữa văn bản trong tùy chọn kiểm soát và cạnh trái của tùy chọn kiểm soát đó.

PaddingRight – Khoảng cách giữa văn bản trong tùy chọn kiểm soát và cạnh phải của tùy chọn kiểm soát đó.

PaddingTop – Khoảng cách giữa văn bản trong tùy chọn kiểm soát và cạnh dưới cùng của tùy chọn kiểm soát đó.

Pressed – Đúng khi tùy chọn kiểm soát đang được nhấn, nếu không thì là sai.

PressedBorderColor – Màu viền của tùy chọn kiểm soát khi người dùng nhấn hoặc bấm vào tùy chọn kiểm soát đó.

PressedColor – Màu văn bản trong tùy chọn kiểm soát khi người dùng nhấn hoặc bấm vào tùy chọn kiểm soát đó.

PressedFill – Màu nền của tùy chọn kiểm soát khi người dùng nhấn hoặc bấm vào tùy chọn kiểm soát đó.

RadiusBottomLeft – Mức độ làm tròn góc dưới cùng bên trái của tùy chọn kiểm soát.

RadiusBottomRight – Mức độ làm tròn góc dưới cùng bên phải của tùy chọn kiểm soát.

RadiusTopLeft – Mức độ làm tròn góc trên cùng bên trái của tùy chọn kiểm soát.

RadiusTopRight – Mức độ làm tròn góc trên cùng bên phải của tùy chọn kiểm soát.

Size – Cỡ phông chữ của văn bản xuất hiện trên tùy chọn kiểm soát.

Strikethrough – Liệu một đường thẳng có hiện qua văn bản xuất hiện trên tùy chọn kiểm soát hay không.

TabIndex – Thứ tự điều hướng bàn phím so với các tùy chọn kiểm soát khác.

Tooltip – Văn bản giải thích xuất hiện khi người dùng di chuột qua tùy chọn kiểm soát.

Underline – Liệu một đường thẳng có hiện dưới văn bản xuất hiện trên tùy chọn kiểm soát hay không.

VerticalAlign – Vị trí của văn bản trên tùy chọn kiểm soát so với tâm dọc của tùy chọn kiểm soát đó.

Visible – Liệu tùy chọn kiểm soát sẽ hiển thị hay bị ẩn.

Width – Khoảng cách giữa cạnh trái và cạnh phải của tùy chọn kiểm soát.

X – Khoảng cách giữa cạnh trái của tùy chọn kiểm soát và cạnh trái của vùng chứa chính (màn hình nếu không có vùng chứa chính).

Y – Khoảng cách giữa cạnh trên cùng của tùy chọn kiểm soát và cạnh trên cùng của vùng chứa chính (màn hình nếu không có vùng chứa chính).

Navigate( ScreenName, ScreenTransitionValue )

Ví dụ

Thêm công thức cơ bản vào nút

  1. Thêm tùy chọn kiểm soát Text input và đặt tên là Nguồn.

    Bạn không biết cách thêm, đặt tên và đặt cấu hình tùy chọn kiểm soát?

  2. Thêm tùy chọn kiểm soát Nút, đặt thuộc tính Văn bản của nút thành "Thêm", rồi đặt thuộc tính OnSelect của nút thành công thức sau:
    UpdateContext({Total:Total + Value(Source.Text)})

    Bạn muốn biết thêm thông tin về hàm UpdateContext hoặc hàm khác?

  3. Thêm một kiểm soát Nhãn, đặt thuộc tính Văn bản trong thanh công thức thành Giá trị (Tổng), và sau đó nhấn F5.

  4. Xóa văn bản mặc định khỏi Nguồn, nhập một số vào đó, rồi bấm hoặc nhấn vào Thêm.

    Tùy chọn kiểm soát Label hiển thị số mà bạn đã nhập.

  5. Xóa số khỏi Nguồn, nhập một số khác vào đó, rồi bấm hoặc nhấn vào Thêm.

    Tùy chọn kiểm soát Label hiển thị tổng của hai số mà bạn đã nhập.

  6. (không bắt buộc) Lặp lại bước trước một hoặc nhiều lần.

  7. Để quay lại không gian làm việc mặc định, hãy nhấn Esc (hoặc bấm hoặc nhấn vào biểu tượng đóng ở góc phía trên bên phải).

Đặt cấu hình nút có nhiều công thức

Thêm công thức để xóa tùy chọn kiểm soát Nhập văn bản giữa các mục.

  1. Đặt thuộc tính HintText của Nguồn thành "Nhập số".

  2. Đặt thuộc tính OnSelect của Thêm thành công thức sau:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Lưu ý

    Phân tách nhiều công thức bằng dấu chấm phẩy “;”.

  3. Đặt thuộc tính Default của Nguồn thành ClearInput.

  4. Nhấn F5, sau đó kiểm tra ứng dụng bằng cách cộng nhiều số với nhau.

Thêm một nút khác để đặt lại tổng

Thêm một nút thứ hai để xóa tổng giữa các phép tính.

  1. Thêm tùy chọn kiểm soát Nút khác, đặt thuộc tính Văn bản của nút thành "Xóa", rồi đặt thuộc tính OnSelect của nút thành công thức sau:

    UpdateContext({Total:0})

  2. Nhấn F5, cộng nhiều số với nhau, sau đó bấm hoặc nhấn vào Xóa để đặt lại tổng.

Thay đổi giao diện của nút

Thay đổi hình dạng của nút

Theo mặc định, Power Apps tạo một tùy chọn kiểm soát Nút hình chữ nhật với các góc tròn. Bạn có thể thực hiện các sửa đổi cơ bản cho hình dạng của tùy chọn kiểm soát Nút bằng cách đặt các thuộc tính Height, Width và Radius.

Lưu ý

Biểu tượng và hình dạng cung cấp nhiều loại thiết kế và có thể thực hiện một số chức năng cơ bản giống như các tùy chọn kiểm soát Nút. Tuy nhiên, Biểu tượng và hình dạng không có thuộc tính Văn bản.

  1. Thêm tùy chọn kiểm soát Nút rồi đặt thuộc tính Height và Width thành 300 để tạo nút hình vuông lớn.

  2. Sửa đổi các thuộc tính RadiusTopLeft, RadiusTopRight, RadiusBottomLeft và RadiusBottomRight để điều chỉnh độ cong ở mỗi góc. Dưới đây là một số ví dụ về các hình dạng khác nhau, mỗi hình dạng bắt đầu từ một nút hình vuông 300 x 300:

Thay đổi màu của nút khi bạn di chuột qua nút đó

Theo mặc định, màu tô của tùy chọn kiểm soát Nút sẽ mờ đi 20% khi bạn di chuột qua đó. Bạn có thể điều chỉnh chế độ này bằng cách thay đổi thuộc tính HoverFill, trong đó sử dụng hàm ColorFade. Nếu bạn đặt công thức ColorFade thành tỷ lệ phần trăm dương, màu sẽ nhạt hơn khi bạn di chuột qua nút đó, trong khi tỷ lệ phần trăm âm sẽ làm cho màu tối hơn.

  • Thay đổi tỷ lệ phần trăm ColorFade trong thuộc tính HoverFill của một trong các nút mà bạn đã tạo, rồi quan sát hiệu ứng.

Bạn cũng có thể chỉ định màu của một tùy chọn kiểm soát Nút bằng cách đặt thuộc tính HoverFill thành công thức có chứa hàm ColorValue thay vì hàm ColorFade, như trong ColorValue("Red").

Lưu ý

Giá trị màu có thể là bất kỳ định nghĩa màu CSS nào, tên hoặc giá trị thập lục phân.

  • Thay thế hàm ColorFade bằng hàm ColorValue của một trong các nút mà bạn đã tạo, rồi quan sát hiệu ứng.

Hướng dẫn hỗ trợ tiếp cận

Độ tương phản màu

Hỗ trợ bộ đọc màn hình

Hỗ trợ bàn phím

  • TabIndex phải bằng 0 hoặc lớn hơn để người dùng bàn phím có thể điều hướng đến đó.
  • Các chỉ báo tiêu điểm phải hiển thị rõ ràng. Sử dụng FocusedBorderColor và FocusedBorderThickness để đạt được điều này.

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ư).