Zum Hauptinhalt springen

Erkunden der Dokumentation zu den Jutro-Komponenten

In dieser Lernmission erfahren Sie mehr über Jutro-Komponenten, was Sie damit machen können und wie Sie sich in unserer Komponentendokumentation zurechtfinden.

Was sind Jutro-Komponenten?​

  • Die granularsten Bausteine von Jutro-basierten Anwendungen
  • Kann mit anderen Komponenten kombiniert werden, um größere Blöcke zu bilden (wie ein Formular)
  • Diese bieten maximale Flexibilität bei minimaler Konsistenz

Beispiele: Schritte, Schalter, Formularfelder, Schaltflächen, Karten.

Jutro-Komponenten

Wie werden Komponenten dokumentiert?​

Alle Jutro-Komponenten sind im Abschnitt Komponenten unserer Dokumentation aufgeführt. Die linke Seitenleiste enthält Verknüpfungen zu Komponenten, wobei einige verwandte Komponenten unter einer Kategorie zusammengefasst sind.

Note: Einige Kategorieüberschriften enthalten Links zu Seiten mit gemeinsamen Details über untergeordnete Seiten. Klicken Sie auf den Namen der Kategorie, um zu überprüfen, ob es sich um einen Link zu einer Seite handelt.

Jede Komponentenseite ist in Registerkarten unterteilt, die Beispiele, Nutzungsrichtlinien, Codeübersicht und Änderungsprotokoll enthalten. Die Registerkarten „Beispiele“ und „Code“ enthalten JSX-Code, den Sie in Ihren eigenen Anwendungen verwenden können.

Was ist JSX?​

JSX ist eine Syntaxerweiterung von JavaScript. Es erleichtert das Einbetten von JavaScript-Objekten in HTML-Elemente.

Weitere Informationen zu JSX finden Sie auf der React-Website.

Vorgehensweise: Erkunden Sie die Komponentendokumentation​

Im Folgenden finden Sie einige kurze Übungen, die Ihnen helfen zu verstehen, wie es ist, mit unserer Komponentendokumentation zu arbeiten.

In diesen Lernprogrammen erfahren Sie, wie Sie Komponenteneigenschaften suchen und JSX für die Verwendung in Ihrer Anwendung schreiben.

Texteingabe​

  1. Wechseln Sie zur Seite der TextInput-Komponente.
  2. Klicken Sie auf die Registerkarte Beispiele und kopieren Sie die Basiseingabe in Ihre Anwendung.
  3. Bearbeiten Sie diese Werte und sehen Sie, wie sie sich in Ihrer Anwendung verändern.
  4. Klicken Sie auf die Registerkarte Code und scrollen Sie zum Abschnitt Eigenschaften .
  5. Suchen Sie die Eigenschaft, mit der ein Anfangswert zu einem TextInput hinzugefügt wird.
  6. Fügen Sie der TextInput-Komponente in Ihrer Anwendung einen Anfangswert hinzu.

Auswählen​

  1. Suchen Sie nach der Seite Select im linken Navigationsbereich.
Note: Erinnerung

Denken Sie daran, dass einige Seiten unter Kategorien verlinkt sind.

  1. Klicken Sie auf die Registerkarte Beispiele und kopieren Sie das Beispiel mit einem Anfangswert in Ihre Anwendung.
  2. Bearbeiten Sie diese Werte und sehen Sie, wie sie sich in Ihrer Anwendung verändern.
  3. Klicken Sie auf die Registerkarte Code und scrollen Sie zum Abschnitt Eigenschaften .
  4. Suchen Sie die Eigenschaft, mit der die Position der Beschriftung auf einer ausgewählten Komponente geändert wird.
  5. Verschieben Sie die Position der Beschriftung der ausgewählten Komponente in Ihrer Anwendung.

Erweitern Sie Ihr Wissen​

Unsere Dokumentation bietet nicht nur alle Ressourcen, die Sie für die Konfiguration von Komponenten benötigen, sondern enthält auch Richtlinien für die Arbeit mit Grid-Layouts, einschließlich ein-, zwei- und dreispaltiger Layouts.

Weitere Informationen finden Sie in der Dokumentation zum Grid-Layout .