Lage apper Utvikling Brukergrensesnitt Komponenter Nestet trekkspilliste

Nestet trekkspilliste

En komponent som lar deg ha trekkspillister inni en annen

🚧 Denne dokumentasjonen er under oppdatering.

Bruk

Nestet trekkspilliste brukes til å gruppere relaterte Trekkspilliste-komponenter.

Anatomi

AccordionGroup lukket — *AccordionGroup i lukket tilstand*

AccordionGroup åpen — *AccordionGroup med en åpen Accordion*

Nestet trekkspilliste: Gruppe med to eller flere Trekkspilliste-komponenter.
Overskrift: Den klikkbare seksjonstittelen som brukere samhandler med for å utvide eller lukke innholdet.
Innholdsområde: Området som utvider eller kollapser, som viser eller skjuler ytterligere informasjon når overskriften klikkes.

Merk: Overskrift og innholdsområde er egenskaper ved Accordion underelementer.

Relatert

Trekkspilliste

Egenskaper

Egenskap	Type	Beskrivelse
`children`	array	En array med ID’en til komponenter som tilhører gruppen.

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

Vi oppdaterer for øyeblikket Altinn Studio med flere muligheter for innstillinger! Dokumentasjonen oppdateres fortløpende, men det kan være flere innstillinger tilgjengelig enn det som beskrives her og noen innstillinger kan være i betaversjon.

Innstillinger for egenskaper tilgjengelig i Altinn Studio Designer.

NB! For å unngå feilemlding må egenskapen children legges til i koden. Se Legg til underelementer

AccordionGroup innstillingspanel — *Innstillinger for AccordionGroup*

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

Korresponderende innstillinger i sidens JSON-fil.

NB! For å unngå feilemlding må egenskapen children legges til i koden. Se Legg til underelementer

App/ui/layouts/{page}.json

{
  "data": {
    "layout": [
      {
        "id": "accordion-group",
        "type": "AccordionGroup"
      }
    ]
  }
}

Legg til underelementer

Spesifiser hvilke komponenter av typen Trekkspilliste du vil gruppere ved å legge til deres ID-er til Nestet treksspilliste-komponenten sin children-egenskap som vist under. Trekkspilliste-komponentene som skal grupperes må legges til den samme siden. Rekkefølgen i gruppen bestemmes av rekkefølgen på komponent-ID’ene i children.

App/ui/layouts/{page}.json

...
{
  "data": {
    "layout": [
      {
        "id": "accordion-group",
        "type": "AccordionGroup",
        "children": [
          "accordion1",
          "accordion2"
        ]
      },
      ...
    ]
  }
}
...

Eksempel

App/ui/layouts/{page}.json

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  "data": {
    "layout": [
      {
        "id": "accordion-group",
        "type": "AccordionGroup",
        "children": [
          "accordion1",
          "accordion2"
        ]
      },
      {
        "id": "accordion1",
        "type": "Accordion",
        "textResourceBindings": {
          "title": "Lorem ipsum"
        },
        "children": [
          "paragraph1",
          "ok-button"
        ]
      },
      {
        "id": "accordion2",
        "type": "Accordion",
        "textResourceBindings": {
          "title": "To avsnitt"
        },
        "headingLevel": 2,
        "children": [
          "paragraph2",
          "paragraph3"
        ]
      },
      {
        "id": "paragraph1",
        "type": "Paragraph",
        "textResourceBindings": {
          "title": "text.loremIpsum"
        },
        "dataModelBindings": {}
      },
      {
        "id": "paragraph2",
        "type": "Paragraph",
        "textResourceBindings": {
          "title": "Dette er et avsnitt."
        },
        "dataModelBindings": {}
      },
      {
        "id": "paragraph3",
        "type": "Paragraph",
        "textResourceBindings": {
          "title": "Dette er et annet avsnitt."
        },
        "dataModelBindings": {}
      },
      {
        "id": "ok-button",
        "type": "Button",
        "dataModelBindings": {},
        "textResourceBindings": {
          "title": "OK"
        }
      }
    ]
  }
}

AccordionGroup eksempel lukket — *Nestet trekkspilliste eksempel lukket*

AccordionGroup eksempel åpen — *Nestet trekkspilliste eksempel åpen*