Build a mobile-friendly app

Überblick

You can use Apps to build mobile-friendly apps. The same app can be used on devices with different screen sizes, such as mobile phones, tablets, or computers, without any issues.

Führen Sie zur Veranschaulichung die Schritte im Abschnitt Tutorial aus.

Am Ende dieser Seite finden Sie auch eine Beispiel-App-Datei mit weiteren Beispielen.

Hinweis:

Das Steuerelement „Benutzerdefinierte Liste“ unterstützt derzeit keine mobilen oder kleinen Bildschirme.

Tutorial

Verwenden Sie dieses Beispiel, um eine App zu erstellen, die drei Felder und eine Schaltfläche zum Senden enthält. Diese App verhält sich je nach Bildschirmgröße unterschiedlich.

1. Erstellen Sie eine neue App.

2. Fügen Sie Ihrer App ein Container -Steuerelement hinzu.

   1. Legen Sie das Layout des Containers auf Horizontal fest .
   2. Überprüfen Sie die Eigenschaft Umbrechen zulassen des Containers.
   3. Konfigurieren Sie die Breite des Containers als 100 %.

   

3. Fügen Sie ein Textbox -Steuerelement im Container hinzu.

   1. Fügen Sie Name in der Eigenschaft Beschreibung hinzu.
   2. Ändern Sie die Beschriftungsplatzierung auf der Registerkarte Stil zu Oben .

4. Fügen Sie nach dem ersten ein zweites Textfeld -Steuerelement hinzu.

   1. Fügen Sie Age in der Eigenschaft Beschreibung hinzu.
   2. Ändern Sie die Beschriftungsplatzierung auf der Registerkarte Stil zu Oben .

5. Fügen Sie nach dem zweiten ein drittes Textfeld -Steuerelement hinzu.

   1. Fügen Sie Address in der Eigenschaft Beschreibung hinzu.
   2. Ändern Sie die Beschriftungsplatzierung auf der Registerkarte Stil zu Oben .

6. Fügen Sie einen zweiten Container unter dem ersten mit denselben Style- Eigenschaften hinzu.

7. Fügen Sie ein Button -Steuerelement im zweiten Container hinzu.

   

Ergebnis und Tests

Sie können Ihre App jetzt in der Vorschau anzeigen und testen.

Führen Sie die folgenden Schritte aus, um Ihre App mit dem Google Chrome -Browser zu testen:

1. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite.

2. Wählen Sie Überprüfen aus dem Menü aus.

3. Klicken Sie im Menü auf der rechten Seite auf Gerätesymbolleiste umschalten .

4. Wählen Sie die gewünschten Dimensionen aus der Dropdownliste oben auf der Seite aus, um Ihre App zu testen.

   

   Hinweis:

   Im Fall des Container-Layout -Steuerelements sind die darin enthaltenen Container automatisch für Mobilgeräte optimiert. Wenn die Steuerelemente in den Containern ebenfalls reaktiv sein müssen, verwenden Sie die Eigenschaft Umbruch zulassen .

Weitere Beispiele finden Sie unten in der Beispiel-App-Datei.

Beispiel herunterladen