Кастомизация переключателей

В библиотеке Naive UI переключатели (n-switch) предоставляют гибкий и мощный механизм для реализации двоичных состояний, при этом сохраняя высокий уровень кастомизации. Каждый переключатель представляет собой компонент с широким набором пропсов, событий и слотов, позволяющих изменять как визуальное отображение, так и поведение.

Настройка внешнего вида через пропсы

Ключевые пропсы для кастомизации:

  • size – задаёт размер переключателя. Возможные значения: 'small', 'medium', 'large'.

    <n-switch size="large" v-model:value="checked" />

  • loading – добавляет индикатор загрузки вместо стандартного положения переключателя.

    <n-switch :loading="isLoading" v-model:value="checked" />

  • disabled – блокирует взаимодействие с компонентом, оставляя визуальное отображение активным.

    <n-switch :disabled="true" v-model:value="checked" />

  • value / v-model:value – управляет состоянием переключателя (true или false).

  • checked-color и unchecked-color – позволяют задавать собственные цвета для активного и неактивного состояния.

    <n-switch 
  v-model:value="checked" 
  checked-color="#4CAF50" 
  unchecked-color="#F44336" 
/>

Эти пропсы обеспечивают базовую визуальную настройку без необходимости изменения CSS напрямую.

Использование слотов для полной кастомизации

Компонент n-switch поддерживает слоты, позволяющие вставлять собственный контент внутрь переключателя:

  • checked – слот для отображения кастомного содержимого в активном состоянии.
  • unchecked – слот для отображения в неактивном состоянии.

Пример:

<n-switch v-model:value="checked">
  <template #checked>
    <span>Вкл</span>
  </template>
  <template #unchecked>
    <span>Выкл</span>
  </template>
</n-switch>

Это особенно полезно для замены стандартного кружка или текста на более сложные иконки, изображения или анимации.

Пользовательские стили через CSS-переменные

Naive UI предоставляет поддержку CSS-переменных для детальной настройки внешнего вида переключателя без необходимости полностью переопределять стили:

  • --n-switch-checked-color – цвет фона в активном состоянии
  • --n-switch-unchecked-color – цвет фона в неактивном состоянии
  • --n-switch-handle-color – цвет ручки переключателя
  • --n-switch-handle-size – размер ручки

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

.custom-switch {
  --n-switch-checked-color: #1E88E5;
  --n-switch-unchecked-color: #B0BEC5;
  --n-switch-handle-color: #FFFFFF;
  --n-switch-handle-size: 24px;
}
<n-switch class="custom-switch" v-model:value="checked" />

Использование CSS-переменных позволяет создавать уникальные темы, соответствующие стилю приложения, без вмешательства в исходный код компонента.

Анимация переключения состояния

Переключатели в Naive UI поддерживают анимацию с помощью CSS-переходов по умолчанию, но можно настроить их с помощью transition:

.custom-switch {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

Также через слоты можно интегрировать анимации для ручки при смене состояния:

<n-switch v-model:value="checked">
  <template #checked>
    <div class="handle-animation">✔</div>
  </template>
</n-switch>

Комбинация слотов и CSS-переменных позволяет создавать плавные, интерактивные переключатели с уникальными эффектами.

События и программное управление

Для динамической логики переключателей важно использовать события и методы:

  • on-update:value – вызывается при изменении состояния переключателя.

    <n-switch v-model:value="checked" @update:value="handleChange" />

  • Программное переключение через v-model:value:

    const toggleSwitch = () => {
  checked.value = !checked.value;
};

Это позволяет связывать переключатель с другими компонентами, состояниями или асинхронными процессами.

Интеграция с формами и валидацией

Переключатели можно использовать в формах Naive UI (n-form и n-form-item), обеспечивая корректную валидацию и интеграцию с данными:

<n-form :model="formData">
  <n-form-item label="Активировать" path="enabled">
    <n-switch v-model:value="formData.enabled" />
  </n-form-item>
</n-form>

С помощью rules можно добавлять кастомную проверку, например, обязательность включения переключателя для активации функции.

Советы по производительному кастомизированию

  • Для частого переиспользования создавайте собственные компоненты-обёртки с заранее заданными стилями и слотами.
  • Используйте CSS-переменные вместо полного переопределения стилей, чтобы сохранить совместимость с будущими обновлениями библиотеки.
  • Для сложных анимаций лучше применять слоты с элементами div или span и управлять переходами через CSS, избегая прямого вмешательства в DOM переключателя.

Такой подход позволяет создавать уникальные интерфейсы, сохраняя при этом надежность и удобство стандартного n-switch.

Оглавление