Display.section

AWS CDK

Source

Displays a collapsible section with a label and body content.

Display.section(props)

Usage

lib/MyStack.ts

import { ButtonizeApp, Display } from 'buttonize/cdk'

new ButtonizeApp(this, 'DemoApp')
  .page('DemoPage', {
    body: [
      Display.section({
        label: 'Title',
        body: [
          Display.heading('Hello, world!')
        ],
        collapsed: true
      })
    ]
  })

Preview

app.buttonize.io

Props

label

Required

string

The label/title of the section.

body

Required

IComponent[]

An array of Buttonize components which will be shown inside the section. section.

collapsed

Optional

boolean

Initial collapsed state of the section. Default is false.

spacingTop

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give above the component.

spacingBottom

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give below the component.

width

Optional

1 | 2 | 3 | 4

The width of the component.