Система узорных фонов

lh-ui-plus предоставляет систему поэтичных узорных фонов в китайском стиле: 6 предустановленных узоров, которые применяются через CSS-переменную (bg-pattern) или проп bgPattern компонента. Переключение светлой и тёмной тем — отдельная возможность, см. раздел «Светлая и тёмная темы» в конце.

Предустановленные узоры

В систему встроено 6 узоров:

Узор	CSS-переменная	Описание
Нет	--lh-pattern-none	по умолчанию без узора
柳叶 (ивовый лист)	--lh-pattern-willow	тонкие длинные листья, гармоничная плотность
祥云 (благоприятное облако)	--lh-pattern-cloud	плавно расходящиеся облака, извилистые линии
水波 (волны)	--lh-pattern-water	лёгкая рябь, наслаивающаяся рядами
雪花 (снежинка)	--lh-pattern-snow	шестиугольная снежинка с тонкими ветвями
梅花 (цветение сливы)	--lh-pattern-plum	пять лепестков вокруг отчётливой сердцевины
竹叶 (лист бамбука)	--lh-pattern-bamboo	ланцетовидные листья, естественный беспорядок

Способы применения

Глобальная настройка через ConfigProvider

<template>
  <LhConfigProvider :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-willow)' }">
    <LhButton>Обычная</LhButton>
    <LhButton type="primary">Основная</LhButton>
  </LhConfigProvider>
</template>

Управление областью применения узора (белый список patternComponents)

По умолчанию глобальный bg-pattern не применяется ни к одному компоненту — его нужно явно включить через белый список patternComponents:

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <LhConfigProvider
    :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-cloud)' }"
    :pattern-components="['button', 'input']"
  >
    <!-- Узор применится к кнопке и полю ввода, но не к Dialog -->
    <LhButton>Кнопка с узором</LhButton>
    <LhInput placeholder="Поле ввода с узором" />
    <LhDialog v-model="visible">Этот диалог без узора</LhDialog>
  </LhConfigProvider>
</template>

Покомпонентная настройка узора

Узор, заданный через собственный проп bgPattern или themeVars компонента, не ограничен белым списком:

<template>
  <LhButton :bg-pattern="'var(--lh-pattern-bamboo)'">
    У этой кнопки всегда есть узор
  </LhButton>
</template>

Настройка прозрачности узора

<template>
  <LhConfigProvider
    :theme-vars="{
      'bg-pattern': 'var(--lh-pattern-snow)',
      'bg-pattern-opacity': '0.3',
      'bg-pattern-color': 'rgba(255, 0, 0, 0.2)',
    }"
  >
    <LhButton>Своя прозрачность</LhButton>
  </LhConfigProvider>
</template>

Справочник CSS-переменных

Переменная	Описание	Значение по умолчанию
--lh-bg-pattern	URL узорного фона	none
--lh-bg-pattern-repeat	режим мозаичного размещения узора	repeat
--lh-bg-pattern-size	размер узора	40px
--lh-bg-pattern-opacity	прозрачность узора	0.15
--lh-bg-pattern-color	цвет узора	var(--lh-decoration-color, rgba(184, 134, 11, 0.12))
--lh-bg-pattern-blend	режим наложения узора	soft-light

Светлая и тёмная темы

Система узоров управляется CSS-переменными и не зависит от светлой/тёмной темы. Переключение выполняется composable-функцией useLhTheme (записывает атрибут data-theme):

<script setup lang="ts">
import { useLhTheme } from '@lh-ui/vue3'

const { theme, toggleTheme, setTheme } = useLhTheme()

// Переключение светлой и тёмной тем
function onToggle() {
  toggleTheme()
}
</script>

<template>
  <div>
    <LhButton @click="onToggle">
      {{ theme === 'dark' ? 'Светлая тема' : 'Тёмная тема' }}
    </LhButton>
  </div>
</template>

Приоритет переменных темы

Итоговые CSS-переменные компонента сливаются со следующим приоритетом (последующее перекрывает предыдущее):

1. Глобальные themeVars ConfigProvider (низший приоритет)
2. Покомпонентные componentTheme[имя-компонента] ConfigProvider
3. Собственный проп themeVars компонента
4. Собственный проп bgPattern компонента (высший приоритет)

Для переменной bg-pattern дополнительно действует белый список patternComponents: глобальный bg-pattern применяется только к компонентам из списка.