Vg-Text
This component is only for Vue.js 3+
Deprecated Package
This package has been deprecated and is no longer actively maintained. We recommend switching to the @vlalg-nimbus/nb-text as a replacement for this one. The new package provides improved features, better performance, and ongoing support.
Installation
npm install @vemlavaraloucagamers/vg-text
# or
yarn add @vemlavaraloucagamers/vg-textUsage
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VgText from '@vemlavaraloucagamers/vg-text'
import "@vemlavaraloucagamers/vg-text/dist/style.css";
const app = createApp(App)
app.use(VgText)
app.mount('#app')After installing you can use any component:
Vg-Gradient-Text
This is a component Gradient Text.
// 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
| name | Value type | Default | Description |
|---|---|---|---|
| vgId (*) | String | Sets the id attribute to differentiate from other components | |
| lineHeight | String | '1.42857143' | Defines text line-height, accepts any value greater than 0 |
| size | String | '3rem' | Defines text size, accepts any value + type (px, em or ...) |
| bgFirst | String | '#5639fc' | Defines the first gradient background color. Accepts Color name and Hex |
| bgSecond | String | '#05f7ff' | Defines the second gradient background color. Accepts Color name and Hex |
| alignment | String | 'left' | Defines the text align. Accepts center, left and left |
| paddingBottom | String | '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 |
| font | String | '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>Vg-Highlight-Selected-Text
This is a component Highlight Selected Text.
// page.vue
<template>
<p>
Select
<VgHighlightSelectedText
vg-id="asdas"
>
this part of the text
</VgHighlightSelectedText>
to see it in another color
</p>
</template>
<template>
<p>
Select
<vg-highlight-selected-text
vg-id="vg-highlight-selected-text"
>
this part of the text
</vg-highlight-selected-text>
to see it in another color
</p>
</template>Props
Items with an (*) mean they are required
| name | Value type | Default | Description |
|---|---|---|---|
| vgId (*) | String | Sets the id attribute to differentiate from other components | |
| backgroundColor | String | '#000000' | Defines the background color. Accepts Color name and Hex |
| textColor | String | '#ffffff' | Defines the text color. Accepts Color name and Hex |
Example
// page.vue
<template>
<p>
Select
<VgHighlightSelectedText
vg-id="vg-highlight-selected-text"
background-color="tomato"
text-color="blue"
>
this part of the text
</VgHighlightSelectedText>
to see it in another color
</p>
</template>
<script setup>
</script>