Компонент и его Smart-двойник
У многих компонентов есть Smart-двойник: .sf-button и <sf-button>,
.sf-input и <sf-input>. Эта глава объясняет, как они связаны и как
выбрать между ними.
Это не две реализации одного вида. Smart-компонент рисует те же
классы: <sf-button appearance="outline" scheme="primary" size="1"> строит
внутри себя
<button class="sf-button sf-button--outline sf-button--primary sf-button--size-1">. Правило Loader Smart-кнопки прямо требует обычный
компонент кнопки: стили приходят оттуда.
Что из этого следует:
- Smart-кнопка и кнопка из разметки выглядят одинаково, и смена темы меняет обе.
- Настройки называются одинаково: модификатор
sf-button--outlineи атрибутappearance="outline"— одна и та же настройка. - Исправление оформления делается один раз — в обычном компоненте.
Как выбрать:
| Нужно | Выбирайте |
|---|---|
| Только вид; разметку рисует сервер или шаблон проекта | Обычный компонент |
| Состояние, события, данные, клавиатурная логика сложнее нативной | Smart-компонент |
| Форма, которую отправляет браузер | Обычные поля; Smart — если нужна его логика |
Устройство Smart-компонентов — в разделе Smart-компоненты.
Смотрите также: Настройки: общий язык компонентов — настройки; Smart-компоненты — устройство Smart-компонентов.