Introduction to the use of UI components

The return value of the build lifecycle is of type RenderFunc as mentioned above in the registration setup application.

UI components exist as functions whose types can be represented as follows, with some UI components supporting renderFuncArr subcomponents.

(props: Props, renderFuncArr?: RenderFunc | Array<RenderFunc>) => result: RenderFunc

Please refer to UI Componentsfor details of usage.

Some of these components support passing in the style attribute, and support CSS related properties with names like camelCase.

Code example

AppSettingsPage({
  build(props) {
    return Button({
      label: 'Delete',
      style: {
        fontSize: '12px',
        borderRadius: '30px',
        background: '#D85E33',
        color: 'white'
      },
      onClick: () => {
        // ...
      }
    })
  }
})

AppSettingsPage({
  build(props) {
    return Section({}, [
      Section(
        {},
        TextInput({
          label: 'Name',
        })
      ),
      Section(
        {},
        Button({
          label: 'Start',
          onClick() {
            // ...
          }
        })
      )
    ])
  }
})