इसके माध्यम से साझा किया गया


Elevation नियंत्रण

कार्ड और फ़्लायआउट मेनू बनाने के लिए उपयोग किया जाने वाला नियंत्रण.

ऊंचाई नियंत्रण.

विवरण

Elevation इसका उपयोग किसी अनुभव पर ध्यान केंद्रित करने और ऐप में भौतिकता जोड़ने के लिए किया जाता है। उथले स्तर उन वस्तुओं के लिए आरक्षित होते हैं जो कैनवास या दृश्य से निकटता से जुड़े होते हैं, जैसे कि टाइलें. गहरे स्तर सतह के चारों ओर एक प्रमुख फ्रेम बनाते हैं, संवादों जैसे आत्म-निहित अनुभवों पर मजबूत ध्यान आकर्षित करते हैं. माउस हॉवर घटनाओं का समर्थन करता है.

सर्वोत्तम अभ्यासों के लिए Fluent UI ऊंचाई शैली पेज पर जाएं.

विशेषता

मुख्य गुण

गुण विवरण
Depth शैडो की गहराई.
HoverDepth होवर करने पर दिखाई देने वाली छाया की गहराई.

स्टाइल के गुण

गुण विवरण
FillColor Elevation नियंत्रण का पृष्ठभूमि रंग.
HoverFillColor होवर करने पर दिखाई देने वाले Elevation नियंत्रण का पृष्ठभूमि रंग.
PaddingLeft कार्ड और कंट्रोल बाउंड्री के बीच लेफ्ट एज गैप
PaddingRight कार्ड और कंट्रोल बाउंड्री के बीच राइट एज गैप
PaddingTop कार्ड और कंट्रोल बाउंड्री के बीच टॉप एज गैप
PaddingBottom कार्ड और कंट्रोल बाउंड्री के बीच बॉटम एज गैप
DarkOverlay सक्षम होने पर, गद्देदार क्षेत्र में एक गहरा ओवरले प्रभाव प्रदर्शित करता है.

लेआउट कंटेनरों के साथ Elevation पर सामग्री का प्रारूपण

  1. (Container या Horizontal container नहीं) पर Vertical container नियंत्रण जोड़ें.

  2. कंटेनर में एक Elevation घटक जोड़ें

  3. Elevationगुणों को इसके Container पैरेंट के अनुरूप सेट करें:

    गुण मान
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height
  4. PaddingRight, PaddingTop और PaddingBottom गुणों को इसके संदर्भ Self.PaddingLeft के अनुसार सेट करें

  5. वांछित Depth चुनें और PaddingLeft का मान समायोजित करें ताकि छाया कट न जाए इसके लिए पर्याप्त अंतराल प्रदान करें.

  6. Vertical container को उसी पैरेंट Container में डालें. इसका उपयोग कार्ड की सामग्री को होस्ट करने के लिए किया जाता है.

  7. Vertical container गुणों को Elevation घटक के किनारों से विज़ुअल रूप से संरेखित करने के लिए सेट करें:

    गुण मान
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2
  8. कार्ड को पॉप्युलेट करने के लिए Vertical container में सामग्री जोड़ें.

ऊंचाई उदाहरण.

सीमाएँ

इस कोड घटक का उपयोग केवल कैनवास ऐप और कस्टम पृष्ठों में ही किया जा सकता है.