Collapse

Variable number of components can be wrapped into collapse, which has two states: collapsed - showing only first few of the set of components inside, and expanded - showing all of them

Install

import {Collapse} from '@xsolla/uikit';

Examples

Basic
Project name | English
Project name | Russian
Project name | French
Show elemnts inline
Portal™ is a new single player game from Valve. Set in the mysterious Aperture Science Laboratories, Portal has been called one of the most innovative new games on the horizon and will offer gamers ho
urs of unique gameplay. The game is designed to change the way players approach, manipulate, and surmise the possibilities in a given environment; similar to how Half-Life® 2's Gravity Gun innovated new ways to leverage an object in any given situation. Players must solve physical puzzles and challenges by opening portals to maneuvering objects, and themselves, through space.

Usage

<Collapse
  isOpened={true}
  collapsedLabel={count => `${count} more languages`}
  expandedLabel={() => 'Hide localizations'}>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, pariatur?
</Collapse>

API

PropertyDescriptionTypeDefault
childrenElements wrapped into collapseany
isOpenedInitial stateboolfalse
disabledIs collapse disabledboolfalse
staticElementsHow many of the first children won't be collapsednumber1
btnIconPositionPosition of collapse-icon relative to collapsedLabel or expandedLabel. Can be set to start or endstringstart
collapsedLabelCollapsed button label - function with number of collapsable elements as a parameterfunccount => '${count} more'
expandedLabelExpanded button label - function with number of collapsable elements as a parameterfunccount => 'Collapse'
showElementsInlineEnables the inline mode of the component (the animation will not work)boolfalse
springConfigCustom config {stiffness, damping, precision} passed to the spring function (see https://github.com/nkbt/react-collapse#springconfig-proptypesobjectofproptypesnumber)| any{stiffness: 160, damping: 20, precision: 100}
buttonDataIdattribute for data identifierstring