Abschnitt
Überblick
Die Avonni Section-Komponente erstellt erweiterbare Abschnitte, um Inhalte in Ihren Salesforce Dynamic Components zu organisieren. Sie enthält einen Slot zum Hinzufügen anderer Avonni-Komponenten und eignet sich ideal zum Gruppieren verwandter Elemente wie Formulare, Listen oder Datendarstellungen.
Hauptmerkmale
Erweiterbares Design: Schalten Sie die Sichtbarkeit von Inhalten um für bessere Benutzererfahrung in dichten Oberflächen.
Anpassung: Varianten für das Styling, Avatare für visuelle Hinweise und Symbole für die Einklappbarkeit.
Interaktivität: Unterstützung für Aktionen, Fortschrittsanzeigen und Tags.
Slot-Integration: Betten Sie andere Komponenten (z. B. Textbereiche, Schieberegler) in den Inhaltsbereich des Abschnitts ein.
Tipp
Zum Erstellen akkordeonähnlicher Strukturen mit mehreren erweiterbaren Paneelen verwenden Sie die dedizierte Avonni Accordion-Komponente
Anwendungsfälle
Gruppieren Sie Formularfelder in erweiterbaren Paneelen (z. B. Abschnitt „Kontaktangaben“).
Organisieren Sie Dashboard-Widgets und klappen Sie weniger genutzte zusammen.
Zeigen Sie einklappbare 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 auf die Eigenschaften im rechten Eigenschaftenbereich zuzugreifen.
Grundlegende Eigenschaften
Diese behandeln Identifikation und grundlegende Beschriftung.
API-Name
Text
Eindeutiger Bezeichner 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 die Benutzerdaten ein."
Inhalt und Slot
Dies ist der erweiterbare Bereich, in den Sie andere Avonni-Komponenten (z. B. Eingaben, Tabellen) per Drag & Drop ziehen. Keine direkte Eigenschaft – konfigurieren Sie über die Platzierung auf der Arbeitsfläche.
Beste Praxis: Halten Sie den Slot-Inhalt thematisch zusammenhängend und knapp, um die Leistung beim Ein- und Ausklappen zu erhalten.
Aussehen & Variante
Diese steuern den visuellen Stil.
Variante
Auswählen
Basisstil: base (Standard, sauber) oder shaded (mit Hintergrundschattierung).
base, shaded.
Einklappbarkeit
Diese steuern das Verhalten beim Ein-/Ausklappen.
Einklappbar
Boolean
Ermöglicht das Umschalten; ist es deaktiviert, ist der Abschnitt immer geöffnet.
Geschlossen
Boolean
Anfangszustand: Ein = eingeklappt, Aus = aufgeklappt (aktiv, wenn Einklappbar eingeschaltet ist).
Einklappsymbol (aktiv, wenn Einklappbar eingeschaltet ist)
Passen Sie das Umschalt-Symbol an.
Verstecken
Boolean
Versteckt das Symbol vollständig.
-
Name des Öffnen-Symbols
Text
Symbol, wenn erweitert (z. B. Namen des Salesforce Lightning Design System).
utility:chevronup
Name des Schließen-Symbols
Text
Symbol, wenn eingeklappt.
utility:chevrondown
Position
Auswählen
Position des Symbols relativ zum Titel.
left, right.
Tipp: Verwenden Sie standardmäßige 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
Auswählen
Form: circle (abgerundet) oder square (quadratisch).
circle, square.
Initialen
Text (Optional)
Text-Overlay (z. B. Benutzerinitialen).
"JD"
Icon-Name
Text (Optional)
Symbol statt Bild/Initialen.
standard:user
Icon-Größe
Auswählen
Größe des Symbols oder Avatars.
x-small, small, medium, large, x-large, xx-large.
Hinweis: Priorisieren Sie eines: Bild, Symbol oder Initialen.
Aktionen
Konfigurieren Sie Schaltflächen auf der rechten Seite, die Interaktionen auslösen (Einrichtung im Interaktionsbereich). Beispiele: "Bearbeiten", "Löschen".
Beste Praxis
Begrenzen Sie auf 2–3 Aktionen, um Unordnung 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 Fortschrittsleiste (0–100); zeigt den Fertigstellungsstatus an. Kann manuell gesetzt oder an eine Zahlenvariable gebunden werden für dynamische Aktualisierungen basierend auf Berechnungen oder Daten.
75 (oder zugeordnet zu {!completionPercent})
Tags
Liste/Text
Komma-getrennte oder Array-formatierte 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
Einklappbarer Kontaktformular-Abschnitt
Abschnittskomponente hinzufügen
API-Name: ContactFormSection
Titel: "Kontaktangaben"
Untertitel: "Benutzerinformationen ausfüllen"
Variante: shaded
Einklappbar: Ein
Geschlossen: Ein (beginnt eingeklappt)
Einklappsymbol: Open Icon Name = utility:chevronup, Close Icon Name = utility:chevrondown, Position = left
Aktionen konfigurieren
Erstellen Sie zunächst in Resources eine Record-Variable für das gewünschte Objekt (z. B. Contact), um Formulardaten zu halten. Fügen Sie dann im Interaktionsbereich eine "Speichern"-Schaltfläche hinzu, die eine Datensatz-Aktualisierungsaktion (z. B. Datensatz aktualisieren) auslöst und an die Record-Variable gebunden ist.
Slot-Inhalt
Um den Abschnitt mit Formularfeldern zu füllen, die mit Ihrem Kontakt-Datensatz verknüpft sind, basieren Sie ihn auf der zuvor erstellten Record-Variable (z. B. für das Contact-Objekt).
Schritte:
Wählen Sie die Abschnittskomponente auf der Arbeitsfläche aus.
Wechseln Sie im Elementebereich (typischerweise links oder rechts) zur Felder Registerkarte—dies zeigt verfügbare Felder aus der gebundenen Record-Variable an.
Ziehen Sie relevante Felder (z. B. Name, E-Mail) direkt in den Slot des Abschnitts auf der Arbeitsfläche.
Ergebnis: Ein schattierter, einklappbarer Abschnitt mit Avatar, Fortschrittsbalken, Tags und Aktionen—erweitert sich, um Formularfelder anzuzeigen.
Wichtige Überlegungen
Einklappbarkeit-Logik: Testen Sie den anfänglichen Geschlossen-Zustand; binden Sie an Variablen für dynamisches Umschalten.
Slot-Leistung: Vermeiden Sie das Überladen von Slots mit schweren Komponenten, um Verzögerungen beim Einblenden zu verhindern.
Avatar-Priorisierung: Verwenden Sie ein Bild für Fotos, ein Symbol für allgemeines und Initialen für Personalisierung—nur eines wird angezeigt.
Aktionen-Integration: Stellen Sie sicher, dass Interaktionen im Bereich 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 Alternativtext für Bilder/Symbole an; stellen Sie sicher, dass das Ein-/Ausklappen über die Tastatur navigierbar ist.
Fehlerbehebung bei häufigen Problemen
Abschnitt klappt nicht ein: Überprüfen Sie, ob Einklappbar aktiviert ist; prüfen Sie auf widersprüchliche Verhaltensweisen.
Symbol wird nicht angezeigt: Wenn Verstecken eingeschaltet ist, schalten Sie es aus; bestätigen Sie, dass die Symbolnamen gültige SLDS-Namen sind.
Aktionen lösen nicht aus: Überprüfen Sie die Einrichtung und Bindungen im Interaktionsbereich.
Fortschritt nicht sichtbar: Stellen Sie sicher, dass der Wert 0–100 ist; es kann eine Variantenanpassung erforderlich sein.
Tags überlappen: Begrenzen Sie die Anzahl der Tags; stylen Sie bei Bedarf per benutzerdefiniertem 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 Paneelen und Slots für verschachtelte Komponenten. Sie ist ideal für modulare, interaktive Designs in Salesforce. Für verwandte Komponenten siehe Avonni Accordion oder Interactions Guide.
Zuletzt aktualisiert
War das hilfreich?