Bagikan melalui

Elevation menguasai

  • Artikel

Kontrol yang digunakan untuk membangun kartu dan menu flyout.

Kontrol ketinggian.

Description

Elevation digunakan untuk menarik fokus pada pengalaman dan menambahkan materialitas fisik ke aplikasi. Tingkat dangkal digunakan untuk item yang terhubung dekat ke kanvas atau tampilan, seperti ubin. Tingkat yang lebih dalam membuat kerangka yang penting di sekitar permukaan, menarik fokus yang kuat ke pengalaman mandiri seperti dialog. Mendukung aktivitas hover mouse.

Buka halaman gaya Elevasi Fluent UI untuk praktik terbaik.

Properti

Properti kunci

Properti Description
Depth Kedalaman bayangan.
HoverDepth Kedalaman bayang-bayang yang muncul saat hover.

Properti gaya

Properti Description
FillColor Warna latar belakang kontrol Elevation.
HoverFillColor Warna latar belakang kontrol Elevation yang muncul saat hover.
PaddingLeft Celah tepi kiri antara kartu dan batas kontrol
PaddingRight Celah tepi kanan antara kartu dan batas kontrol
PaddingTop Celah tepi atas antara kartu dan batas kontrol
PaddingBottom Celah tepi bawah antara kartu dan batas kontrol
DarkOverlay Bila diaktifkan, menampilkan efek overlay gelap di area berpadu.

Memformat konten di atas Elevation dengan kontainer tata letak

  1. Tambahkan kontrol Container ke layar (bukan Horizontal container atau Vertical container).

  2. Tambahkan komponen Elevation dalam kontainer

  3. Atur properti Elevation agar sesuai dengan induk: Container

    Properti Nilai
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Atur properti PaddingRight, PaddingTop, dan PaddingBottom untuk mereferensi Self.PaddingLeft

  5. Pilih Depth yang diinginkan dan sesuaikan nilai PaddingLeft untuk menyediakan cukup jarak untuk bayang-bayang agar tidak terpotong.

  6. Masukkan ke Vertical container induk yang sama Container. Cara ini digunakan untuk meng-host konten kartu.

  7. Atur properti Vertical container untuk secara visual sejajar ke pinggir komponen Elevation:

    Properti Nilai
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Tambahkan konten ke dalam Vertical container untuk mengisi kartu.

Contoh elevasi.

Pembatasan

Komponen kode ini hanya dapat digunakan pada aplikasi kanvas dan halaman kustom.