CollapseBox

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!

Whisper Components - Previous

Chart

Next - Whisper Components

Grid

Last modified 1mo ago

Copy link

Contents

Props:

Examples