Ekspanderbartpanel

Normal

<Ekspanderbartpanel tittel="Klikk her for å åpne/lukke panelet">
  Panelet vil da ekspandere og vise innholdet.
</Ekspanderbartpanel>
 Kopiert! 

Endre tekststørrelse

For å endre tekst-størrelsen på åpne/lukke-knappen kan man sende inn en annen typografi-type via tittel-propen.

<Ekspanderbartpanel
  tittel={<Normaltekst>Klikk her for å åpne/lukke panelet</Normaltekst>}
>
  Panelet vil da ekspandere og vise innholdet.
</Ekspanderbartpanel>
 Kopiert! 

Avansert innhold i åpne/lukke-knapp

Komponentens tittel-prop støtter rikt HTML-innhold.

<Ekspanderbartpanel
  tittel={
    <div>
      <Undertittel>Klikk her for å åpne/lukke panelet</Undertittel>
      <Etikett type="suksess">En etikett</Etikett>
      <Etikett type="fokus" style={{ marginLeft: "0.5rem" }}>
        En annen etikett
      </Etikett>
    </div>
  }
>
  Panelet vil da ekspandere og vise innholdet.
</Ekspanderbartpanel>
 Kopiert! 

Kontroller komponenten selv

Styr komponent fra ekstern state (controlled components).

<Knapp onClick={() => this.open()}>Åpne</Knapp>
<Knapp onClick={() => this.close()}>Lukke</Knapp>
<EkspanderbartpanelBase
    tittel="Kan også klikke her"
    apen={this.state.apen}
    onClick={() => this.toggle()}
>
    Alt innholdet ditt
</EkspanderbartpanelBase>
 Kopiert!