- Začněte s čistým projektem vytvořeným pomocí
npm init kodim-app@latest nazev-projektu. - Vytvořte komponentu CollapseBox, která bude mít prop
title, ve kterém bude titulek komponenty. Jakýkoliv obsah komponenty se zobrazí uvnitř boxu. - Komponenta by měla jít použít následujícím způsobem:
<CollapseBox title="Podrobnosti"> <h2>Lorem ipsum dolor sit amet</h2> <p>Consectetuer adipiscing elit. Fusce nibh. In laoreet, magna id viverra tincidunt.</p> </CollapseBox> - Box bud standardně zavřený a bude se zobrazovat pouze záhlaví s titulkem a šipkou ukazující doprava. Kliknutím na záhlaví se šipka změní na šipku ukazující dolů a v boxu se zobrazí obsah. Opětovným kliknutím na záhlaví se box zase zavře.
- Jako šipku lze použít např. symbol › tvořený HTML entitou
›.
Ukázka výsledku