Appearance
UIElementType
Enum defining all available UI element types in the editor.
typescript
enum UIElementTypeDescription
UIElementType enumerates all the standard UI elements available in the Stripo Email Editor. These elements are the building blocks for creating controls and user interfaces within extensions. Each element type has specific attributes and behaviors that make them suitable for different interaction patterns.
Import
typescript
import { UIElementType } from '@stripoinc/ui-editor-extensions';Input Elements
BUTTON
Clickable button element.
typescript
BUTTON = 'UE-BUTTON'Attributes: caption, icon, disabled, name
Use Cases: Actions, triggers, confirmations
CHECKBOX
Single checkbox input.
typescript
CHECKBOX = 'UE-CHECKBOX'Attributes: caption, disabled, name
Use Cases: Boolean options, feature toggles
CHECK_BUTTONS
Group of checkbox buttons.
typescript
CHECK_BUTTONS = 'UE-CHECK-BUTTONS'Attributes: buttons, disabled, name
Use Cases: Multiple selection from options
RADIO_BUTTONS
Group of radio buttons.
typescript
RADIO_BUTTONS = 'UE-RADIO-BUTTONS'Attributes: buttons, disabled, name
Use Cases: Single selection from options
SWITCHER
Toggle switch element.
typescript
SWITCHER = 'UE-SWITCHER'Attributes: disabled, name
Use Cases: On/off states, feature enablement
Text Input Elements
TEXT
Single-line text input.
typescript
TEXT = 'UE-TEXT'Attributes: placeholder, disabled, name
Use Cases: Short text, names, titles
TEXTAREA
Multi-line text input.
typescript
TEXTAREA = 'UE-TEXTAREA'Attributes: placeholder, resizable, disabled, name
Use Cases: Long text, descriptions, content
Selection Elements
SELECTPICKER
Dropdown select element.
typescript
SELECTPICKER = 'UE-SELECT'Attributes: searchable, multiSelect, placeholder, items, disabled, name
Use Cases: Choosing from many options
FONT_FAMILY_SELECT
Specialized font family selector.
typescript
FONT_FAMILY_SELECT = 'UE-FONT-FAMILY-SELECT'Attributes: All select attributes plus addCustomFontOption
Use Cases: Font selection with custom font support
Specialized Input Elements
COLOR
Color picker element.
typescript
COLOR = 'UE-COLOR'Attributes: disabled, name
Use Cases: Color selection
COUNTER
Numeric counter input.
typescript
COUNTER = 'UE-COUNTER'Attributes: minValue, maxValue, step, disabled, name
Use Cases: Numeric values, quantities
DATEPICKER
Date selection element.
typescript
DATEPICKER = 'UE-DATEPICKER'Attributes: placeholder, minDate, disabled, name
Use Cases: Date selection, scheduling
MERGETAGS
Merge tag selector.
typescript
MERGETAGS = 'UE-MERGETAGS'Attributes: disabled, name
Use Cases: Dynamic content insertion
Display Elements
LABEL
Text label element.
typescript
LABEL = 'UE-LABEL'Attributes: text, hint, name
Use Cases: Field labels, descriptions
MESSAGE
Message display element.
typescript
MESSAGE = 'UE-MESSAGE'Attributes: type, disabled, name
Use Cases: Info, warning, error messages
ICON
Icon display element.
typescript
ICON = 'UE-ICON'Attributes: img, src, title, width, height, hint, disabled, visibility
Use Cases: Visual indicators, buttons with icons
Component Elements
CHECK_ITEM
Individual checkbox item.
typescript
CHECK_ITEM = 'UE-CHECK-ITEM'Attributes: text, hint, icon, value, disabled, name
Use Cases: Item in checkbox group
RADIO_ITEM
Individual radio button item.
typescript
RADIO_ITEM = 'UE-RADIO-ITEM'Attributes: text, hint, icon, value, disabled, name
Use Cases: Item in radio group
SELECT_ITEM
Individual select option.
typescript
SELECT_ITEM = 'UE-SELECT-ITEM'Attributes: text, value, disabled, name
Use Cases: Option in select dropdown