Thành phần kiểm soát Elevation

Một thành phần kiểm soát được dùng để tạo thẻ và menu thả xuống.

Description

Elevation được dùng để thu hút tâm điểm vào một trải nghiệm và thêm tính chất vật lý cho ứng dụng. Cấp độ nông dành riêng cho những mục được kết nối chặt chẽ với bảng tùy biến hoặc dạng xem, chẳng hạn như ô. Cấp độ sâu hơn tạo ra một khung nổi bật xung quanh bề mặt, thu hút sự tập trung mạnh mẽ vào các trải nghiệm độc lập như hộp thoại. Hỗ trợ các sự kiện di chuột.

Chuyển đến trang Kiểu Elevation trong Fluent UI để biết các phương pháp hay nhất.

Thuộc tính

Thuộc tính khóa

Thuộc tính	Description
Depth	Chiều sâu của bóng.
HoverDepth	Chiều sâu của bóng hiển thị khi di chuột.

Thuộc tính kiểu

Thuộc tính	Description
FillColor	Màu nền của thành phần kiểm soát Elevation.
HoverFillColor	Màu nền của thành phần kiểm soát Elevation hiển thị khi di chuột.
PaddingLeft	Khoảng cách cạnh trái giữa thẻ và đường viền của thành phần kiểm soát
PaddingRight	Khoảng cách cạnh phải giữa thẻ và đường viền của thành phần kiểm soát
PaddingTop	Khoảng cách cạnh trên giữa thẻ và đường viền của thành phần kiểm soát
PaddingBottom	Khoảng cách cạnh dưới giữa thẻ và đường viền của thành phần kiểm soát
DarkOverlay	Khi được bật, hiển thị hiệu ứng lớp phủ tối trong vùng đệm.

Định dạng nội dung trên Elevation bằng vùng chứa bố cục

1. Thêm thành phần kiểm soát Container vào màn hình (không phải Horizontal container hay Vertical container).

2. Thêm một thành phần Elevation vào vùng chứa

3. Đặt các thuộc tính Elevation để phù hợp với Container chính:

   Thuộc tính	Giá_trị
   X	0
   Y	0
   Width	Parent.Width
   Height	Parent.Height

4. Đặt các thuộc tính PaddingRight, PaddingTop và PaddingBottom thành Self.PaddingLeft tham chiếu

5. Chọn Depth mong muốn và điều chỉnh giá trị của PaddingLeft để cung cấp đủ khoảng trống đảm bảo bóng không bị cắt.

6. Chèn một Vertical container vào cùng một Container chính. Vùng chứa này dùng để lưu trữ nội dung của thẻ.

7. Đặt các thuộc tính Vertical container để căn chỉnh trực quan với các cạnh của thành phần Elevation:

   Thuộc tính	Giá_trị
   X	Elevation.PaddingLeft
   Y	Elevation.PaddingLeft
   Width	Parent.Width - Elevation.PaddingLeft * 2
   Height	Parent.Height - Elevation.PaddingLeft * 2

8. Thêm nội dung vào Vertical container để điền vào thẻ.

Giới hạn

Chỉ có thể sử dụng thành phần mã này trong ứng dụng canvas và trang tùy chỉnh.