Описание компонента Tags

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

Компонент tags представляет собой набор стилизованных элементов (тегов), которые могут использоваться для отображения меток, иконок, аватаров, чисел и других элементов интерфейса. Эти теги могут быть использованы для категоризации, фильтрации, отображения статусов и других задач в пользовательском интерфейсе.

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

1. Текстовый тег:

            
                <span class="sf-tag">
                    <span>Label</span>
                </span>

2. Тег с иконкой:

        
<smart
    name="tags"
    sf-code="tags"
    property='{"avatar_size": "small"}'
    template="default"
    data='{"text": "Описание вашего тега", "close": "right"}'
  >
</smart>

<smart
    name="tags"
    sf-code="tags"
    property='{"avatar_size": "small"}'
    template="default"
    data='{"text": "Описание вашего тега", "close": "left"}'
  >
</smart>

3. Тег с аватаром:

        
<smart
  name="tags"
  sf-code="tags"
  property='{"avatar_size": "small"}'
  template="avatar"
  data='{"avatarUrl": "https://img.freepik.com/premium-photo/realistic-3d-model-disney-character-trixie-with-glasses-red-hair_899449-104975.jpg",
        "text": "true"}'
>
</smart>

4. Тег с числом:

        
<smart
  name="tags"
  sf-code="tags"
  property='{"avatar_size": "small"}'
  template="number"
  data='{"text": "Описание вашего тега", "number": 5}'
  >
</smart>

5. Тег с точкой статуса:

        
<smart
  name="tags"
  sf-code="tags"
  property='{"color": "success"}'
  template="dot"
  data='{"text": "Описание вашего тега"}'
>
</smart>
        
        
<smart
  name="tags"
  sf-code="tags"
  property='{"color": "warning"}'
  template="dot"
  data='{"text": "Описание вашего тега"}'
>
</smart> 
        
        
<smart
  name="tags"
  sf-code="tags"
  property='{"color": "error"}'
  template="dot"
  data='{"text": "Описание вашего тега"}'
>
</smart>

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