Function bubble

Creates a bubble component that can display various types of content.

Param: optionsOrContent

Either the content to display or the options object. When an object, it can have the following properties:

Param: options

Configuration object

Param: options.width

Width of the bubble (e.g., '200px', 300)

Param: options.className

CSS class name for custom styling

Param: options.forcePosition

Fixed position of the bubble it can be one of the values: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

Param: options.isDraggable

Enable/disable drag functionality

Param: options.style

{React.CSSProperties} - Inline styles object

Param: options.image

URL of the image to display

Param: options.icon

Icon element to display that can be a string or a React node

Param: options.title

Header title text

Param: options.description

Header description text

Param: content

The content to display (only used when options are provided or when no options are provided)

Returns

A JSX element representing the bubble component

Remarks

  • The optionsOrContent is either the content to display or the options object.
  • The content is the content to display when the optionsOrContent is an object.
  • The bubble function can be used to display a bubble with a headerBar and group.

Example

Basic usage with just content

bubble('Hello World');

Example

Usage with options and other component blocks

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

Example

Usage with other component blocks

bubble([
  headerBar({title: 'Modular UI form'}),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Mark',
    }),
  ]),
]);

Settings