Appearance
Function: vertical()
Call Signature
ts
function vertical(content: VerticalContent): Element;Defined in: src/UI/blocks/vertical.tsx:63
Vertical layout component arranging content in a column.
Parameters
| Parameter | Type | Description |
|---|---|---|
content | VerticalContent | Content to display when first parameter is options object |
Returns
Element
Examples
Usage with options and content
vertical(
{
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
vertical([
inputField({
name: 'firstName',
label: 'First name',
defaultValue: 'Jane',
}),
inputField({
name: 'lastName',
label: 'Last name',
defaultValue: 'Doe',
}),
]);Call Signature
ts
function vertical(options: VerticalOptions, content: VerticalContent): Element;Defined in: src/UI/blocks/vertical.tsx:64
Vertical layout component arranging content in a column.
Parameters
| Parameter | Type | Description |
|---|---|---|
options | VerticalOptions | - |
content | VerticalContent | Content to display when first parameter is options object |
Returns
Element
Examples
Usage with options and content
vertical(
{
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
vertical([
inputField({
name: 'firstName',
label: 'First name',
defaultValue: 'Jane',
}),
inputField({
name: 'lastName',
label: 'Last name',
defaultValue: 'Doe',
}),
]);