nb-highlight-selected-text

This is a highlight selected text component for Vue.js 3+.

Select " " to see it in another color

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 NbHighlightSelectedText or nb-highlight-selected-text.

Mode 1
<template>
  <NbHighlightSelectedText />
</template>
Mode 2
<template>
  <nb-highlight-selected-text />
</template>
Mode 3
<template>
  <nb-highlight-selected-text></nb-highlight-selected-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
backgroundColorString'#000000'Defines the background color. Accepts Color name and Hex
textColorString'#ffffff'Defines the text color. Accepts Color name and Hex

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>
  <NbHighlightSelectedText>
    <template #text>
      CONTENT HERE
    </template>
  </NbHighlightSelectedText>
</template>

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>
  <NbHighlightSelectedText>
    <template #text>
      CONTENT HERE
    </template>
  </NbHighlightSelectedText>
</template>
Table of Contents