nb-gradient-text

This is a gradient text component for Vue.js 3+.

Loading component...

Installation

Yarn
yarn add @vlalg-nimbus/nb-text
NPM
npm install @vlalg-nimbus/nb-text

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import NbTextComponents from '@vlalg-nimbus/nb-text'
import "@vlalg-nimbus/nb-text/dist/style.css";

const app = createApp(App)
app.use(NbTextComponents)
app.mount('#app')
Nuxt 3
import NbTextComponents from '@vlalg-nimbus/nb-text'
import "@vlalg-nimbus/nb-text/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbTextComponents)
})

To use, simply call the component, in this case it will be NbGradientText or nb-gradient-text.

Mode 1
<template>
  <NbGradientText />
</template>
Mode 2
<template>
  <nb-gradient-text />
</template>
Mode 3
<template>
  <nb-gradient-text></nb-gradient-text>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
lineHeightString'1.42857143'Defines text line-height, accepts any value greater than 0
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 alignment. Accepts center, left and right. For this property to work, the component needs to have sufficient height and be in a container with defined size, or the text to be large within a container of defined size.
paddingBottomString'5'Defines text padding-bottom. Depending on the font size 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
fontFamilyString"'Lato', sans-serif"Defines the font-family
fontSizeString'1.6em'Defines the font-size
fontWeightNumber400Defines the font-weight

Slot

The component has a slot called text where the content that will be manipulated must be passed. It has a default text (Default Text) in case the content does not pass through the slot.

<template>
  <NbGradientText>
    <template #text>
      CONTENT HERE
    </template>
  </NbGradientText>
</template>
Table of Contents