1.0.3 • Published 2 years ago

@vemlavaraloucagamers/vg-gradient-text v1.0.3

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

Vg-Gradient-Text

This component is only for Vue.js 3+

npm npm Snyk Vulnerabilities for npm package Snyk Vulnerabilities for GitHub Repo

This is a component Gradient Text.

Installation

npm install @vemlavaraloucagamers/vg-gradient-text

# or

yarn add @vemlavaraloucagamers/vg-gradient-text

Usage

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import VgGradientText from '@vemlavaraloucagamers/vg-gradient-text'
import "@vemlavaraloucagamers/vg-gradient-text/dist/style.css";

const app = createApp(App)
app.use(VgGradientText)
app.mount('#app')
// page.vue
<template>
  <VgGradientText>
    <template #text>
      Slot content
    </template>
  </VgGradientText>
</template>

<template>
  <vg-gradient-text>
    <template #text>
      Slot content
    </template>
  </vg-gradient-text>
</template>

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
vgId (*)StringSets the id attribute to differentiate from other components
lineHeightString'1.42857143'Defines text line-height, accepts any value greater than 0
sizeString'3rem'Defines text size, accepts any value + type (px, em or ...)
bgFirstString'#5639fc'Defines the first gradient background color. Accepts Color name and Hex
bgSecondString'#05f7ff'Defines the second gradient background color. Accepts Color name and Hex
alignmentString'left'Defines the text align. Accepts center, left and left
paddingBottomString'5'Defines text padding-bottom. Depending on the font size (size prop) and if the last paragraph has a letter with a long leg, the leg of the letter will have a hidden part. This property allows to fix this. The minimum value is 5
fontString'Fugaz One, cursive'Defines text font-family. Pass the font-family you want and that is configured in your project

Example

// page.vue
<template>
  <VgGradientText
    vg-id="vg-gradient-text-one"
    alignment="center"
    line-height="1"
    size="3.5em"
    padding-bottom="10"
    bg-first="magenta"
    bg-second="cyan"
  >
    <template #text>
      i love to<br />drink coffee<br />very much
    </template>
  </VgGradientText>
</template>

<script setup>
</script>

License

MIT