Trekkspilliste

En komponent som lar deg gruppere innhold i sammenleggbare seksjoner

Bruk

Trekkspilliste er en komponent som lar brukerne utvide og lukke seksjoner med innhold ved å klikke på overskriften, noe som gir en plassbesparende og organisert måte å presentere informasjon på.

Anatomi

Relatert

• AccordionGroup

Egenskaper

Konfigurering

Legg til komponent

Du kan legge til en komponent i Altinn Studio Designer ved å dra den fra venstre sidepanel til midten av siden. Når du velger komponenten, vises et panel med innstillinger for den på høyre side.

Innstillinger i Altinn Studio Designer

Innstillinger for egenskaper tilgjengelig i Altinn Studio Designer.

NB! Egenskapen children for Trekkspilliste må legges til manuelt for å unngå feilmelding.

• Komponent-ID (id): Automatisk generert komponent-ID (kan redigeres).

Korresponderende innstillinger i sidens JSON-fil.

App/ui/layouts/{page}.json

...

{
  "data": {
    "layout": [
       {
        "id": "Accordion-3uoJMS",
        "type": "Accordion"
      }
    ]
  }
}

Legg til overskrift og underelementer

textResourceBindings.title

Du kan legge til overskriften for Trekkspilliste som en tekst direkte eller referere til den med en tekstnøkkel til en tekstressurs.

children

Spesifiser hvilke komponenter du vil kunne ekspandere ved å legge deres ID-er i en array under children.

Følgende typer kan legges til en Accordion:

• Paragraph
• Button

Eksempel

Trekkspilliste med et avsnitt og en knapp som underelementer.

...

{
  "data": {
    "layout": [
       {
        "id": "Accordion-3uoJMS",
        "type": "Accordion",
        "textResourceBindings": {
          "title": "Lorem ipsum"
        },
        "children": ["lorem-ipsum", "ok-button"]
      },
      {
        "id": "lorem-ipsum",
        "type": "Paragraph",
        "textResourceBindings": {
          "title": "Paragraph.loremIpsum1"
        },
        "dataModelBindings": {}
      },
      {
        "id": "ok-button",
        "type": "Button",
        "dataModelBindings": {},
        "textResourceBindings": {
          "title": "OK"
        }
      }
    ]
  }
}

Nivå for overskrift

Standard nivå for overskrift er 2. For å endre, legg til egenskapen headingLevel som i eksempelet under. headingLevel kan ta verdiene 2 | 3 | 4 | 5 | 6.

...

{
  "data": {
    "layout": [
       {
        "id": "Accordion-3uoJMS",
        "type": "Accordion",
        "textResourceBindings": {
          "title": "Lorem ipsum"
        },
        "children": ["lorem-ipsum", "ok-button"],
        "headingLevel": 3
      },
      ...
    ]
  }
}