Компонент 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>

    

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