CollapseBox
CollapseBox is a component with children elements that you can expand and collapse.

Props:

Properties
Description
Required?
Default
children
Array of ChildComponents
  • ​
undefined
label
String
  • ​
undefined (but will display More/Less)
open
Boolean
  • ​
undefined
openDirection
OpenDirection.Top:
Collapse/expand button is on the top and content is on the bottom
OpenDirection.Bottom: Collapse/expand button is on the bottom and content is on the top
  • ​
undefined
onClick
Callback function that executes when the component is clicked
  • ​
undefined
previewHeight
Size.None, Size.Small, Size.Medium, Size.Large, Size.ExtraLarge
  • ​
undefined

Examples

Expanded
Collapsed
TypeScript
React
1
import { whisper } from "@oliveai/ldk"
2
import {
3
NewWhisper,
4
OpenDirection,
5
Size,
6
UpdateWhisper,
7
Whisper,
8
WhisperComponentType
9
} from "@oliveai/ldk/dist/whisper"
10
​
11
const collapseBoxExampleConfig = ((collapseBoxLabel: string, isOpen: boolean): NewWhisper | UpdateWhisper => {
12
return {
13
label: "Collapse Box Example",
14
components: [
15
{
16
type: WhisperComponentType.CollapseBox,
17
label: collapseBoxLabel,
18
open: isOpen,
19
previewHeight: Size.Small,
20
openDirection: OpenDirection.Bottom,
21
onClick: async (error: Error, params: boolean, whisper: Whisper) => {
22
if ( error ) {
23
console.debug(error);
24
}
25
console.log(`CollapseBox params: ${params}`);
26
if (params) {
27
whisper.update(collapseBoxExampleConfig("Hide Collapse Box Content", params) as UpdateWhisper);
28
} else {
29
whisper.update(collapseBoxExampleConfig("Show Collapse Box Content", params) as UpdateWhisper);
30
}
31
},
32
children: [
33
{
34
type: WhisperComponentType.Markdown,
35
body: "Collapse Box Contents 1"
36
},
37
{
38
type: WhisperComponentType.Markdown,
39
body: "Collapse Box Contents 2"
40
},
41
{
42
type: WhisperComponentType.Markdown,
43
body: "Collapse Box Contents 3"
44
},
45
{
46
type: WhisperComponentType.Markdown,
47
body: "Collapse Box Contents 4"
48
},
49
{
50
type: WhisperComponentType.Markdown,
51
body: "Collapse Box Contents 5"
52
},
53
],
54
},
55
]
56
}
57
});
58
​
59
const collapseBoxExample = (async () => {
60
await whisper.create(collapseBoxExampleConfig("Hide Collapse Box Content", true) as NewWhisper);
61
})
62
​
63
collapseBoxExample();
64
​
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk"
2
import { Size, OpenDirection } from "@oliveai/ldk/dist/whisper"
3
​
4
const CollapseBoxExample: React.FunctionComponent<Object> = (props) => {
5
const [ collapseBoxLabel, setCollapseBoxLabel ] = React.useState('Hide Collapse Box Content');
6
const [ isOpen, setIsOpen ] = React.useState(true);
7
​
8
return (
9
<oh-whisper label='Collapse Box Example' onClose={ () => {}}>
10
<oh-collapse-box
11
label={collapseBoxLabel}
12
open={isOpen}
13
previewHeight={Size.Small}
14
openDirection={OpenDirection.Bottom}
15
onClick={(error, params) => {
16
if (params){
17
setCollapseBoxLabel('Hide Collapse Box Content')
18
} else {
19
setCollapseBoxLabel('Show Collapse Box Content')
20
}
21
setIsOpen(params)
22
}}
23
children={
24
<>
25
<oh-markdown
26
body="Collapse Box 1"
27
/>
28
<oh-markdown
29
body="Collapse Box 2"
30
/>
31
<oh-markdown
32
body="Collapse Box 3"
33
/>
34
<oh-markdown
35
body="Collapse Box 4"
36
/>
37
<oh-markdown
38
body="Collapse Box 5"
39
/>
40
</>
41
}
42
/>
43
</oh-whisper>
44
)
45
}
46
​
47
ReactWhisper.renderNewWhisper(<CollapseBoxExample />);
48
​
Copied!
Copy link