Sist endret: 28. mai 2024

Accordion

En komponent som lar deg gruppere innhold i sammenleggbare seksjoner

🚧 Denne dokumentasjonen er under oppdatering.

Bruk

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

Anatomi

Accordion lukket anatomi
Lukket Accordion

Accordion åpen anatomi
Åpen Accordion

  1. Overskrift: Den klikkbare seksjonstittelen som brukere samhandler med for å utvide eller lukke innholdet.
  2. Innholdsområde: Området som utvider eller kollapser, som viser eller skjuler ytterligere informasjon når overskriften klikkes.

Relatert

Egenskaper

EgenskapTypeBeskrivelse
childrenarrayEn array med ID’en til komponenter som tilhører gruppen. Enum: "Paragraph" | "Button"
textResourceBindings.titlestringKlikkbar seksjonstittel

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! Accordions egenskap childrenlegges til manuelt for å unngå feilmelding.

    Accordion innstillinger i Altinn Studio
    Innstillinger for Accordion i Altinn Studio

    • 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

    Overskriften for Accordion kan legges til som en tekst direkte eller refereres via 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

    Accordion med et avsnitt og en knapp som underelementer.

      App/ui/layouts/{page}.json
      ...
      
      {
        "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"
              }
            }
          ]
        }
      }
      

      Accordion eksempel
      Accordion med avsnitt og knapp

      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.

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