Разделители контента

Content dividers (разделители контента)

Content dividers — это компонент, который используется для визуального разделения контента на странице. Он может быть представлен в виде горизонтальной линии с текстом или кнопками по центру, а также с дополнительными границами.

Шаблоны компонента:

  • default - стандартный шаблон
  • buttons - шаблон разделителя с кнопками

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

  • line - линия разделителя. При значении true добавляет горизонтальную линию разделителя;
  • number - параметр шаблона buttons. Принимает следующие значения:
    • single - одиночная кнопка
    • three - три кнопки
  • border - параметр шаблона default. При значении true добавляет границу на текст;
  • size - параметр шаблона default. При значении small уменьшает размер текста.

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

  • Для шаблона default:
    • message - текст разделителя
  • Для шаблона buttons (три кнопки):
    • button_left, button, button_right - левая, центральная и правая кнопки. В эти параметры поступают данные типа и значения;
    • type - тип (принимает значения icon и text для иконок и текста соответственно)
    • value - значение переданного type
  • Для шаблона buttons (одна кнопка):
    • type - тип (принимает значения icon и text для иконок и текста соответственно)
    • value - значение переданного type

Пример HTML и CSS

                
<smart
    name="contentDivider"
    sf-code="contentDivider"
    property="{"line": "true"}"
    data='{"message": "Notifications"}'
    >
</smart>
                
            
                
<smart
  name="contentDivider"
  sf-code="contentDivider"
  property='{"size": "small", "line": "true"}'
  data='{"message": "Notifications"}'
    >
</smart>
                
            
                
<smart
    name="contentDivider"
    sf-code="contentDivider"
    property='{"border": "true", "line": "true"}'
    data='{"message": "Notifications"}'
    >
</smart>
                
            
                
<smart
    name="contentDivider"
    sf-code="contentDivider"
    template="buttons"
    property='{"number": "three", "line": "true"}'
    data='{"button_left":{"type": "icon", "value": "settings"}, "button":{"type": "icon", "value": "settings"}, "button_right":{"type": "icon", "value": "settings"}}'
    >
</smart>
                
            
                
<smart
    name="contentDivider"
    sf-code="contentDivider"
    template="buttons"
    property='{"number": "three", "line": "true"}'
    data='{"button_left":{"type": "text", "value": "Button"}, "button":{"type": "text", "value": "Button"}, "button_right":{"type": "text", "value": "Button"}}'
    >
</smart>
                
            
                
<smart
    name="contentDivider"
    sf-code="contentDivider"
    template="buttons"
    property='{"number": "one", "line": "true"}'
    data='{"type": "icon", "value": "settings"}'
    >
</smart>
                
            
                
<smart
        name="contentDivider"
        sf-code="contentDivider"
        data='{"message": "Notifications"}'
    >
</smart>

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