Käyttötarkoitus
Käytä useCollapseV2-hookkia, kun haluat piilottaa ja näyttää sisältöä haitarielementin tapaan räätälöidyissä toiminnoissa.
Accordion-komponentti toteuttaa valmiin ulkoasun ja vastaavat
toiminnot, joten ensisijaisesti kannattaa hyödyntää sitä.
Hook huolehtii seuraavista toiminnoista:
- Saavutettavan toteutuksen ARIA-attribuuttien lisäyksestä.
- Elementin animointi avautuessa ja sulkeutuessa.
- Avattavan elementin tilan hallinta.
Esimerkki
function ExampleUseCollapseV2() {
const ref = useRef<HTMLElement>(null);
const { isOpen, toggle, getToggleProps, getCollapsibleProps } = useCollapseV2(ref, {
id: "my-collapse",
});
return (
<>
<h3 className="kds-leading-reset kds-font-normal kds-font-body kds-my-0">
<Button
appearance="link"
{...getToggleProps<ButtonProps<"button">>({
iconAfter: isOpen ? <IconUiCaretUp /> : <IconUiCaretDown />,
onClick() {
toggle(!isOpen);
},
})}
>
{isOpen ? "Piilota sisältö" : "Näytä sisältö"}
</Button>
</h3>
<section
{...getCollapsibleProps<ComponentPropsWithRef<"section">>({
className: "kds-mt-4",
})}
>
<Text>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu.
</Text>
<List>
<ListItem>Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit.</ListItem>
<ListItem>Sed augue orci, lacinia eu tincidunt et eleifend nec lacus.</ListItem>
<ListItem>Donec ultricies nisl ut felis, suspendisse potenti.</ListItem>
</List>
</section>
</>
);
}