Abschnitt
Übersicht
Die Avonni Section-Komponente erstellt aufklappbare Abschnitte, um Inhalte in Ihren Salesforce Dynamic Components zu organisieren. Sie enthält einen Slot zum Hinzufügen anderer Avonni-Komponenten im Inneren, wodurch sie ideal zum Gruppieren verwandter Elemente wie Formulare, Listen oder Datenanzeigen ist.
Hauptmerkmale
Erweiterbares Design: Sichtbarkeit von Inhalten umschalten für bessere Benutzererfahrung in dichten Oberflächen.
Anpassung: Varianten zur Gestaltung, Avatare für visuelle Hinweise und Symbole für Zusammenklappbarkeit.
Interaktivität: Unterstützung für Aktionen, Fortschrittsanzeiger und Tags.
Slot-Integration: Andere Komponenten (z. B. Textbereiche, Schieberegler) innerhalb des Inhaltsbereichs des Abschnitts einbetten.
Tipp
Um akordeonähnliche Strukturen mit mehreren aufklappbaren Panels zu erstellen, verwenden Sie die dedizierte Avonni Accordion-Komponente
Anwendungsfälle
Gruppieren Sie Formularfelder in aufklappbaren Panels (z. B. Abschnitt „Kontaktinformationen“).
Organisieren Sie Dashboard-Widgets und klappen Sie weniger genutzte zusammen.
Zeigen Sie zusammenklappbare Hilfsinhalte oder FAQs an.
Strukturieren Sie Berichte mit getaggten, fortschrittsverfolgten Abschnitten.
Erstellen Sie verschachtelte UIs, z. B. einen Abschnitt mit einer Datentabelle für gefilterte Ansichten.
Konfiguration
Wählen Sie den Abschnitt auf der Arbeitsfläche aus, um Eigenschaften im rechten Eigenschaften-Panel aufzurufen.
Grundlegende Eigenschaften
Diese behandeln Identifikation und grundlegende Beschriftungen.
API-Namen
Text
Eindeutige Kennung für die Instanz.
ContactDetailsSection
Titel
Text
Hauptüberschrift für den Abschnitt.
"Kontaktinformationen"
Untertitel
Text (Optional)
Untertext oder Beschreibung unter dem Titel.
"Geben Sie hier Benutzerdaten ein."
Inhalt und Slot
Dies ist der erweiterbare Bereich, in den Sie andere Avonni-Komponenten (z. B. Eingabefelder, Tabellen) per Drag & Drop ziehen. Keine direkte Eigenschaft — Konfiguration über Platzierung auf der Arbeitsfläche.
Beste Praxis: Halten Sie im Slot eingebrachten Inhalt thematisch zusammenhängend und knapp, um die Leistung beim Ein- und Ausklappen zu erhalten.
Aussehen & Variante
Diese steuern den visuellen Stil.
Variante
Wählen Sie
Basisstil: base (Standard, sauber) oder shaded (mit Hintergrundschattierung).
base, shaded.
Zusammenklappbarkeit
Diese steuern das Ein- und Ausklappverhalten.
Zusammenklappbar
Boolean
Ermöglicht das Umschalten; wenn ausgeschaltet, ist der Abschnitt immer geöffnet.
Geschlossen
Boolean
Anfangszustand: Ein = eingeklappt, Aus = ausgeklappt (aktiv, wenn Zusammenklappbar eingeschaltet ist).
Symbol für Zusammenklappbarkeit (aktiv, wenn Zusammenklappbar eingeschaltet ist)
Passen Sie das Umschalt-Symbol an.
Ausblenden
Boolean
Blendet das Symbol vollständig aus.
-
Name des Öffnen-Symbols
Text
Symbol bei erweitertem Zustand (z. B. Salesforce Lightning Design System-Namen).
utility:chevronup
Name des Schließen-Symbols
Text
Symbol bei eingeklapptem Zustand.
utility:chevrondown
Position
Wählen Sie
Position des Symbols relativ zum Titel.
left, right.
Tipp: Verwenden Sie standardisierte SLDS-Symbole für Konsistenz. (Platzhalter für Screenshot: Abschnitt mit benutzerdefiniertem Symbol.)
Avatar
Fügen Sie ein visuelles Element vor dem Titel hinzu.
Variante
Wählen Sie
Form: circle (rund) oder square (quadratisch).
circle, square.
Initialen
Text (Optional)
Textüberlagerung (z. B. Benutzerinitialen).
"JD"
Symbolname
Text (Optional)
Symbol anstelle von Bild/Initialen.
standard:user
Symbolgröße
Wählen Sie
Größe des Symbols oder Avatars.
x-small, small, medium, large, x-large, xx-large.
Hinweis: Priorisieren Sie eins: Bild, Symbol oder Initialen.
Aktionen
Konfigurieren Sie Schaltflächen auf der rechten Seite, die Interaktionen auslösen (Einrichtung im Interaktionen-Panel). Beispiele: "Bearbeiten", "Löschen".
Beste Vorgehensweise
Beschränken Sie sich auf 2–3 Aktionen, um Überfrachtung zu vermeiden, oder verwenden Sie die sichtbaren Aktionsschaltflächen, um die Anzahl der angezeigten Aktionen festzulegen und/oder Unordnung zu verhindern; verwenden Sie sie für abschnittsspezifische Vorgänge.
Fortschritt und Tags
Diese fügen Indikatoren und Metadaten hinzu.
Fortschritt
Zahl
Wert für eine Fortschrittsanzeige (0–100); zeigt den Abschlussstatus an. Kann manuell gesetzt oder an eine Zahlenvariable gebunden werden für dynamische Aktualisierungen basierend auf Berechnungen oder Daten.
75 (oder abgebildet auf {!completionPercent})
Tags
Liste/Text
Komma-separierte Liste oder Array von Tags zur Kategorisierung/Durchsuchbarkeit.
"Priorität", "Überprüfung"
Tipp
Für Fortschritt ermöglicht die Bindung an eine Variable (in Resources erstellt) Echtzeitänderungen, z. B. Aktualisierung basierend auf Formularabschluss oder Abfrageergebnissen.
Beispiel
Zusammenklappbarer Kontaktformular-Abschnitt
Abschnittskomponente hinzufügen
API-Namen: ContactFormSection
Titel: "Kontaktinformationen"
Untertitel: "Benutzerinformationen ausfüllen"
Variante: shaded
Zusammenklappbar: Ein
Geschlossen: Ein (beginnt eingeklappt)
Symbol für Zusammenklappbarkeit: Open Icon Name = utility:chevronup, Close Icon Name = utility:chevrondown, Position = left
Aktionen konfigurieren
Erstellen Sie zuerst in Resources eine Record-Variable für das gewünschte Objekt (z. B. Kontakt), um Formular-Daten zu halten. Fügen Sie dann im Interaktionen-Panel eine "Speichern"-Schaltfläche hinzu, die eine Datensatzaktualisierungsaktion (z. B. Datensatz aktualisieren) auslöst und an die Record-Variable bindet.
Slot-Inhalt
Um den Abschnitt mit Formularfeldern zu füllen, die mit Ihrem Kontakt-Datensatz verknüpft sind, basieren Sie diese auf der zuvor erstellten Record-Variable (z. B. für das Kontakt-Objekt).
Schritte:
Wählen Sie die Abschnittskomponente auf der Arbeitsfläche aus.
Wechseln Sie im Elemente-Panel (in der Regel links oder rechts) zum Felder Tab—dies zeigt verfügbare Felder der gebundenen Record-Variable an.
Ziehen Sie relevante Felder (z. B. Name, E-Mail) direkt per Drag & Drop in den Slot des Abschnitts auf der Arbeitsfläche.
Ergebnis: Ein schattierter, zusammenklappbarer Abschnitt mit Avatar, Fortschrittsbalken, Tags und Aktionen — klappt auf, um Formularfelder anzuzeigen.
Wesentliche Überlegungen
Logik der Zusammenklappbarkeit: Testen Sie den anfänglichen Geschlossen-Zustand; binden Sie an Variablen für dynamisches Umschalten.
Slot-Performance: Vermeiden Sie, Slots mit schweren Komponenten zu überladen, um Verzögerungen beim Einblenden zu verhindern.
Priorisierung des Avatars: Verwenden Sie ein Bild für Fotos, ein Symbol für generische Darstellungen und Initialen zur Personalisierung — es wird nur eines angezeigt.
Integration von Aktionen: Stellen Sie sicher, dass Interaktionen im Panel definiert sind; testen Sie das Auslösen beim Klicken.
Fortschrittsvisualisierung: Stil passt zur Variante; verwenden Sie es zur Aufgabenverfolgung innerhalb von Abschnitten.
Barrierefreiheit: Geben Sie Alt-Text für Bilder/Symbole an; stellen Sie sicher, dass das Ein-/Ausklappen per Tastatur navigierbar ist.
Fehlerbehebung bei häufigen Problemen
Abschnitt lässt sich nicht zusammenklappen: Prüfen Sie, ob Zusammenklappbar eingeschaltet ist; suchen Sie nach widersprüchlichen Verhaltensweisen.
Symbol wird nicht angezeigt: Wenn Ausblenden aktiviert ist, schalten Sie es aus; bestätigen Sie, dass Symbolnamen gültige SLDS-Namen sind.
Aktionen lösen nicht aus: Überprüfen Sie die Einrichtung und Bindungen im Interaktionen-Panel.
Fortschritt nicht sichtbar: Stellen Sie sicher, dass der Wert 0–100 ist; eventuell ist eine Variantenanpassung erforderlich.
Tags überlappen: Begrenzen Sie die Anzahl der Tags; stylen Sie ggf. über benutzerdefiniertes CSS.
Slot-Inhalt fehlt: Ziehen Sie Komponenten direkt in den Slot auf der Arbeitsfläche.
Zusammenfassung
Die Avonni Section-Komponente organisiert UIs mit erweiterbaren, anpassbaren Panels und Slots für verschachtelte Komponenten. Sie ist ideal für modulare, interaktive Designs in Salesforce. Für verwandte Komponenten siehe Avonni Accordion oder das Interactions-Guide.
Zuletzt aktualisiert
War das hilfreich?