Jaa

Elevation hallinta

  • Artikkeli

Korttien ja pikaikkunoiden valikoiden muodostamiseen käytettävä ohjausobjekti.

Elevation-ohjausobjekti.

Description

Elevation käytetään fokuksen kiinnittämiseen kokemukseen ja fyysisen materiaalisuuden lisäämiseen sovellukseen. Matalat tasot on varattuja kohteille, jotka ovat läheisesti yhteydessä pohjaan tai näkymään, kuten ruutuihin. Syvemmät tasot luovat pinnan ympärille näkyvän kehyksen, joka kiinnittää huomion itsenäisiin kokemuksiin, kuten valintaikkunoihin. Tukee hiiren osoitintapahtumia.

Katso parhaat käytännöt Fluent UI:n Elevation-ohjausobjektin tyylin sivulta.

Ominaisuudet

Tärkeimmät ominaisuudet

Ominaisuus Description
Depth Varjostuksen syvyys.
HoverDepth Varjostuksen syvyys, kun osoitin on päällä.

Tyylin ominaisuudet

Ominaisuus Description
FillColor Elevation-ohjausobjektin taustaväri.
HoverFillColor Elevation-ohjausobjektin taustaväri, joka näkyy hiiren osoittimen ollessa päällä.
PaddingLeft Vasemman reunan aukko kortin ja ohjausobjektin rajaviivan välillä
PaddingRight Oikean reunan aukko kortin ja ohjausobjektin rajaviivan välillä
PaddingTop Yläreunan aukko kortin ja ohjausobjektin rajaviivan välillä
PaddingBottom Alareunan aukko kortin ja ohjausobjektin rajaviivan välillä
DarkOverlay Kun tämä on käytössä, tumma peittoalue näytetään täytetyllä alueella.

Sisällön muotoileminen Elevation-ohjausobjektin päällä asettelusäilöjen avulla

  1. Lisää näyttöön Container-ohjausobjekti (äläkä Horizontal container- tai Vertical container -ohjausobjektia).

  2. Elevation-komponentin lisääminen säiliöön

  3. Määritä Elevation-ominaisuudet mahtumaan sen ylätason Container-ohjausobjektiin:

    Ominaisuus Arvo
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. Määritä PaddingRight-, PaddingTop- ja PaddingBottom-ominaisuudet viittaamaan omaisuuteen Self.PaddingLeft

  5. Valitse haluamasi Depth ja säädä PaddingLeft-arvoa kasvattaaksesi aukkoa siten, ettei varjo leikkaudu pois.

  6. Lisää Vertical container samaan ylätason Container-ohjausobjektiin. Tätä käytetään kortin sisällön isännöimiseen.

  7. Määritä Vertical container -ominaisuudet siten, että ne osuvat visuaalisesti Elevation-komponentin reunojen kanssa:

    Ominaisuus Arvo
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Lisää Vertical container -ohjausobjektiin sisältöä täyttääksesi kortin.

Elevation-ohjausobjektin esimerkki.

Rajoitukset

Tätä koodikomponenttia voidaan käyttää vain pohjaan perustuvissa sovelluksissa ja mukautetuilla sivuilla.