Benutzeroberfläche und Formulare
Auf dieser Seite
Über die Benutzeroberfläche bedienen Menschen die Abläufe der Anwendung. OwlMeans Common verbindet vertraute UI-Bibliotheken mit Konventionen für Formulare, Navigation und Identität.
Bibliotheken nach Zweck
| Bibliothek oder Standard | Zweck | Öffentliches OwlMeans-Paket |
|---|---|---|
| React und React DOM | Interaktive Anwendungsansichten rendern. | @owlmeans/web-client |
| shadcn/ui | UI-Komponenten für die aktuelle Web-Panel-Familie liefern. | @owlmeans/web-panel |
| Radix UI | Grundlegende Oberflächenelemente wie Dialoge, Menüs und Auswahlfelder bereitstellen. | @owlmeans/web-panel |
| Tailwind CSS | Einheitliche Gestaltung durch Utility-Klassen unterstützen. | @owlmeans/web-panel |
| Lucide | Wiederverwendbare Symbole für die Benutzeroberfläche liefern. | @owlmeans/web-panel |
| React Hook Form und Resolver-Adapter | Formularfelder verwalten und mit der Validierung verbinden. | @owlmeans/client-panel |
| i18next | Übersetzte Anwendungstexte unterstützen. | @owlmeans/client-i18n |
| Sonner | Benachrichtigungen der Anwendung anzeigen. | @owlmeans/web-panel |
| react-dropzone | Dateiauswahl und Upload-Interaktionen unterstützen. | @owlmeans/web-client |
| qrcode.react | QR-Codes rendern, wenn eine Funktion sie benötigt. | @owlmeans/web-panel |
Dies sind öffentliche Abhängigkeiten und Standards aus dem Softwareökosystem. Welche Abhängigkeiten eine App genau nutzt, hängt vom generierten Projekt und den entwickelten Funktionen ab. Nicht jede Anwendung benötigt alle hier aufgeführten Bibliotheken.
Im Projekt einsetzen
- Beschreiben Sie das benötigte Verhalten in der Spezifikation oder Story.
- Bitten Sie den Agenten, die vorhandenen OwlMeans-Common-Konventionen des Projekts zu nutzen.
- Lesen Sie die zugehörige öffentliche Paketdokumentation, wenn Sie eine Abhängigkeit verstehen möchten.
- Probieren Sie das Verhalten in der Vorschau aus und prüfen Sie die zugehörigen Zugriffsregeln.
Bitten Sie den Agenten um ein Kontaktformular mit beschrifteten Feldern, eindeutigen Fehlermeldungen und Tastaturnavigation. Geben Sie eine ungültige E-Mail-Adresse ein und prüfen Sie, ob das Formular erklärt, was zu korrigieren ist.
Eine UI umfasst die Ansichten und Bedienelemente, die eine Person verwendet. Eine Formularbibliothek hilft dabei, eingegebene Werte, Fehler und das Verhalten beim Absenden einheitlich zu handhaben.
Wie die Anwendung aufgebaut ist, zeigt das technische Konzept von OwlMeans. Den Ablauf mit dem Harness beschreibt die Anleitung Die Entwicklung mit einem anderen Coding-Agenten fortsetzen.
Anwendungsbeispiel
Kategorie: CRM und Kundenverwaltung. Beispiel: ein CRM für ein kleines Team mit Kontaktzuordnung und Zugriff für Führungskräfte.
Namen und Marken
Die Namen shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone und qrcode.react sowie alle zugehörigen Marken verbleiben bei ihren jeweiligen Inhabern oder Projektverantwortlichen. Die Verweise bezeichnen Produkte, Standards oder Quellcodebeispiele. Die OwlMeans-Dokumentation lässt nicht auf ein Sponsoring oder eine Empfehlung durch diese Inhaber schließen.