Benutzeroberfläche und Formulare
Auf dieser Seite
Über die Benutzeroberfläche bedienen Menschen die Arbeitsablä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.
Einsatz im Projekt
- Beschreiben Sie das benötigte Verhalten in der Spezifikation oder User Story.
- Bitten Sie den Agenten, die bestehenden Konventionen des Projekts für OwlMeans Common zu nutzen.
- Lesen Sie die zugehörige öffentliche Paketdokumentation, wenn Sie eine Abhängigkeit verstehen möchten.
- Testen Sie das Verhalten in der Vorschau 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.
Lesen Sie OwlMeans Tech Concept zur Anwendungsarchitektur und Mit einem anderen Agenten weiterentwickeln zum Ablauf mit der Agenten-Arbeitsumgebung.
Anwendungsbeispiel
Kategorie: CRM und Kundenverwaltung. Beispiel: ein CRM für ein kleines Team mit Zuständigkeiten für Kontakte 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 dienen dazu, Produkte, Standards oder Quellcodebeispiele zu benennen. Die OwlMeans-Dokumentation impliziert weder ein Sponsoring noch eine Befürwortung durch diese Inhaber.