Model temelli uygulamanız için özel sayfa tasarlama
Bu makalede, model temelli bir uygulamada kullanmak üzere özel sayfa tasarlama ipuçları sağlanmaktadır.
Önemli
Özel sayfalar, önemli ürün değişikliklerinin bulunduğu yeni bir özelliktir ve şu anda Özel Sayfa Bilinen Sorunları bölümünde açıklanan birçok bilinen sınırlamaya sahiptir.
Özel sayfada desteklenen denetimler
Özel sayfa yazma şu anda tuval uygulama denetimlerinin bir alt kümesini destekliyor. Aşağıdaki tabloda şu anda desteklenen denetimler listelenmektedir.
| Denetim | Denetim Türü | Notes |
|---|---|---|
| Etiket1 | Görüntüleme | |
| Metin Kutusu1 | Girdi | |
| Tarih Seçici1 | Girdi | |
| Düğme1 | Girdi | |
| Birleşik Giriş Kutusu1 | Girdi | |
| Onay Kutusu1 | Girdi | |
| Geçiş Düğmesi1 | Girdi | |
| Radyo Grubu1 | Girdi | |
| Slider1 | Girdi | |
| Rating1 | Girdi | |
| Dikey Kapsayıcı | Düzen | Yeni tepkisel yatay düzen kapsayıcısı |
| Yatay Kapsayıcı | Düzen | Yeni tepkisel yatay düzen kapsayıcısı |
| Zengin Metin Düzenleyicisi | Girdi | |
| Galeri | Liste | |
| Simge | Medya | |
| Görsel | Medya | |
| Düzenleme Formu | Girdi | |
| Görüntüleme formu | Girdi | |
| Kod bileşenleri | Özel | Özel sayfaya kod bileşenleri ekleme |
| Tuval bileşenleri (önizleme) | Özel | Özel sayfaya tuval bileşenleri ekleme |
1 Denetim, yeni modern bir denetimdir. Denetim, Teams'deki tuval uygulamaları için tanıtılmıştı. Denetim, Power Apps Component Framework ile birlikte sunulan Fluent UI kitaplığını temel alır.
Özel sayfa için özel bileşenler desteği
Hem az kodlu (tuval bileşenleri), hem de pro kodlu (kod bileşenleri) özel UX bileşenlerini ortamınıza ekleyebilir ve bunları tüm oluşturucular için kullanılabilir duruma getirebilirsiniz. Özel sayfaya özgü UX genişletilebilirlik makaleleri için bkz. model temelli uygulamanız için özel sayfaya tuval bileşenleri ekleme ve model temelli uygulamanız için özel sayfaya kod bileşenleri ekleme.
Genel olarak az kodlu genişletilebilirlik yaklaşımı oluşturmak ve test etmek daha kolaydır ve daha az bakım maliyeti gerektirir. Önce tuval bileşenlerinin değerlendirilmesi ve ardından kod bileşenlerini yalnızca daha karmaşık ve gelişmiş özelleştirmeler için gereksinim duyduğunuzda kullanmanız önerilir.
Daha fazla bilgi:
Kapsayıcı denetimi ile tepkisel düzeni etkinleştirme
Tepkisel özel sayfa düzenleri, Horizontal layout kapsayıcı ve Vertical layout kapsayıcı denetimlerinin hiyerarşisi oluşturularak tanımlanır. Bu denetimler, Ekle sekmesindeki Düzen altında tuval uygulama tasarımcısında bulunur.
Sayfa düzeyinde kaydırma çubuklarını engellemek ve dikey gövde kaydırma çubuğunu kullanmak için Uygulama nesnesinde minimum ekran yüksekliği ve genişliği ayarlayın.
MinScreenHeight=200
MinScreenWidth=200
İsteğe bağlı olarak, özel sayfa tasarım boyutunu ayarlamak için Ayarlar > Ekran ayarlarında Boyut'u Özel olarak ayarlayabilirsiniz. Daha sonra Genişliği ve Yüksekliği, genişlik 1080 ve yükseklik 768 gibi daha tipik bir masaüstü özel sayfa boyutuna ayarlayın. Denetimler ekrana eklendikten sonra bu ayarın değiştirilmesi bazı düzen özelliklerinin sıfırlanmasına neden olabilir.
Tüm boşluğu dolduracak şekilde en üstteki kapsayıcıyı ayarlayın ve kullanılabilir alana göre yeniden boyutlandırın.
X=0
Y=0
Width=Parent.Width
Height=Parent.Height
Esnek yükseklik kapsayıcısının yatay kaydırması
Masaüstünden gelen sayfaları dar genişliğe doğru bir şekilde ayarlamak için bu özellikleri, esnek yükseklikte yatay bir kapsayıcıda etkinleştirin. Bu ayarlar olmadan sayfa dar olduğunda sayfa, denetimleri kırpacaktır.
Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True
Doğrudan bu kapsayıcının altındaki alt kapsayıcılar veya denetimler sayfanın 300 piksel genişliğinde sığmasına izin veren en küçük genişliğe sahip olarak ayarlanmalıdır. Üst kapsayıcıların yanı sıra kapsayıcı veya denetimde de doldurma yapmayı düşünün.
Esnek genişlikte bir kapsayıcının dikey kaydırması
Masaüstünden gelen sayfaları dar genişliğe doğru bir şekilde ayarlamak için bu özellikleri, esnek genişlikte dikey bir kapsayıcıda etkinleştirin. Bu ayarlar olmadan sayfa dar olduğunda sayfa, denetimleri kırpacaktır.
Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True
Doğrudan bu kapsayıcının altındaki alt kapsayıcılar veya denetimler sayfanın 300 piksel yüksekliğinde sığmasına izin veren en küçük genişliğe sahip olarak ayarlanmalıdır. Üst kapsayıcıların yanı sıra kapsayıcı veya denetimde de doldurma yapmayı düşünün.
Daha fazla bilgi: Tepkisel düzen oluşturma.
Sabit başlık, esnek gövde, sabit alt bilgi içeren dikey kapsayıcı
Dikey Kapsayıcı'da, Align (horizontal) seçeneğini Uzat olarak ayarlayın
Üst Dikey Kapsayıcı denetimine üç Yatay Kapsayıcı denetimi ekleyin
Birinci ve üçüncü alt yatay kapsayıcı denetimlerinde, Uzatma yüksekliği'ni kapalı olarak ayarlayın ve yüksekliği gereken şekilde (örneğin Yükseklik = 80 gibi) düşürün.
İki eşit alt kapsayıcı bulunan yatay kapsayıcı
Üst yatay kapsayıcıda Hizala (yatay) seçeneğini Uzat olarak ayarlayın.
Üst Yatay Kapsayıcı denetimine iki Dikey Kapsayıcı denetimi ekleyin.
Model temelli uygulama denetimlerine hizalamak için özel sayfa denetimlerine stil ekleme
Özel sayfayı modern uygulama tasarımcısından oluşturduğunuzda bu özellikler varsayılan değerleri kullanır.
Özel sayfa için tema. Özel sayfada kullanılan denetimler için tema değerleri otomatik olarak Birleşik Arabirim'in varsayılan mavi temayla eşleşecek şekilde ayarlanır. Bu varsayılan tema hem stüdyoda hem de uygulama çalışma zamanında kullanılır. Açık tema seçme özel sayfa yazma deneyiminden kaldırıldı.
Denetimlerin, sayfa hiyerarşisindeki konumlarına dayalı olarak, farklı yazı tipi boyutu kullanmaları gerekir.
Not
Özel sayfa metninde 1,33 ölçeklemesi vardır, bu nedenle istenen boyutu elde etmek için hedef FontSize değerini 1,33'e bölmeniz gerekir.
Etiket Türü Hedef FontSize Kullanılacak FontSize Sayfa başlığı 17 12.75 Normal etiketler 14 10.52 Küçük etiketler 12 9.02 Birincil ve ikincil düğme denetimlerinde aşağıdaki stil değişiklikleri gerekir:
Birincil düğmeler
Color=RGBA(255, 255, 255, 1) Fill=RGBA(41,114,182,1) Height=35 FontWeight=Normalİkincil düğmeler
Color=RGBA(41,114,182,1) Fill=RGBA(255, 255, 255, 1) BorderColor=RGBA(41,114,182,1) Height=35 FontWeight=Normal
Özel sayfalar için sekme gezintisi ve klavye erişilebilirliği
Özel sayfalar, barındıran model temelli uygulama tarafından kullanılan aynı sekme gezinti tasarımını izler. Görsel olarak hizalanmış anlamsal HTML yapısı, kullanıcıların bir klavye veya ekran okuyucu kullanırken özel sayfalarda sorunsuz olarak gezinmelerine yardımcı olur. Bağımsız tuval uygulamalarının aksine, özel sayfa denetimleri ve diğer UX öğelerinin açık sekme numaraları atamaları gerektirmez. Modern denetimlerde TabIndex özelliği yoktur ve gezinti için anlamsal HTML yapısı kullanılır.
Denetimler, tuval ve kod bileşenleri, kapsayıcılar gibi çeşitli öğeler, özel sayfa düzenindeki konumlarına göre sekmeli olarak ayarlanabilir. Sekme gezintisi, Z sırası gezintisine uyar. Bileşenler, kapsayıcılar gibi daha fazla gruplandırma öğesi içindeki bağımsız sekme durakları, belge nesne modeli (DOM) ağacındaki bir sonraki öğeye geçmeden önce gezilir.
Burada denetimler, kodlar ve tuval bileşenleri ve kapsayıcıları içeren sayfayla örnek bir gezinti bulunmaktadır.
Not
Özel sayfadaki örtüşen denetimler ve öğeler için DOM birleştirilmeyecektir bu nedenle sekme durakları görsel düzenden eşitlenmemiş olabilir. Aynısı, formülleri kullanan dinamik öğe konumlandırması için de geçerlidir.