ConfigProvider и глобальные настройки

Naive UI предоставляет мощный инструмент для централизованного управления глобальными настройками компонентов — ConfigProvider. Он позволяет задавать общие параметры для всех компонентов в приложении, обеспечивая единообразие стиля и поведения без необходимости повторять настройки для каждого компонента отдельно.

Основная концепция ConfigProvider

ConfigProvider — это компонент-обёртка, который принимает объект конфигурации и распространяет его на все дочерние компоненты. Он используется на уровне приложения или на уровне отдельных разделов интерфейса, когда необходимо локализованное переопределение глобальных настроек.

Ключевые свойства ConfigProvider:

  • theme — глобальная тема для компонентов, включая цветовую палитру и вариации.
  • locale — объект локализации для текстовых сообщений компонентов.
  • components — объект с конфигурацией по типу компонентов для переопределения стандартных параметров.
  • zIndex — базовый уровень слоя для всплывающих элементов, таких как модальные окна или тултипы.
  • dateLocale — локализация для компонент с датами (DatePicker, TimePicker).
  • round — глобальный параметр скругления углов компонентов.

Пример базовой структуры:

import { createApp } from 'vue'
import { ConfigProvider, enUS } from 'naive-ui'
import App from './App.vue'

const app = createApp({
  render: () => (
    <ConfigProvider
      theme={{
        common: {
          primaryColor: '#4caf50',
          infoColor: '#2196f3'
        }
      }}
      locale={enUS}
      round="12px"
    >
      <App />
    </ConfigProvider>
  )
})

app.mount('#app')

Глобальная тема и настройка цветов

Через свойство theme можно определять цвета, размеры и параметры шрифтов для всех компонентов.

Примеры наиболее часто используемых параметров:

  • primaryColor — основной цвет приложения.
  • successColor, warningColor, errorColor — цвета состояния.
  • fontSize — глобальный размер шрифта.
  • borderRadius — скругление по умолчанию для компонентов с рамками.
theme={{
  common: {
    primaryColor: '#ff5722',
    errorColor: '#f44336',
    fontSize: '14px',
    borderRadius: '8px'
  }
}}

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

Локализация компонентов

Свойство locale позволяет задавать языковые настройки для компонентов, таких как кнопки подтверждения, диалоги или календарь. Можно использовать готовые локализации (enUS, zhCN) или создавать собственные:

const ruLocale = {
  global: {
    undo: 'Отменить',
    redo: 'Повторить',
    confirm: 'Подтвердить',
    cancel: 'Отмена'
  },
  datePicker: {
    placeholder: 'Выберите дату',
    now: 'Сейчас',
    confirm: 'Ок'
  }
}

<ConfigProvider locale={ruLocale}>
  <App />
</ConfigProvider>

Все дочерние компоненты автоматически будут использовать эту локализацию.

Глобальные настройки отдельных компонентов

Через объект components можно задавать настройки для каждого типа компонента отдельно. Это позволяет изменять поведение кнопок, модальных окон, таблиц и других элементов, не меняя глобальную тему полностью.

Пример настройки для NButton и NDialog:

<ConfigProvider
  components={{
    NButton: {
      size: 'medium',
      secondary: true
    },
    NDialog: {
      autoFocus: false,
      showIcon: true
    }
  }}
>
  <App />
</ConfigProvider>
  • NButton.size определяет стандартный размер всех кнопок.
  • NDialog.autoFocus отключает автоматическое фокусирование при открытии диалога.

Управление слоями элементов с zIndex

Свойство zIndex задаёт базовый уровень отображения для всплывающих элементов. Это удобно при работе с модальными окнами, тултипами и поповерами, чтобы избежать перекрытия важного контента.

<ConfigProvider zIndex={3000}>
  <App />
</ConfigProvider>

Naive UI автоматически инкрементирует zIndex для дочерних всплывающих компонентов, исходя из базового значения.

Настройка скругления углов и размеров

Свойство round задаёт глобальное скругление углов для всех компонентов, поддерживающих данный параметр. Можно указать в пикселях или через ключевые значения: 'small', 'medium', 'large'.

<ConfigProvider round="16px">
  <App />
</ConfigProvider>

Это упрощает достижение единообразного дизайна без ручного задания border-radius для каждой кнопки или карточки.

Гибридная конфигурация

ConfigProvider допускает вложенные провайдеры, что позволяет комбинировать глобальные и локальные настройки. Например, можно задать общую тему для всего приложения, а затем переопределить конкретные параметры для отдельного раздела.

<ConfigProvider theme={{ common: { primaryColor: '#1976d2' } }}>
  <MainLayout />
  <ConfigProvider
    components={{
      NButton: { size: 'large', tertiary: true }
    }}
  >
    <SpecialSection />
  </ConfigProvider>
</ConfigProvider>

В этом примере SpecialSection использует уникальные настройки кнопок, сохраняя глобальную тему приложения.

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

  1. Централизованная тема — для единообразия интерфейса задавать цвета, шрифты и скругления через ConfigProvider на уровне приложения.
  2. Локализация — использовать один ConfigProvider с объектом локали для всех компонентов.
  3. Компонентные настройки — применять components для тонкой настройки отдельных элементов без дублирования кода.
  4. Вложенные провайдеры — использовать при необходимости изменять поведение определённого раздела интерфейса.
  5. zIndex и слои — устанавливать базовый zIndex один раз и доверять Naive UI автоматическому управлению порядком всплывающих элементов.

ConfigProvider в Naive UI — это универсальный инструмент для масштабируемого управления интерфейсом, объединяющий глобальную тему, локализацию и компонентные настройки, который значительно упрощает поддержку крупных приложений.

Оглавление