Hopp til innhold

Expand­Button

Lar oss presentere innhold av lavere prioritet, på liten plass.

EksemplerBrukTekstDesignKode

Kom i gang

Installer
npm i @fremtind/jkl-expand-button-react
Bruk
import { ExpandButton } from "@fremtind/jkl-expand-button-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-expand-button/expand-button.min.css";



// Ekspanderknappen bruker icons-pakka for å animere pila

import "@fremtind/jkl-icons/icons.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-expand-button/expand-button";

@use "@fremtind/jkl-icons/icons";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

ExpandButton
Visning
Tema
Tetthet
const [isExpanded, setIsExpanded] = React.useState(false);



return (

  <ExpandSection

    title={isExpanded ? "Skjul seksjonen igjen" : "Vis den skjulte seksjonen"}

    onClick={(e, expanded) => {

      setIsExpanded(expanded);

    }}

  >

    <p className="jkl-heading-4 jkl-spacing-xl--bottom">Skjult seksjon</p>

    <p className="jkl-spacing-l--bottom">

      Her kommer det masse informasjon som er relevant, men ikke så relevant at

      vi alltid vil vise det.

    </p>

    <p className="jkl-spacing-l--bottom">

      Vi kunne kanskje brukt en Accordion, men vi har ikke <em>flere</em> ting

      vi vil strukturere på denne måten. Det ser litt rart ut med ett

      AccordionItem, så da bruker vi heller en ExpandButton

    </p>

  </ExpandSection>

);

Andre fontstørrelser

ExpandButton arver størrelsen sin fra omgivelsene. Om du ønsker kan du sette en annen fontstørrelse, enten med en egen klasse, eller med en av utility-klassene i Jøkul.

<ExpandButton

  aria-controls={expandedContentId}

  id={expandButtonId}

  className="jkl-heading-1"

  expandDirection="down"

  isExpanded={isExpanded}

  onClick={onClick}

>

  {isExpanded ? "Skjul seksjonen igjen" : "Vis den skjulte seksjonen"}

</ExpandButton>;

Separat knapp og innhold

Noen ganger ønsker man å vise annet innhold mellom knappen og innholdet den skjuler og viser. Eksempelet under viser hvordan du kan løse dette.

const [isExpanded, setIsExpanded] = useState(false);

const [elementRef] = useAnimatedHeight < HTMLDivElement > isExpanded;

const expandButtonId = "jkl-example-expand-button";

const expandedContentId = "jkl-example-expand-content";



const onClick = () => {

  setIsExpanded(!isExpanded);

};



return (

  <div>

    <p className="jkl-spacing-l--bottom">

      Noen ganger trenger vi å gi brukerne som ønsker det litt mer informasjon.

    </p>



    <ExpandButton

      aria-controls={expandedContentId}

      id={expandButtonId}

      className="jkl-spacing-l--bottom"

      expandDirection={expandDirection}

      isExpanded={isExpanded}

      onClick={onClick}

    >

      {isExpanded ? "Skjul seksjonen igjen" : "Vis den skjulte seksjonen"}

    </ExpandButton>



    <p className="jkl-spacing-l--bottom">

      Jeg er ikke styrt av ExpandButton. Jeg illustrerer muligheten for å

      kontrollere deler av siden som ikke er direkte under ExpandButton.

    </p>



    <div

      ref={elementRef}

      aria-labelledby={expandButtonId}

      id={expandedContentId}

      role="group"

      hidden={!isExpanded}

      className="jkl-expand-section__content-wrapper"

    >

      <div className="jkl-expand-section__content">

        <p className="jkl-heading-4 jkl-spacing-xl--bottom">Skjult seksjon</p>

        <p className="jkl-spacing-l--bottom">

          For at dette skal fungere på en god måte må man huske på{" "}

          <code>aria-controls</code>. Denne komponenten kan være nyttig i for

          eksempel ekspanderbare tabellrader.

        </p>

      </div>

    </div>

  </div>

);

React API

Her finner du en oversikt over props på komponentene i pakken.