Layout

Collapsible

A collapsible allows users to hide or display a section of content.
Q: Why can't you trust an atom?
1
import {CollapsibleConnected} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<CollapsibleConnected
5
id="collapsible-example-1"
6
headerContent={<h6 className="p2">Q: Why can't you trust an atom?</h6>}
7
>
8
<div className="p2">A: Because they make up everything</div>
9
</CollapsibleConnected>
10
);
11
export default Demo;

Props

NameTypeDefaultDescription
idrequiredstring
Unique identifier for the Collapsible
actionsIActionOptions[]
addedSelectedOptionIDropdownOption
attributeToFormatstring
attributeToSortstring
calendarIdstring
childrenReactNode
classNamestring
Additionnal CSS classes for the outer most container of the Collapsible
collapsibleToggleIconReactNode
Set to render a custom toggle icon
colorstring
currentOptionnumber
dateDate
disabledbooleanfalse
Whether the collapsible is disabled
disabledValuesstring[]
expandedboolean
expandedOnMountbooleanfalse
Whether the collapsible is expanded on mount
facetstring
facetRowIFacet
filterTextstring
headerClassesstring
Additionnal CSS classes for the header
headerContentReactNode
Custom JSX inside the header
idsstring[]
initialPerPagenumber
initialTableDataITableData
isCollapsibleboolean
isDirtyboolean
isInErrorboolean
isOpenboolean
isRangeboolean
isSelectedboolean
itemstring
labelstring
limitstring
onClick() => void
Callback called when container is clicked
optionsIInlinePromptOptions
pageNbnumber
perPagenumber
predicatesITablePredicate[]
searchingboolean
selectedstring
shouldResetPageboolean
tableIdstring
tableStateModifierITableStateModifier
toggleIconClassNamestring
Additionnal CSS classes for the toggle icon
totalEntriesnumber
totalPagesnumber
validboolean
valuestring
withBordersbooleanfalse
Whether the collapsible has borders
yPositionnumber

Examples

Info box wrapper
Lean more about collapsible info boxes.
1
import {CollapsibleInfoBox} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<CollapsibleInfoBox id="collapsible-info-box-example-1" title="Lean more about collapsible info boxes.">
5
By default, this component will render with an info icon
6
</CollapsibleInfoBox>
7
);
8
export default Demo;
Expanded on mount
I am expanded on mount!
1
import {CollapsibleContainerConnected} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<CollapsibleContainerConnected
5
id="collapsible-container-example-1"
6
title="Collapsible Container expanded on mount"
7
informationUrl="https://www.coveo.com/en"
8
informationTooltip={{
9
title: "I display information and if you click me you'll be led to a URL that was provided to me.",
10
}}
11
expandedOnMount
12
>
13
I am expanded on mount!
14
</CollapsibleContainerConnected>
15
);
16
export default Demo;
Disabled
1
import {CollapsibleContainerConnected} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<CollapsibleContainerConnected
5
id="collapsible-container-example-3"
6
title="Collapsible Container disabled"
7
informationUrl="https://www.coveo.com/en"
8
informationTooltip={{
9
title: "I display information and if you click me you'll be led to a URL that was provided to me.",
10
}}
11
disabled
12
>
13
something!
14
</CollapsibleContainerConnected>
15
);
16
export default Demo;

No guidelines exist for CollapsibleConnected yet.

Create guidelines