Function: bubble()

Call Signature

function bubble(content: BubbleContent): ContainerElement;

Defined in: src/UI/blocks/bubble.tsx:61

Bubble component for displaying various types of content.

Parameters

Parameter	Type	Description
content	BubbleContent	Content to display when first parameter is options object

Returns

ContainerElement

Examples

With options object using overlay

bubble({overlay: true}, [
  headerBar({title: 'Header title'}),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Mark',
    }),
  ]),
]);

Basic usage

bubble([
  headerBar({title: 'Modular UI form'}),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Mark',
    }),
  ]),
  navigationBar({
    buttons: [
      {text: 'Cancel', value: 'cancel'},
      {text: 'Submit', value: 'submit'}
    ]
  }),
]);

Remarks

The bubble function can be used to display a bubble with a headerBar and group. When using options, available properties include width, className, forcePosition, isDraggable, style, image, icon, title, and description.

Call Signature

function bubble(options: BubbleOptions, content: BubbleContent): ContainerElement;

Defined in: src/UI/blocks/bubble.tsx:62

Bubble component for displaying various types of content.

Parameters

Parameter	Type	Description
options	BubbleOptions	-
content	BubbleContent	Content to display when first parameter is options object

Returns

ContainerElement

Examples

With options object using overlay

bubble({overlay: true}, [
  headerBar({title: 'Header title'}),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Mark',
    }),
  ]),
]);

Basic usage

bubble([
  headerBar({title: 'Modular UI form'}),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Mark',
    }),
  ]),
  navigationBar({
    buttons: [
      {text: 'Cancel', value: 'cancel'},
      {text: 'Submit', value: 'submit'}
    ]
  }),
]);

Remarks

The bubble function can be used to display a bubble with a headerBar and group. When using options, available properties include width, className, forcePosition, isDraggable, style, image, icon, title, and description.