Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zcuric/vue-burger
:hamburger: Hamburger for Vue
https://github.com/zcuric/vue-burger
css css-animations hamburger-button hamburger-menus icons javascript vue
Last synced: 3 months ago
JSON representation
:hamburger: Hamburger for Vue
- Host: GitHub
- URL: https://github.com/zcuric/vue-burger
- Owner: zcuric
- License: mit
- Created: 2019-10-02T21:01:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-01-15T16:15:12.000Z (almost 3 years ago)
- Last Synced: 2024-08-08T20:54:56.679Z (5 months ago)
- Topics: css, css-animations, hamburger-button, hamburger-menus, icons, javascript, vue
- Language: Vue
- Homepage: https://zcuric.github.io/vue-burger
- Size: 1.91 MB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Vue Burger
Vue.js plugin for Tasty CSS-animated hamburgers
## About
Vue Burger is a Vue component/plugin that is a wrapper around [Tasty CSS-animated hamburgers](https://github.com/jonsuh/hamburgers), wellknown css library for hamburger icons.
## Installation
```
npm install vue-burger
# or
yarn add vue-burger
```
## Initialization
```js
import App from './App.vue';
import VBurger from 'vue-burger';
import Vue from 'vue';
Vue.use(VBurger);
new Vue({
render: h => h(App),
}).$mount('#app');
```
`VBurger` component can be used in without plugin initialization:
```vue
import { VBurger } from 'vue-burger';
export default {
component: {
VBurger
}
}
```
## Usage
```vue
```
### Props
### type
- type: `String`,
- default: 'boring'
### burgerStyle
- type: `Object`,
- default: `{}`
### ariaLabel
- type: `String`,
- default: 'Menu'
### ariaControls
- type: `String`,
- default: 'navigation'
### tabIndex
- type: `Number`,
- default: `0`
### Types of burger
Available types are:
- 3dx,
- 3dx-r,
- 3dy,
- 3dy-r,
- 3dxy,
- 3dxy-r,
- arrow,
- arrow-r,
- arrowalt,
- arrowalt-r,
- arrowturn,
- arrowturn-r,
- boring,
- collapse,
- collapse-r,
- elastic,
- elastic-r,
- emphatic,
- emphatic-r,
- minus,
- slider,
- slider-r,
- spring,
- spring-r,
- stand,
- stand-r,
- spin,
- spin-r,
- squeeze,
- vortex,
- vortex-r
You can see all the types in actions on official documentation for [Hamburgers](https://jonsuh.com/hamburgers/).
### Styling the burger
For styling regular CSS variables are used. Variables are defined
in `burgerStyle` prop. Available variables:
| Variable | Description | Default value |
| ------------------------- | ------------------------------------------- | ------------------ |
| `--padding` | padding of the hamburger box | 15px |
| `--bg-color` | hamburger background color | transparent |
| `--box-width` | hamburger box width | 40px |
| `--box-height` | hamburger box height | 24px |
| `--layer-width` | width of each hamburger layer | 40px |
| `--layer-height` | height of each hamburger layer | 4px |
| `--layer-bg-color` | layer background color | #000000 |
| `--active-layer-bg-color` | layer background color when in active state | `--layer-bg-color` |
Example:
```vue
export default {
data() {
return {
burgerStyle: {
'--padding': '10px',
'--layer-bg-color': 'yellow',
'--active-layer-bg-color': '#ABABAB',
'--layer-width': '20px',
}
}
}
}
```
### Slots
Burger has one named slot for setting label for accessability [as suggested by Hamburgers author.](https://github.com/jonsuh/hamburgers#accessibility)
| Slot | Description |
| ------- | -------------- |
| `label` | label for a11y |
Example:
```vue
Menu
```
### Events
Burger components emits `updated` event that exposes the active state. It fires after the burger button is clicked. Check the [example](https://github.com/zcuric/vue-burger/blob/master/example/App.vue) for usage.
| Event | Description | Params |
| --------- | ---------------------------------------- | ---------------- |
| `updated` | fired after the burger button is clicked | active (Boolean) |
Example with sync modifier:
```vue
```
## Development
```
# Running examples
npm run serve
# Running tests
npm run test
# Running build
npm run build
```
## Contributing
All contributions are welcome.
## License
MIT @ Zdravko Ćurić [(zcuric)](https://github.com/zcuric)
_Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [flaticon](https://www.flaticon.com/)._