Návrh vlastní stránky pro modelem řízenou aplikaci
Tento článek obsahuje tipy pro návrh vlastní stránky, kterou použijete v modelem řízené aplikaci.
Důležité
Vlastní stránky jsou novou funkcí s výraznými změnami a momentálně má řadu známých omezení, které jsou uvedeny v části Známé problémy s vlastními stránkami.
Podporované ovládací prvky na vlastní stránce
Vytvoření vlastní stránky aktuálně podporuje podmnožinu ovládacích prvků aplikace plátna. Tabulka níže obsahuje aktuálně podporované ovládací prvky.
Ctrl | Typ ovládacího prvku | Poznámky |
---|---|---|
Popisek1 | Zobrazit | |
Textové pole1 | Vstup | |
Výběr data1 | Vstup | |
Tlačítko1 | Vstup | |
Kombinované pole1 | Vstup | |
Zaškrtávací políčko1 | Vstup | |
Přepínač1 | Vstup | |
Skupina přepínačů1 | Vstup | |
Posuvník1 | Vstup | |
Hodnocení1 | Vstup | |
Svislý kontejner | Rozložení | Nový responsivní kontejner s horizontálním rozložením |
Vodorovný kontejner | Rozložení | Nový responsivní kontejner s horizontálním rozložením |
Editor formátovaného textu | Vstup | |
Galerie | Seznam | |
Ikona | Médium | |
Obrázek | Médium | |
Úprava formuláře | Vstup | |
Formulář zobrazení | Vstup | |
Komponenty kódu | Vlastní | Přidání komponent kódu na vlastní stránku |
Komponenty plátna (preview) | Vlastní | Přidání komponent plátna na vlastní stránku |
1 Ovládací prvek je nový moderní ovládací prvek. Tento nový ovládací prvek byl zaveden do aplikací plátna v Teams. Ovládací prvek je založen na knihovnu Fluent UI zabalené pomocí Power Apps Component Framework.
Podpora vlastních součástí pro vlastní stránku
Do svého prostředí můžete přidat vlastní součásti uživatelského prostředí jak s minimem kódu (komponenty plátna), tak s profesionálním kódem (komponenty kódu) a zpřístupnit je všem tvůrcům. Články o rozšiřitelnosti uživatelského prostředí specifického pro vlastní stránku najdete v tématech o přidání komponent plátna na vlastní stránku modelem řízené aplikace a přidání komponent kódu na vlastní stránku modelem řízené aplikace.
Obecně lze říci, že rozšiřitelnost využívající minimum kódu je jednodušší na sestavení, testování a má nižší náklady na údržbu. Doporučujeme nejprve vyhodnotit součásti plátna a poté použít komponenty kódu pouze v případě, že je potřeba složitější a pokročilejší přizpůsobení.
Další informace:
Povolení responzivního rozložení pomocí ovládacího prvku kontejneru
Responzivní vlastní rozložení stránky jsou definována vytvořením hierarchie ovládacích prvků Kontejner s horizontálním rozložení a Kontejner s vertikálním rozložení. Tyto ovládací prvky najdete v návrháři aplikací plátna v sekci Rozložení na kartě Vložení.
Nastavte minimální výšku a šířku obrazovky u objektu App, aby nebyl povolen posuvník na úrovni stránky a namísto něj se používal svislý posuvník těla.
MinScreenHeight=200
MinScreenWidth=200
Volitelně lze upravit velikost vlastního návrhu stránky v části Nastavení > Zobrazení, kde Velikost nastavíte na Vlastní. Poté nastavte Šířku a Výšku na typičtější vlastní velikost stránky pro stolní počítače, například šířku 1080 a výšku 768. Změna tohoto nastavení po přidání ovládacích prvků na obrazovku může způsobit obnovení některých vlastností rozvržení.
Nastavte kontejner na nejvyšší úrovni tak, aby vyplnil celý prostor, a změňte jeho velikost podle dostupného prostoru.
X=0
Y=0
Width=Parent.Width
Height=Parent.Height
Horizontální zalamování kontejneru s flexibilní výškou
Chcete-li podporovat stránky, které se samy zúží z výchozí desktopové šířky, povolte tyto vlastnosti ve vodorovném kontejneru s flexibilní výškou. Bez těchto nastavení stránka ořízne ovládací prvky, když se zúží.
Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True
Podřízené kontejnery nebo ovládací prvky přímo pod tímto kontejnerem by měly být nastaveny tak, aby měly minimální šířku, která umožňuje, aby se stránka vešla na šířku 300 pixelů. Zvažte použití výplně v kontejneru nebo ovládacím prvku a také v nadřazených kontejnerech.
Vertikální zalamování kontejneru s flexibilní šířkou
Chcete-li podporovat stránky, které se samy zúží z výchozí desktopové šířky, povolte tyto vlastnosti ve svislém kontejneru s flexibilní šířkou. Bez těchto nastavení stránka ořízne ovládací prvky, když se zúží.
Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True
Podřízené kontejnery nebo ovládací prvky přímo pod tímto kontejnerem by měly být nastaveny tak, aby měly minimální výšku, která umožňuje, aby se stránka vešla na šířku 300 pixelů. Zvažte použití výplně v kontejneru nebo ovládacím prvku a také v nadřazených kontejnerech.
Další informace: Vytváření responzivních rozložení.
Vertikální kontejner s pevným záhlavím, flexibilní tělo, pevné zápatí
V ovládacím prvku Svislý kontejner nastavte Zarovnat (vodorovně) na Roztáhnout
Vložení tří ovládacích prvků Vodorovný kontejner do nadřazeného ovládacího prvku Svislý kontejner
Na prvním a třetím podřízeném ovládacím prvku horizontálního kontejneru vypněte Výška natažení a zmenšete výšku na potřebný prostor, například Výška = 80.
Horizontální kontejner se dvěma zarovnanými podřízenými kontejnery
Pro nadřazený horizontální kontejner nastavte Zarovnat (vodorovně) na Roztáhnout.
Vložte dva ovládací prvky Svislý kontejner do nadřazeného ovládacího prvku Vodorovný kontejner.
Změna stylu ovládacích prvků vlastní stránky, aby byly zarovnány s ovládacími prvky modelem řízené aplikace
Po vytvoření vlastní stránky v moderním návrháři aplikací mají následující funkce tyto výchozí hodnoty.
Motiv pro vlastní stránku. Hodnoty motivu pro ovládací prvky použité na vlastní stránce jsou automaticky nastaveny tak, aby odpovídaly výchozímu modrému motivu Sjednoceného rozhraní. Toto výchozí téma se používá jak ve studiu, tak při běhu aplikace. Explicitní výběr motivu je odebrán z prostředí pro vytváření vlastních stránek.
Ovládací prvky musí používat jinou velikost písma, která vychází z jejich pozice v hierarchii stránek.
Poznámka
Text vlastní stránky má převzorkování na 1,33, takže musíte rozdělit cílovou Velikost písma o 1,33, abyste získali požadovanou velikost.
Typ popisku Cílová velikost písma Velikost písma, která se má použít Nadpis stránky 17 12.75 Normální popisky 14 10.52 Malé popisky 12 9.02 Ovládací prvky primárního a sekundárního tlačítka vyžadují následující změny stylu:
Primární tlačítka
Color=RGBA(255, 255, 255, 1) Fill=RGBA(41,114,182,1) Height=35 FontWeight=Normal
Sekundární tlačítka
Color=RGBA(41,114,182,1) Fill=RGBA(255, 255, 255, 1) BorderColor=RGBA(41,114,182,1) Height=35 FontWeight=Normal
Usnadnění navigace mezi kartami a klávesnice pro vlastní stránky
Vlastní stránky se řídí stejným návrhem navigace mezi kartami, jaký používá hostitelská modelem řízená aplikace. Vizuálně zarovnaná sémantická struktura HTML pomáhá uživatelům plynule procházet po vlastních stránkách pomocí klávesnice nebo čtečky obrazovky. Všimněte si, že na rozdíl od samostatných aplikací plátna nepotřebují vlastní ovládací prvky stránky a další prvky uživatelského prostředí explicitní přiřazení čísel karet. Moderní ovládací prvky nemají vlastnost TabIndex
a využívají sémantickou strukturu HTML pro navigaci.
Různé prvky, jako jsou ovládací prvky, komponenty plátna a kódu, kontejnery atd., lze přecházet pomocí klávesy tabulátoru podle jejich pozice v rozložení vlastní stránky. Navigace po kartách se řídí navigací v pořadí Z. Jednotlivé zarážky tabulátoru uvnitř větších seskupených prvků, jako jsou komponenty nebo kontejnery, jsou navigovány jako první, než klávesa tabulátoru přesune fokus na další prvek ve stromu modelu objektu dokumentu (DOM).
Zde je příklad navigace na stránce obsahující ovládací prvky, kód a komponenty a kontejnery plátna.
Poznámka
Překrývající se ovládací prvky a prvky na vlastní stránce nebudou mít jejich DOM sloučen, takže zarážky tabulátorů mohou být mimo synchronizaci z vizuálního rozvržení. Totéž platí pro dynamické umístění prvků pomocí vzorců.
Viz také
Přehled vlastní stránky modelem řízené aplikace
Použití PowerFx na vlastní stránce