CollapseBox
CollapseBox is a component with children elements that you can expand and collapse.
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 |
Expanded
Collapsed
TypeScript
React
import { whisper } from "@oliveai/ldk"
import {
NewWhisper,
OpenDirection,
Size,
UpdateWhisper,
Whisper,
WhisperComponentType
} from "@oliveai/ldk/dist/whisper"
const collapseBoxExampleConfig = ((collapseBoxLabel: string, isOpen: boolean): NewWhisper | UpdateWhisper => {
return {
label: "Collapse Box Example",
components: [
{
type: WhisperComponentType.CollapseBox,
label: collapseBoxLabel,
open: isOpen,
previewHeight: Size.Small,
openDirection: OpenDirection.Bottom,
onClick: async (error: Error, params: boolean, whisper: Whisper) => {
if ( error ) {
console.debug(error);
}
console.log(`CollapseBox params: ${params}`);
if (params) {
whisper.update(collapseBoxExampleConfig("Hide Collapse Box Content", params) as UpdateWhisper);
} else {
whisper.update(collapseBoxExampleConfig("Show Collapse Box Content", params) as UpdateWhisper);
}
},
children: [
{
type: WhisperComponentType.Markdown,
body: "Collapse Box Contents 1"
},
{
type: WhisperComponentType.Markdown,
body: "Collapse Box Contents 2"
},
{
type: WhisperComponentType.Markdown,
body: "Collapse Box Contents 3"
},
{
type: WhisperComponentType.Markdown,
body: "Collapse Box Contents 4"
},
{
type: WhisperComponentType.Markdown,
body: "Collapse Box Contents 5"
},
],
},
]
}
});
const collapseBoxExample = (async () => {
await whisper.create(collapseBoxExampleConfig("Hide Collapse Box Content", true) as NewWhisper);
})
collapseBoxExample();
import { React, ReactWhisper } from "@oliveai/ldk"
import { Size, OpenDirection } from "@oliveai/ldk/dist/whisper"
const CollapseBoxExample: React.FunctionComponent<Object> = (props) => {
const [ collapseBoxLabel, setCollapseBoxLabel ] = React.useState('Hide Collapse Box Content');
const [ isOpen, setIsOpen ] = React.useState(true);
return (
<oh-whisper label='Collapse Box Example' onClose={ () => {}}>
<oh-collapse-box
label={collapseBoxLabel}
open={isOpen}
previewHeight={Size.Small}
openDirection={OpenDirection.Bottom}
onClick={(error, params) => {
if (params){
setCollapseBoxLabel('Hide Collapse Box Content')
} else {
setCollapseBoxLabel('Show Collapse Box Content')
}
setIsOpen(params)
}}
children={
<>
<oh-markdown
body="Collapse Box 1"
/>
<oh-markdown
body="Collapse Box 2"
/>
<oh-markdown
body="Collapse Box 3"
/>
<oh-markdown
body="Collapse Box 4"
/>
<oh-markdown
body="Collapse Box 5"
/>
</>
}
/>
</oh-whisper>
)
}
ReactWhisper.renderNewWhisper(<CollapseBoxExample />);
Last modified 1yr ago