Компонент закрытия (close)

Определение

Компонент close представляет собой кнопку закрытия в виде крестика (двух перекрещенных линий). Этот элемент интерфейса используется для:

  • Закрытия модальных окон
  • Удаления элементов из интерфейса
  • Очистки полей ввода
  • Выхода из полноэкранного режима
  • Закрытия вкладок или панелей

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

  • size - размер компонента. Принимает следующие значения:
    • tiny - наименьший размер
    • extra_small
    • small
    • big
    • extra_big
    • huge
    • huge_2
    • huge_3
    • huge_4
    • huge_5
    • huge_6
    • huge_7
    • huge_8
    • huge_9 - наибольший размер
  • position - позиционирование. По умолчанию задан как absolute. Принимает следующие значения:
    • static - задает статическое позиционирование

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

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

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

1. Стандартный close

Пример блока, который можно закрыть
        
<smart
        name="close"
        sf-code="close"
        id="close"
        events='{"click":{"0":{"close":{"action":"onClick"}}}}'
        data='{"target": "example_block_close"}'
  >
</smart>

2. Спиннеры разных размеров

Пример блока, который можно закрыть
Пример блока, который можно закрыть
Пример блока, который можно закрыть
        
        <div class="row relative" style="padding-top: 50px;" id = "example_block_close_small">
            <div>Пример блока, который можно закрыть</div>
            <smart
                name="close"
                sf-code="close"
                id="close"
                property = '{"size":"small"}'
                events='{"click":{"0":{"close":{"action":"onClick"}}}}'
                data='{"target": "example_block_close_small"}'
                >
            </smart>
        </div>


        <div class="row relative" style="padding-top: 50px;" id = "example_block_close_big">
            <div>Пример блока, который можно закрыть</div>
            <smart
                    name="close"
                    sf-code="close"
                    id="close"
                    property = '{"size":"big"}'
                    events='{"click":{"0":{"close":{"action":"onClick"}}}}'
                    data='{"target": "example_block_close_big"}'
                    >
            </smart>
        </div>


        <div class="row relative" style="padding-top: 50px;" id = "example_block_close_huge_6">
            <div>Пример блока, который можно закрыть</div>
            <smart
                    name="close"
                    sf-code="close"
                    id="close"
                    property = '{"size":"huge_6"}'
                    events='{"click":{"0":{"close":{"action":"onClick"}}}}'
                    data='{"target": "example_block_close_huge_6"}'
                    >
            </smart>
        </div>

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