OrderableItemIconPosition

Enum defining the position of the drag handle icon in orderable UI elements.

enum OrderableItemIconPosition

Description

OrderableItemIconPosition specifies where the drag handle icon should be positioned within orderable list items. This affects both the visual appearance and user interaction patterns when reordering items.

Import

import { OrderableItemIconPosition } from '@stripoinc/ui-editor-extensions';

Values

TOP

Position the drag handle icon at the top of the item.

TOP = 'TOP'

---

LEFT

Position the drag handle icon on the left side of the item.

LEFT = 'LEFT'

Usage Examples

Using TOP Position (Default)

import { UIElementType, UEAttr } from '@stripoinc/ui-editor-extensions';

class MyControl extends Control {
    getTemplate() {
        return `
            <div class="container">
                <${UIElementType.ORDERABLE} name="myList">
                    <${UIElementType.ORDERABLE_ITEM}>
                        <${UIElementType.LABEL} ${UEAttr.LABEL.text}="Item 1"></${UIElementType.LABEL}>
                    </${UIElementType.ORDERABLE_ITEM}>
                </${UIElementType.ORDERABLE}>
            </div>`;
    }
}

Using LEFT Position

import { UIElementType, UEAttr } from '@stripoinc/ui-editor-extensions';

class MyControl extends Control {
    getTemplate() {
        return `
            <div class="container">
                <${UIElementType.ORDERABLE} name="myList" position="LEFT">
                    <${UIElementType.ORDERABLE_ITEM}>
                        <${UIElementType.LABEL} ${UEAttr.LABEL.text}="Item 1"></${UIElementType.LABEL}>
                    </${UIElementType.ORDERABLE_ITEM}>
                </${UIElementType.ORDERABLE}>
            </div>`;
    }
}