nb-button-vava-game
This is a Vava (inspired by Valorant Game) button component for Vue.js 3+.
Look at the console to see the triggered event
Installation
Yarn
yarn add @vlalg-nimbus/nb-buttons
Usage
Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import NbButtonsComponents from '@vlalg-nimbus/nb-buttons'
import "@vlalg-nimbus/nb-buttons/dist/style.css";
const app = createApp(App)
app.use(NbButtonsComponents)
app.mount('#app')
To use, simply call the component, in this case it will be NbButtonVavaGame or nb-button-vava-game.
Mode 1
<template>
<NbButtonVavaGame />
</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 | |
| display | String | 'b' | Defines the display type. Accepts ib and b. |
| textColor | String | '#ece8e1' | Defines the text color. Accepts Color name and Hex |
| textColorHover | String | 'gray' | Defines the text color on hover. Accepts Color name and Hex |
| buttonColor | String | 'blue' | Defines the button color (background). Accepts Color name and Hex |
| buttonColorHover | String | 'cyan' | Defines the button color (background) on hover. Accepts Color name and Hex |
| borderColor | String | 'yellow' | Defines the border color. Accepts Color name and Hex |
| borderOpacity | Number | 0.5 | Defines the border opacity. |
| paddingXBorder | Number | 0.3 | Defines border padding-left and padding-right. |
| paddingYBorder | Number | 0.3 | Defines border padding-top and padding-button. |
| paddingXContent | Number | 0.5 | Defines button content padding-left and padding-right. |
| paddingYContent | Number | 0.5 | Defines button content padding-top and padding-button. |
| uppercase | Boolean | true | Defines if the button text is uppercase |
| disabled | Boolean | false | Defines if the button is disabled |
| 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 | nothing | Fired when the button is clicked, returns nothing. |
Slot
The component has a slot called content 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>
<NbButtonVavaGame
:nb-id="'nb-button-vava-game-one'"
:display="'b'"
>
<template #text>
Default Text
</template>
</NbButtonVavaGame>
</template>
Table of Contents