nb-gradient-text

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

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
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. For this property to work, the component needs to have the size property high and in a container of size X or the text to be large and also being in a container of size X. There are several ways for this property to work, all involving the size of the container this component is included in.
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
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