VueCraft NPM

Vue ​

Все хуки возвращают ComputedRef<string>, реагирующий на входные Ref<>. Все хуки SSR-безопасны — доступ к DOM во время вычисления не происходит. Импортируются из css-magic-gradient/vue — это единственная точка входа, которой реально требуется vue; основной пакет — никогда.

Настройка ​

ts
// main.ts
import { createApp } from 'vue'
import { VueGradientPlugin } from 'css-magic-gradient/vue'
import App from './App.vue'

createApp(App).use(VueGradientPlugin).mount('#app')

Пример ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  useLinearGradient,
  useMixedLinearGradient,
  useConicGradient,
  useTetradicGradient,
  useTintGradient,
  useAccessibleGradient,
} from 'css-magic-gradient/vue'

const color = ref('#3498db')

const linear = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
const mixed = useMixedLinearGradient(color, ref('#e74c3c'), 7)
const conic = useConicGradient(color, { hueRotation: true, steps: 12 })
const tetradic = useTetradicGradient(color, { type: 'conic', steps: 24 })
const tint = useTintGradient(color, 7)
const accessible = useAccessibleGradient(color, ref('#ffffff'), { targetLevel: 'AA' })
</script>

<template>
  <div :style="{ background: linear }">Linear</div>
  <div :style="{ background: tetradic }">Tetradic conic</div>
  <div :style="{ background: tint }">Tint</div>
  <div :style="{ background: accessible }">Accessible</div>
</template>

Хуки ​

useLinearGradient(first, options?) ​

ComputedRef<string> — линейный градиент из цвета или точек.

useMultiStepLinearGradient(color, steps?, options?) ​

ComputedRef<string> — многоступенчатый градиент яркости.

useMixedLinearGradient(colorA, colorB, steps?, options?) ​

ComputedRef<string> — двухцветный градиент с HSL-интерполяцией.

useRadialGradient(color, options?) ​

ComputedRef<string> — радиальный градиент.

useConicGradient(color, options?) ​

ComputedRef<string> — конический градиент.

useRainbowConicGradient(options?) ​

ComputedRef<string> — радуга на весь спектр, конический.

useComplementaryGradient(color, options?) ​

ComputedRef<string> — комплементарный гармонический градиент.

useTriadicGradient(color, options?) ​

ComputedRef<string> — триадный гармонический градиент.

useAnalogousGradient(color, options?) ​

ComputedRef<string> — аналоговый гармонический градиент.

useTetradicGradient(color, options?) ​

ComputedRef<string> — тетрадный гармонический градиент (linear/radial/conic).

useSplitComplementaryGradient(color, options?) ​

ComputedRef<string> — раздельно-комплементарный гармонический градиент.

useTintGradient(color, steps?, options?) ​

ComputedRef<string> — градиент оттенков (базовый → белый).

useShadeGradient(color, steps?, options?) ​

ComputedRef<string> — градиент теней (базовый → чёрный).

useToneGradient(color, steps?, options?) ​

ComputedRef<string> — градиент тонов (базовый → серый).

useAccessibleGradient(color, textColor, options?) ​

ComputedRef<string> — автоматически подстроенный WCAG-совместимый градиент.

Глобальные свойства (после установки VueGradientPlugin) ​

ts
this.$useLinearGradient(color, options)
this.$useTetradicGradient(color, options)
this.$useTintGradient(color, steps, options)
this.$useAccessibleGradient(color, textColor, options)
// … все хуки доступны как $use* на инстансе Vue