Function: modal()

Call Signature

function modal(content: ModalContent): ContainerElement;

Defined in: src/UI/blocks/modal.tsx:59

Parameters

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

Returns

ContainerElement

Deprecated

Use the equivalent block from @matterway/sdk/UI instead. This block targets the old showUI path and will be removed when src/UI/ is dropped.

Modal component serving as the main container for UI elements. Typically used as root container with showUI.

Examples

Basic usage with headerBar and group

modal([
  headerBar({
    title: 'Welcome to the Matterway SDK',
    description: 'This is a sample welcome message.',
  }),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Jane',
    }),
  ]),
]);

With options object using overlay

modal(
  {overlay: true},
  [
    headerBar({
      title: 'Welcome to the Matterway SDK',
      description: 'This is a sample welcome message.',
    }),
    group([
      inputField({
        name: 'email',
        label: 'Email',
        type: 'email',
      }),
    ]),
  ]
);

Call Signature

function modal(options: ModalOptions, content: ModalContent): ContainerElement;

Defined in: src/UI/blocks/modal.tsx:60

Parameters

Parameter	Type	Description
options	ModalOptions	-
content	ModalContent	Content to display when first parameter is options object

Returns

ContainerElement

Deprecated

Use the equivalent block from @matterway/sdk/UI instead. This block targets the old showUI path and will be removed when src/UI/ is dropped.

Modal component serving as the main container for UI elements. Typically used as root container with showUI.

Examples

Basic usage with headerBar and group

modal([
  headerBar({
    title: 'Welcome to the Matterway SDK',
    description: 'This is a sample welcome message.',
  }),
  group([
    inputField({
      name: 'firstName',
      label: 'First name',
      defaultValue: 'Jane',
    }),
  ]),
]);

With options object using overlay

modal(
  {overlay: true},
  [
    headerBar({
      title: 'Welcome to the Matterway SDK',
      description: 'This is a sample welcome message.',
    }),
    group([
      inputField({
        name: 'email',
        label: 'Email',
        type: 'email',
      }),
    ]),
  ]
);