nb-button-mechanical
This is a mechanical 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 NbButtonMechanical or nb-button-mechanical.
Mode 1
<template>
<NbButtonMechanical />
</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 | '#ffffff' | Defines the text color. Accepts Color name and Hex |
| containerColor | String | '#ffffff' | Defines the container color. Accepts Color name and Hex. The container is where the button is allocated, if for example the background of the parent (container) where the button is located is blue, the value set in this property must be blue for the button border to work. |
| buttonColor | String | '#bbbbbb' | Defines the button color (background). Accepts Color name and Hex |
| paddingX | Number | 1 | Defines button padding-left and padding-right. |
| paddingY | Number | 0.2 | Defines button padding-top and padding-button. |
| disabled | Boolean | false | Defines if the button is disabled |
| borderRadius | Number | 0.375 | Defines border-radius. |
| animationSlow | Boolean | false | Defines if the animation when hovering the button should be slow or not |
| 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>
<NbButtonMechanical
:nb-id="'nb-button-mechanical-one'"
:display="'b'"
>
<template #text>
Default Text
</template>
</NbButtonMechanical>
</template>
Table of Contents