Responsive Authoring
Verwenden Sie reaktionsfähiges Authoring, um zu erstellen UI BuilderSeiten, die sich problemlos an verschiedene Formfaktoren (Größen) anpassen, z. B. Desktop, Tablet und Mobilgeräte.
Reaktionsfähiges Authoring in UI Builder
Mit reaktionsfähigem Authoring können Sie Seiten erstellen, die in jedem Formfaktor gut aussehen und ordnungsgemäß funktionieren, wodurch die Interaktion mit dem Inhalt erleichtert wird. Beispielsweise kann eine Seite, die bei Anzeige auf einem Laptop drei Spalten enthält, für kleinere Bildschirme auf eine einzelne Spalte angepasst werden.
UI Builder Bietet derzeit drei Standardformfaktoren:
- Desktop (1281 Pixel bis unendlich)
- Tablet (1280 Pixel und kleiner)
- Mobil (500 Pixel gegen Null)
Zusätzlich zu diesen Formfaktoren können Sie bis zu drei zusätzliche anwenderdefinierte Haltepunkte (Breiten) erstellen. Weitere Informationen finden Sie unter Erstellen Sie einen Haltepunkt für reaktionsfähiges Authoring.
Reaktionsfähiges Authoring und Reflow
Ab Xanadu Store Release 1 ist reaktionsfähiges Authoring nur beim Erstellen verfügbar UI BuilderSeiten von Grund auf neu. Reaktionsfähiges Authoring ist für vorhandene Seiten oder Seiten, die mit einer Vorlage erstellt wurden, nicht verfügbar. Diese Seitentypen verwenden weiterhin das vorhandene, standardmäßige Reflow-Modell, um Seiten an verschiedene Bildschirmbreiten anzupassen.
Der Reflow wandelt Seitenlayouts automatisch in eine vertikale, gestapelte Ansicht um, ohne dass Inhalte oder Funktionen verloren gehen, wenn Anwender den Browser-Zoom auf 400% erhöhen. Diese Anpassung hilft Anwendern mit schlechter Sicht oder mit Problemen beim Anzeigen von Webinhalten in einem Browser aufgrund von Monitorgröße, Gerätetyp, schlechter Beleuchtung oder anderen Situationen.
Alle vorhandenen Seiten, die mit Vorlagen erstellt wurden oder von Grund auf neu erstellt wurden, verwenden den Umbruch automatisch. Jetzt, wenn Seiten von Grund auf neu in erstellt werden UI Builder, Ein zusätzlicher Schritt zeigt Ihnen, dass reaktionsfähiges Authoring standardmäßig ausgewählt ist. Sie können stattdessen Reflow verwenden, indem Sie auswählen Build ohne Reaktion , Die Verwendung der Option für reaktionsfähige Erstellung gibt Ihnen jedoch mehr Kontrolle darüber, wie Seiten funktionieren und verschiedene Formfaktoren betrachten. Für weitere Informationen zum Erstellen von Seiten in UI Builder, Siehe Erstellen Sie eine Seite in UI Builder .
Weitere Informationen zum Umbruch finden Sie unter .
Für eine Liste von UI BuilderKomponenten, die den Reflow unterstützen, siehe Unterstützung für Reflow Abschnitt von Next Experience-Komponenten – Release-Hinweise .
Anwendung und Kaskadierung von Changes
Alle an einem Formfaktor vorgenommenen Änderungen werden automatisch auf alle kleineren Formfaktoren angewendet. Beispielsweise gelten alle am Tablet vorgenommenen Änderungen sowohl für das Tablet als auch für das Mobilgerät. Wenn Sie dann jedoch Änderungen am mobilen Formfaktor vornehmen, werden die kaskadierten Einstellungen aus dem Tablet-Formfaktor überschrieben. Mit dieser kaskadierenden Funktion können Sie bestimmte Änderungen für jeden kleineren Formfaktor vornehmen, damit die Seite gut aussieht und funktioniert.
Reaktionsfähiges Authoring und Controller
Wenn Sie einer Seite einen Controller hinzufügen, sind die Controller-Eigenschaften global und können nicht pro Formfaktor festgelegt werden. Weitere Informationen zu Controllern finden Sie unter Daten binden an UI BuilderSeiten mit Controllern (erweiterte Funktion).
Verwenden von reaktionsfähigem Authoring beim Erstellen von Seiten
Erstellen Sie beim Erstellen von Seiten maßgeschneiderte Designs, um das Erscheinungsbild für verschiedene Formfaktoren zu steuern.
Standardmäßig erstellen Sie in der Phase Seiten für den Desktop (1281 Pixel bis unendlich). Wählen Sie jederzeit ein anderes Symbol aus, um die Seite in der Phase in einem anderen Formfaktor anzuzeigen, z. B. Tablet oder Mobilgerät. Bearbeiten Sie die Seite nach Bedarf so, dass sie im neuen Formfaktor entsprechend angezeigt wird.
So sieht eine Beispielseite beim Desktop-Formfaktor aus.
Hier ist die gleiche Seite, die für den Tablet-Formfaktor angepasst wurde.
Für Tablet wurden die Überschriftenkomponenten und die Bildkomponenten reduziert. Die Konfiguration der einfachen Listenkomponente wurde so bearbeitet, dass vier anstelle von sechs Spalten angezeigt werden, und die maximale Anzahl von Zeilen wurde auf 5 festgelegt. Beim Bearbeiten einer Komponente für einen Formfaktor werden die geänderten Felder mit einem kaskadierenden Symbol für diesen Formfaktor (in diesem Fall Tablet) markiert. Mit dem Symbol können Sie die Unterschiede zwischen den Formfaktoren für eine bestimmte Seite einfach bestimmen.
Hier ist die gleiche Seite, die für den mobilen Formfaktor angepasst wurde.
Die Anzahl der Wörter in der Überschrift wurde reduziert, und die Bildkomponente wurde ausgeblendet. Die Konfiguration der einfachen Listenkomponente wurde so bearbeitet, dass zwei anstelle von vier Spalten angezeigt werden, und die Option zum Ausblenden der Fußzeilenoption „alle anzeigen“ wurde ausgewählt. Die beiden speziell für mobile Felder angepassten Felder haben ein mobiles kaskadierendes Symbol daneben. Die Maximale Zeilen Das Feld behält weiterhin das kaskadierende Tablet-Symbol bei, da dieses Feld die Tablet-Einstellung erbt und nicht für Mobilgeräte angepasst wurde.
Zusätzlich zu den Standardformfaktoren in der Editor-Ansicht können Sie jederzeit manuell eine Zahl in das Pixelfeld eingeben. Die Phase passt sich basierend auf dem Bereich an den nächsten Formfaktor an. Wenn Sie beispielsweise 850 Pixel eingeben, wird die Phase an den Tablet-Formfaktor angepasst, da ihr Bereich als 1280 bis 501 Pixel definiert ist.
