Karte (Card)

Übersicht

Die Avonni Karte ist ein flexibler Baustein oder Rahmen für Ihre Inhalte. Sein Hauptzweck ist es, andere Komponenten zu halten, eine klare visuelle Begrenzung sowie einen dedizierten Header und Footer bereitzustellen.

Hauptmerkmale

• Inhaltscontainer: Der Hauptbereich der Karte ist ein Slot, in den Sie jedes andere Avonni-Komponente (oder mehrere Komponenten) einfügen können.

• Integrierter Header & Footer: Enthält dedizierte Bereiche für einen Titel, ein Symbol, Aktionen und Footer-Inhalte.

• Layout-Organisation: Hilft dabei, Ihre Seiteninhalte in klare, logische Abschnitte zu strukturieren.

• Visuelle Attraktivität: Präsentiert Informationen in einem organisierten, modernen und leicht verdaulichen Format.

• Medienintegration: Ermöglicht es, ein Bild als Hintergrund oder neben Ihren Inhalten zu platzieren.

Anwendungsfälle

• Dashboard-Widgets: Präsentation von Schlüsselkennzahlen, Diagrammen oder Datenvisualisierungen auf einer Start- oder App-Seite in einer organisierten Weise.

• Profilzusammenfassungen: Anzeige wichtiger Informationen für ein Kunden- oder Benutzerprofil, wie Name, Foto und Schnelllinks.

• Produktkarten: Darstellung von Produktdetails, Bildern und Preisen in Listen- oder Rasterformat.

• Formulare organisieren: Gruppieren zusammengehöriger Eingabefelder innerhalb eines Formulars.

• Einzelne Datensätze anzeigen in einer galerieähnlichen Ansicht.

Hinzufügen der Kartenkomponente

Per Drag & Drop: Aus der Komponentenbibliothek (linkes Panel) finden Sie die "Card"-Komponente und ziehen Sie sie auf Ihre Arbeitsfläche.

Konfiguration

Wählen Sie die Kartenkomponente auf der Arbeitsfläche aus, um auf ihre Eigenschaften im Eigenschaftenbereich zuzugreifen.

Header-Konfiguration

Der Header der Karte bietet Platz für einen Titel und interaktive Elemente.

• Titel: (Text) Geben Sie einen klaren und prägnanten Titel ein, der oben auf der Karte prominent angezeigt wird.

• Symbolname: (Text, optional) Fügen Sie dem Titel ein Symbol hinzu, um den visuellen Kontext zu verbessern (z. B. standard:account).

• Actions-Slot: Der Header enthält einen dedizierten Actions- Slot (in der Regel oben rechts). Ziehen Sie hier Komponenten wie Button oder Button Menu hinein, um Benutzern Aktionen im Zusammenhang mit dem Karteninhalt bereitzustellen.

Content- & Footer-Slots (Die Kraft der Slots)

Was die Karte wirklich leistungsfähig macht, ist ihre Fähigkeit, andere Komponenten zu enthalten.

• Inhalts-Slot: Der Hauptbereich der Karte ist ein flexibler Slot. Sie können jedes andere Avonni-Komponenten hierher ziehen – von einfachen Text- und Metric-Komponenten bis hin zu komplexen Datentabellen, Diagrammen oder sogar einer weiteren dynamischen Komponente.

• Footer-Slot: Die Karte enthält außerdem einen Footer- Slot. Dieser Bereich ist ideal, um Aktionslinks (wie „Alle anzeigen“) oder Zusammenfassungsinformationen hinzuzufügen.

Medien & Erscheinungsbild

Sie können Ihre Karte optisch ansprechender gestalten, indem Sie ein Bild einfügen.

• Medienbild: Geben Sie eine URL für ein Bild an, das Sie mit der Karte verknüpfen möchten.

• Medienposition: Wählen Sie, wie das Bild angezeigt werden soll:

  • Links, Oben, Rechts, Unten: Platziert das Bild neben dem Hauptinhaltsbereich.

  • Hintergrund: Verwendet das Bild als Hintergrund für die gesamte Karte.

  • Überlagerung: Überlagert das Bild über dem Karteninhalt.

Verhalten & Sichtbarkeit

• Sichtbar: (Boolean) Steuert, ob die gesamte Kartenkomponente auf der Seite sichtbar ist. Sie können dies an eine Variable oder Formel binden, um eine dynamische Ein-/Ausblendlogik zu ermöglichen.

Beispiel: Erstellen eines "Key Metric"-Widgets

1. Fügen Sie eine Karte hinzu: Ziehen Sie eine Kartenkomponente auf die Arbeitsfläche.

2. Header konfigurieren:

   • Setzen Sie die Titel auf „Quartalsweiser Verkaufsleistung“.

   • Setzen Sie die Symbolname auf standard:dashboard.

   • Ziehen Sie ein Button Menu in den Actions- Slot mit Optionen wie „Aktualisieren“ und „Exportieren“.

3. Inhalt hinzufügen:

   • Ziehen Sie ein Metric Komponente in den Haupt- Inhalts- Slot und konfigurieren Sie sie so, dass der Gesamtumsatz angezeigt wird.

   • Ziehen Sie ein Diagramm Komponente unterhalb der Metric (immer noch innerhalb des Inhalts- Slots) um eine Verkaufstrendlinie anzuzeigen.

4. Footer hinzufügen:

   • Ziehen Sie ein Text Komponente in den Footer- Slot. Setzen Sie dessen Wert um einen Link wie „Vollen Bericht anzeigen“ anzuzeigen.

Ergebnis: Sie haben schnell ein eigenständiges, organisiertes Dashboard-Widget mit klarem Titel, Aktionen und mehreren Komponenten im Inneren zusammengestellt.

Wesentliche Überlegungen

• Als Container: Denken Sie daran, dass die Hauptaufgabe der Karte darin besteht, zu organisieren und einen visuellen Rahmen bereitzustellen. Ihre Stärke zeigt sich durch die Komponenten, die Sie in innerhalb ihre Slots

• Layout: platzieren. Konfigurieren Sie abschließend die Kombinieren Sie Karten mit der

Zusammenfassung

Komponente, um anspruchsvolle, rasterbasierte Seitenlayouts zu erstellen.