nb-button-show-hover
This is a show hover button component for Vue.js 3+.
Loading component...
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 NbButtonShowHover or nb-button-show-hover.
Mode 1
<template>
<NbButtonShowHover />
</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. |
| tabIndex | Number | 0 | Defines the tab index. Set this property to make the button focusable by the keyboard. |
| hasTabIndexEnter | Boolean | true | Enables the button to be activated with the Enter key when focused. |
| hasTabIndexSpace | Boolean | true | Enables the button to be activated with the Space key when focused. |
| ariaLabel | String | 'Alternate Text Button' | Defines the aria-label attribute for screen readers. |
| ariaAttrs | Object | {} | Allows passing custom aria attributes as an object. Keys will automatically receive the aria- prefix. Example: { 'describedby': 'help-id', 'invalid': 'false' } |
| theme | String | 'light' | Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props. |
| verticalAlign | String | 'middle' | Defines the button align. Accepts top, middle or bottom |
| borderRadius | Number | 0.375 | Defines border-radius. |
| 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 |
| fontFamily | String | "'Lato', sans-serif" | Defines the font-family |
| fontSize | String | '1.6em' | Defines the font-size |
| fontWeight | Number | 400 | Defines the font-weight |
| lightTextColor | String | '#333333' | Defines the text color for light theme. Accepts Color name and Hex |
| lightTextColorHover | String | '#000000' | Defines the text color on hover for light theme. Accepts Color name and Hex |
| lightButtonColorHover | String | '245, 245, 245' | Defines the button color (background) on hover for light theme. Accepts RGB (without parentheses) |
| lightButtonColorOpacityHover | Number | 0.1 | Defines the button color (background) opacity on hover for light theme. |
| lightDisabledBgColor | String | '#dfdfd9' | Defines the disabled background color for light theme. Accepts Color name and Hex |
| darkTextColor | String | '#e0e0e0' | Defines the text color for dark theme. Accepts Color name and Hex |
| darkTextColorHover | String | '#ffffff' | Defines the text color on hover for dark theme. Accepts Color name and Hex |
| darkButtonColorHover | String | '45, 45, 45' | Defines the button color (background) on hover for dark theme. Accepts RGB (without parentheses) |
| darkButtonColorOpacityHover | Number | 0.1 | Defines the button color (background) opacity on hover for dark theme. |
| darkDisabledBgColor | String | 'rgba(40, 42, 54, 1)' | Defines the disabled background color for dark theme. Accepts Color name and Hex |
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>
<NbButtonShowHover
:nb-id="'nb-button-show-hover-one'"
:display="'b'"
theme="light"
>
<template #content>
Default Text
</template>
</NbButtonShowHover>
</template>
Example
Light Theme (default)
<template>
<NbButtonShowHover
nb-id="nb-button-show-hover-light"
display="b"
theme="light"
light-text-color="#1e40af"
light-text-color-hover="#ffffff"
light-button-color-hover="59, 130, 246"
light-button-color-opacity-hover="0.2"
:padding-x="1"
:padding-y="0.2"
@clicked="logEvent()"
>
<template #content>Default Text</template>
</NbButtonShowHover>
</template>
<script setup>
defineOptions({
name: 'CompShowHover',
});
const logEvent = () => {
console.log('clicked');
};
</script>
Dark Theme
<template>
<NbButtonShowHover
nb-id="nb-button-show-hover-dark"
display="b"
theme="dark"
dark-text-color="#a78bfa"
dark-text-color-hover="#ffffff"
dark-button-color-hover="139, 92, 246"
dark-button-color-opacity-hover="0.2"
:padding-x="1.5"
:padding-y="0.4"
@clicked="logEvent()"
>
<template #content>Default Text</template>
</NbButtonShowHover>
</template>
<script setup>
defineOptions({
name: 'CompShowHoverDark',
});
const logEvent = () => {
console.log('clicked');
};
</script>