Компонент `input`

Назначение компонента

Компонент input предназначен для создания различных типов полей ввода, таких как текстовые поля, поля для ввода email, а также текстовые области (textarea). Компонент поддерживает различные состояния (например, ошибка, отключенное состояние) и может быть адаптирован под разные размеры и стили.

Параметры компонента

size - размер компонента. Принимает следующие значения:
- extra_small - наименьший размер
- small
- big
- extra_big - наибольший размер
border - граница. При значении borderless убирает границу у input;
color - цвет поля ввода. Принимает следующие значения:
- surface-2 - задает цвет surface-2
- surface-3 - задает цвет surface-3

Данные компонента

top_label - Верхний текст;
bottom_label - Нижний текст;
inner_label - Внутренний текст;
right_content - Внутренний текст справа;
right_icon - Иконка для текста справа.

События компонента

Для инициации кода нужно ввести следующие параметры events='{"ready":{"0":{"element_id":{"action":"initiate"}}}}', где "element_id" - id вызываемого элемента.

Пример использования

Контейнер размера 1/3

        
<smart
    name="inputs"
    id="demo_input"
    property = '{"size": "extra_small"}'
    events='{"ready":{"0":{"demo_input":{"action":"initiate"}}}}'
    sf-code="inputs"
    data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер размера 1/2

        
<smart
    name="inputs"
    id="demo_input2"
    property = '{"size": "small"}'
    events='{"ready":{"0":{"demo_input2":{"action":"initiate"}}}}'
    sf-code="inputs"
    data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер стандартного размера

        
<smart
    name="inputs"
    id="demo_input3"
    events='{"ready":{"0":{"demo_input3":{"action":"initiate"}}}}'
    sf-code="inputs"
    data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер стандартного размера 2

        
<smart
    name="inputs"
    id="demo_input4"
    property = '{"size": "big"}'
    events='{"ready":{"0":{"demo_input4":{"action":"initiate"}}}}'
    sf-code="inputs"
    data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер стандартного размера 3

        
<smart
    name="inputs"
    id="demo_input5"
    property = '{"size": "extra_big"}'
    events='{"ready":{"0":{"demo_input5":{"action":"initiate"}}}}'
    sf-code="inputs"
    data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер деактивированного input

        
<smart
    name="inputs"
    id="demo_input6"
    property = '{"size": "extra_big", "disabled": "true"}'
    events='{"ready":{"0":{"demo_input6":{"action":"initiate"}}}}'
    sf-code="inputs"
    data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер без границ

        
<smart
    name="inputs"
    id="demo_input7"
    property = '{"size": "extra_big", "border": "borderless"}'
    events='{"ready":{"0":{"demo_input7":{"action":"initiate"}}}}'
    sf-code="inputs"
    data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер цвета surface-2

        
<smart
        name="inputs"
        id="demo_input8"
        property = '{"size": "extra_big", "color": "surface-2"}'
        events='{"ready":{"0":{"demo_input8":{"action":"initiate"}}}}'
        sf-code="inputs"
        data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Контейнер цвета surface-3

        
<smart
        name="inputs"
        id="demo_input9"
        property = '{"size": "extra_big", "color": "surface-3"}'
        events='{"ready":{"0":{"demo_input9":{"action":"initiate"}}}}'
        sf-code="inputs"
        data='{"top_label": "Введите имя", "bottom_label": "Введите имя пользователя", "inner_label": "Имя пользователя", "right_content": "Пояснение", "right_icon": "help"}'
>
</smart>

Изменить статью

Компонент input