Function: horizontal()

Call Signature

function horizontal(content: HorizontalContent): Element;

Defined in: src/UI/blocks/horizontal.tsx:63

Horizontal layout component arranging content in a row.

Parameters

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

Returns

Element

Examples

Usage with options and content

horizontal(
  {
    gap: 8,
    align: 'center',
    justify: 'space-between',
    padding: 16,
  },
  [
    inputField({
      name: 'email',
      label: 'Email',
      type: 'email',
    }),
    inputField({
      name: 'phone',
      label: 'Phone',
      type: 'tel',
    }),
  ]
);

Basic usage with content

horizontal([
  inputField({
    name: 'firstName',
    label: 'First name',
    defaultValue: 'Jane',
  }),
  inputField({
    name: 'lastName',
    label: 'Last name',
    defaultValue: 'Doe',
  }),
]);

Call Signature

function horizontal(options: HorizontalOptions, content: HorizontalContent): Element;

Defined in: src/UI/blocks/horizontal.tsx:64

Horizontal layout component arranging content in a row.

Parameters

Parameter	Type	Description
options	HorizontalOptions	-
content	HorizontalContent	Content to display when first parameter is options object

Returns

Element

Examples

Usage with options and content

horizontal(
  {
    gap: 8,
    align: 'center',
    justify: 'space-between',
    padding: 16,
  },
  [
    inputField({
      name: 'email',
      label: 'Email',
      type: 'email',
    }),
    inputField({
      name: 'phone',
      label: 'Phone',
      type: 'tel',
    }),
  ]
);

Basic usage with content

horizontal([
  inputField({
    name: 'firstName',
    label: 'First name',
    defaultValue: 'Jane',
  }),
  inputField({
    name: 'lastName',
    label: 'Last name',
    defaultValue: 'Doe',
  }),
]);