nb-button-hamburger
This is a hamburger 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 NbButtonHamburger or nb-button-hamburger.
Mode 1
<template>
<NbButtonHamburger />
</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 | |
| 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. |
| status | Boolean | false | Defines the button status (clicked/unclicked) |
| paddingX | Number | 3 | Defines button padding-left and padding-right. |
| paddingY | Number | 3 | Defines button padding-top and padding-button. |
| disabled | Boolean | false | Defines if the button is disabled |
| lightColor | String | '#333333' | Defines the icon color for light theme. Accepts Color name and Hex |
| lightColorHover | String | '#000000' | Defines the icon color on hover for light theme. Accepts Color name and Hex |
| lightContainerColor | String | '#f5f5f5' | Defines the background color for light theme. Accepts Color name and Hex |
| lightContainerColorHover | String | '#e0e0e0' | Defines the background color on hover for light theme. Accepts Color name and Hex |
| lightDisabledBgColor | String | '#dfdfd9' | Defines the disabled background color for light theme. Accepts Color name and Hex |
| darkColor | String | '#e0e0e0' | Defines the icon color for dark theme. Accepts Color name and Hex |
| darkColorHover | String | '#ffffff' | Defines the icon color on hover for dark theme. Accepts Color name and Hex |
| darkContainerColor | String | '#2d2d2d' | Defines the background color for dark theme. Accepts Color name and Hex |
| darkContainerColorHover | String | '#3d3d3d' | Defines the background color on hover for dark theme. Accepts Color name and Hex |
| 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. |
Example
Light Theme (default)
<template>
<NbButtonHamburger
nb-id="nb-button-hamburger-light"
theme="light"
light-color="#1e40af"
light-color-hover="#000000"
light-container-color="#93c5fd"
light-container-color-hover="#60a5fa"
:padding-x="3"
:padding-y="3"
@clicked="logEvent()"
/>
</template>
<script setup>
defineOptions({
name: 'CompHamburger',
});
const logEvent = () => {
console.log('clicked');
};
</script>
Dark Theme
<template>
<NbButtonHamburger
nb-id="nb-button-hamburger-dark"
theme="dark"
dark-color="#a78bfa"
dark-color-hover="#ffffff"
dark-container-color="#8b5cf6"
dark-container-color-hover="#7c3aed"
:padding-x="3"
:padding-y="3"
@clicked="logEvent()"
/>
</template>
<script setup>
defineOptions({
name: 'CompHamburgerDark',
});
const logEvent = () => {
console.log('clicked');
};
</script>