Teie kohandatud mudelipõhisese rakenduse kujundus

Artikkel
03/14/2023

Selles artiklis antakse näpunäiteid kohandatud lehe kujundamiseks mudelipõhises rakenduses kasutamiseks.

Oluline

Kohandatud lehed on uus funktsioon, mis sisaldab olulisi tootemuudatusi ja mille teadaolevad piirangud on välja toodud kohandatud lehe teadaolevates probleemides.

Toetatud juhtelemendid kohandatud lehel

Kohandatud lehe autor toetab praegu lõuendirakenduse juhtelementide alamhulka. Allolevas tabelis on loetletud praegu toetatud juhtelemendid.

Juhtklahv (Ctrl)	Juhtelemendi tüüp	Märkused
Silt¹	Kuva
Tekstiväli¹	Sisend
Andmekoguja¹	Sisend
Nupp¹	Sisend
Liitkast¹	Sisend
Märkeruut¹	Sisend
Lüliti¹	Sisend
Raadio rühm¹	Sisend
Liugur¹	Sisend
Hinnang¹	Sisend
Vertikaalkonteiner	Paigutus	Uus tundlik horisontaalpaigutuse konteiner
Horisontaalkonteiner	Paigutus	Uus tundlik horisontaalpaigutuse konteiner
RTF-redaktor	Sisend
Galerii	Loend
Ikoon	Meedia
Image	Meedia
Vormi redigeerimine	Sisend
Kuva vorm	Sisend
Koodikomponent	Kohandatud	Koodi komponentide lisamine kohandatud lehele
Lõuendikomponendid (eelversioon)	Kohandatud	Lõuendi komponentide lisamine kohandatud lehele

¹ Juhtelement on uus modernne juhtelement. Juhtelement võeti kasutusele lõuendirakenduste jaoks meeskondades. Juhtelement põhineb Kasutajaliidese teegil mis on mässitud Power Apps Component Framework.

Kohandatud komponentide tugi kohandatud lehe jaoks

Saate lisada oma keskkonda nii madalkoodi (lõuendi komponendid) kui ka eel-koodi (koodikomponendid) kohandatud UX-komponendid ja teha need kõigile tegijatele kättesaadavaks. Kohandatud lehe konkreetsete UX-i laiendatavuse artiklite puhul lugege mudelipõhise rakenduse kohandatud lehele lõuendi ja komponentide lisamine ja koodikomponentide lisamine mudelipõhise rakenduse kohandatud lehele.

Üldiselt on madala koodiga laiendatavuse meetod lihtsam koostada, testida ja vähendada hoolduskulusid. Soovitame esmalt hinnata lõuendi komponente ja seejärel kasutada koodikomponente ainult juhul, kui on vaja keerukamaid ja täpsemaid kohandusi.

Lisateave:

Reageeriva paigutuse lubamine konteineri juhtelemendi abil

Reageerivad kohandatud lehepaigutused määratletakse horisontaalse paigutuse konteineri ja vertikaalse paigutuse konteineri hierarhia loomisega. Need juhtelemendid leiate lõuendirakenduse kujundajast vahekaardi Paigutus jaotises Sisesta vahekaart.

Määrake objekti Rakendus minimaalne ekraani kõrgus ja laius, et vältida lehe tasemel kerimisribasid ja kasutada vertikaalset keha kerimisriba.

MinScreenHeight=200
MinScreenWidth=200

Soovi korral saab kohandatud lehe kujunduse suurust kohandada jaotises Sätted > Kuva, kui parameeter Suurus on määratud valikule Kohandatud. Seejärel määrake suvandid Laius ja Kõrgus tüüpilisemaks kuva kohandatud lehe suuruseks, nagu laius 1080 ja kõrgus 768. Selle sätte muutmine pärast juhtelementide kuvale lisamist võib põhjustada osade paigutuse atribuutide lähtestamist.

Määrake kõige ülemine konteiner, et täita kogu ruum ja muuta suurust vastavalt saadaolevale ruumile.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Paindliku kõrgusega konteineri horisontaalne murdmine

Lubage paindliku kõrgusega horisontaalsel konteineril järgmised atribuudid, et toetada lehtede reguleerimist töölaual kitsaks laiuseks. Ilma nende säteteta kärbib leht juhtelemente, kui leht on kitsas.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Otse selle konteineri all asuvate alamkonteinerite või juhtelementide laius peab olema selline, et leht mahuks 300 piksli laiusesse. Arvestage konteineri või juhtelementide ja ülemkonteinerite täitmisega.

Painduva laiusega konteineri vertikaalne murdmine

Lubage paindliku laiusega vertikaalsel konteineril järgmised atribuudid, et toetada lehtede reguleerimist töölaual kitsaks laiuseks. Ilma nende säteteta kärbib leht juhtelemente, kui leht on kitsas.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Otse selle konteineri all asuvate alamkonteinerite või juhtelementide laius peab olema selline, et leht mahuks 300 piksli kõrgusesse. Arvestage konteineri või juhtelementide ja ülemkonteinerite täitmisega.

Lisateave nutikate paigutuste loomise kohta.

Fikseeritud päisega vertikaalne konteiner, paindlik keha, fikseeritud jalus

Seadke vertikaalsel konteineril jaotises joondamine (horisontaalne) asemel venitamiseks
Lisage kolm horisontaalset konteineri juhtelementi peamisesse vertikaalsesse konteinerisse
Seadke esimese ja kolmanda tütre horisontaalse konteineri juhtseadisel välja venitatud kõrgus ja vähendage kõrgust vajalikule ruumile, näiteks Kõrgus=80.

Horisontaalne konteiner kahe ühtlase tütarkonteineriga

Seadke horisontaalses konteineris jaotises joondamine (vertikaalne) asemel venitamiseks.
Lisage kaks vertikaalse konteineri juhtelementi peamisesse horisontaalsesse konteinerisse.

Kohandatud lehe juhtelementide kujundamine mudelipõhise rakenduse juhtelementide joondamiseks

Luues kohandatud lehe modernse rakenduse kujundaja kaudu, kasutavad need funktsioonid vaikeväärtusi.

Kohandatud lehe kujundus. Kohandatud lehel kasutatavate juhtelementide kujunduseväärtused seatakse automaatselt nii, et need vastaksid kohandatud lehe Unified Interface. Seda vaikekujundust kasutatakse nii studios kui ka rakenduse käitusajal. Selgesõnaline kujunduse valimine eemaldatakse kohandatud lehe loomise kogemusest.
Juhtelementide puhul on vaja kasutada erinevat fondisuurust, mis põhineb nende positsioonil lehehierarhias.

Märkus

Kohandatud lehe teksti skaleerimine on 1,33, seega peate soovitud suuruse saavutamiseks jagama sihtmärgi Fondisuurus 1,33-ga.

Sildi tüüp Sihtmärgi fondi suurus Fondi suurus, mida kasutada

Lehe pealkiri 17 12.75

Tavalised sildid 14 10.52

Väikesed sildid 12 9.02

Sildi tüüp	Sihtmärgi fondi suurus	Fondi suurus, mida kasutada
Lehe pealkiri	17	12.75
Tavalised sildid	14	10.52
Väikesed sildid	12	9.02

Esmase ja teisese nupu juhtnupud vajavad järgmisi stiilimuudatusi:

Peamised nupud

Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Teisesed nupud

Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Kohandatud lehed järgivad sama navigeerimiskujundust, mida kasutab hostimise mudelipõhine rakendus. Visuaalselt joondatud semantilise HTML-i struktuuri abil saavad kasutajad kohandatud lehti klaviatuuri või ekraanilugeja kasutamisel sujuvalt navigeerida. Pange tähele, et erinevalt autonoomsetest lõuendirakendustest ei pea kohandatud lehe juhtelemendid ja muud UX-i elemendid vaja selgeid vahekaardinumbrite määramist. Modernsed juhtelemendid ei oma TabIndex atribuuti ja kasutavad navigeerimise jaoks semantilist HTML-struktuuri.

Erinevaid elemente nagu juhtelemendid, lõuendi- ja koodikomponendid, ümbrised jne saab vahekaartide abil vastavalt nende asukohale kohandatud lehepaigutuses. Vahekaardil navigeerimine järgib tellimuse Z navigeerimist. Üksikud tabeldusklahvid asuvad suuremates rühmitamiselementides, näiteks komponentides, konteinerites navigeeritakse kõigepealt enne vahekaardi teisaldamist dokumendi objektimudeli (DOM) puus järgmisele elemendile.

Siin on näide navigeerimine lehel, kus on juhtelemendid, kood ja lõuendi komponendid ja ümbrised.

Märkus

Kattuvad juhtelemendid ja elemendid kohandatud lehel ei ühenda oma DOM-i, seega ei saa tabeldusklahvi peatusi visuaalsest paigutusest sünkroonida. Sama kehtib dünaamilise elemendi paigutamise kohta valemite abil.