nb-zoom-text
This is a zoom text component for Vue.js 3+.
Loading component...
Installation
Yarn
yarn add @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')
To use, simply call the component, in this case it will be NbZoomText or nb-zoom-text.
Mode 1
<template>
<NbZoomText />
</template>
Preview & Playground
Select the component you want to edit/test
Loading Sandbox...
Props
Items with an (*) mean they are required
| name | Value type | Default | Description |
|---|---|---|---|
| nbId (*) | String | Sets the id attribute to differentiate from other components | |
| title | String | '' | Tooltip text shown when hovering over the component. |
| disabled | Boolean | false | Defines if the zoom component is disabled |
| background | Boolean | false | Defines if the zoom has background. |
| backgroundColor | String | '#ffffff' | Defines the background color. Accepts Color name and Hex |
| textColor | String | 'black' | Defines the text color. Accepts Color name and Hex |
| scale | Number | 1.5 | Defines component scale (size). Accepts 1 to 5. |
| fontFamily | String | "'Lato', sans-serif" | Defines the font-family |
| fontSize | String | '1.6em' | Defines the font-size |
| fontWeight | Number | 400 | Defines the font-weight |
Events
| name | Return type | Description |
|---|---|---|
| clicked | MouseEvent | KeyboardEvent | Fired when the component is clicked. Receives the native DOM event as first argument. |
Slot
The component has a slot where the content that will be manipulated must be passed. It has a default text (default content) in case the content does not pass through the slot.
<template>
<NbZoomText>
CONTENT HERE
</NbZoomText>
</template>
Table of Contents