Компонент Buttons

Компонент Buttons представляет собой компонент для использования различных активных элементов. Он может быть использован как для форм так и для других компонентов.

Buttons используются в таких местах пользовательского интерфейса, как:
  • Диалоги
  • Всплывающие окно
  • Формы
  • Карточки
  • Панели инструментов

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

  • color - цвет компонента. Принимает следующие значения:
    • secondary_container: Параметр для бейджа с светло-серым фоном.
    • primary_transparent: Параметр для бейджа с прозрачным фоном и границей.
    • on_surface: Параметр для бейджа с основным цветом фона.
    • surface_container: Параметр для бейджа с легким основным цветом фона.
    • on_surface_transparent: Параметр для бейджа с прозрачным фоном и основным цветом границы.
  • size - размер компонента. Принимает следующие значения:
    • extra_small - наименьший размер
    • small
    • big
    • extra_big - наибольший размер
  • border - граница компонента. Принимает следующие значения:
    • rounded_left - полукруглая граница слева
    • square_borders - квадратные границы
    • rounded_right - полукруглая граница справа
    • extra_big - наибольший размер
  • shape - форма компонента. Принимает следующие значения:
    • round_button - круглая кнопка

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

  • text - текст кнопки
  • icon_right - иконка справа (если есть)
  • icon_left - иконка справа (если есть)

Пример стандартной кнопки

    
<smart
name="checkboxes"
sf-code="checkboxes"
property = '{"size": "default"}'
template = "default"
data='{"header": "Подтвердить" ,"label":"Вы согласны с пользовательским соглашением", "icon": "help"}'>
</smart>


<smart
    name="buttons"
    sf-code="buttons"
    property='{"size": "small"}'
    data='{"text":"Подтвердить"}'
></smart>
<smart
    name="buttons"
    sf-code="buttons"
    property='{"size": "big"}'
    data='{"icon_right": "chevron_right",
    "text":"Переключить"}'
></smart>

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