Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oleksiikhr/vue-stripe-menu
Creating a navigation menu with animations like on Stripe
https://github.com/oleksiikhr/vue-stripe-menu
component dropdown menu navigation stripe stripe-elements ui-components vue
Last synced: 7 days ago
JSON representation
Creating a navigation menu with animations like on Stripe
- Host: GitHub
- URL: https://github.com/oleksiikhr/vue-stripe-menu
- Owner: oleksiikhr
- License: mit
- Created: 2019-10-05T20:23:13.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-08-03T06:27:04.000Z (over 1 year ago)
- Last Synced: 2024-05-29T09:26:03.712Z (7 months ago)
- Topics: component, dropdown, menu, navigation, stripe, stripe-elements, ui-components, vue
- Language: TypeScript
- Homepage: https://oleksiikhr.github.io/vue-stripe-menu/
- Size: 6.94 MB
- Stars: 531
- Watchers: 3
- Forks: 39
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Vue Stripe Menu
> Creating a navigation menu with animations like on Stripe
**Only for Vue 3** ([changelog](https://github.com/oleksiikhr/vue-stripe-menu/blob/main/CHANGELOG.md#200-2021-04-09))
[Documentation](https://oleksiikhr.github.io/vue-stripe-menu/)
[Vue 2 - Branch](https://github.com/oleksiikhr/vue-stripe-menu/tree/vue2)
## How to install
Install the library in your project:
```shell
$ npm i -D vue-stripe-menu
// $ yarn add -D vue-stripe-menu
// $ pnpm add -D vue-stripe-menu
```
Import components:
```js
// >>> Install globally - .js file <<<
import { createApp } from 'vue'
import VueStripeMenu from 'vue-stripe-menu'
createApp({}).use(VueStripeMenu)
// >>> Install locally - .vue file <<<
import { VsmMenu, VsmMob } from 'vue-stripe-menu'
export default {
components: {
VsmMenu, VsmMob
}
}
// Optionally if you don't want to use @import in your
// section (because its scoped for example):
// import 'vue-stripe-menu/css'
```
Add the component:
```vue
<template>
<vsm-menu :menu="menu">
<template #default="{ item }">
<div style="width: 300px; padding: 30px">
Dropdown content - {{ item.title }}
</div>
</template>
<template #before-nav>
<li class="vsm-mob-full">
Left side
</li>
</template>
<template #after-nav>
<li class="vsm-mob-hide">
Right side
</li>
<vsm-mob>
<div style="min-height: 200px; padding: 30px">
Mobile Content
</div>
</vsm-mob>
</template>
</vsm-menu>
</template>
<script>
export default {
data() {
return {
menu: [
{ title: 'Item1', dropdown: 'dropdown-1' },
{ title: 'Item2', dropdown: 'dropdown-2' },
{ title: 'Just link', attributes: { href: '#clicked' } },
]
}
}
}
</script>
```
Add css/scss styles:
```scss
// >>> SCSS style (required sass-loader, node-sass) <<<
// https://github.com/oleksiikhr/vue-stripe-menu/blob/main/src/scss/_variables.scss
// $vsm-transition: .5s;
@import "~vue-stripe-menu/scss";
// >>> CSS style <<<
// @import 'vue-stripe-menu/css';
.vsm-menu {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
.vsm-nav {
margin: 0 10px;
}
.vsm-link-container {
display: flex;
flex: 1 1 auto;
justify-content: center;
}
@media screen and (max-width: 768px) {
.vsm-mob-show {
display: block;
}
.vsm-mob-hide {
display: none;
}
.vsm-mob-full {
flex-grow: 1;
}
}
```
## Full Example
```vue
<template>
<vsm-menu
:menu="menu"
element="header"
handler="hover"
align="center"
:screen-offset="10"
:dropdown-offset="0"
@open-dropdown="onOpenDropdown"
@close-dropdown="onCloseDropdown"
>
<template #default="{ item }">
<!--Dropdown content of each menu item with a "dropdown" property-->
<!--You can replace it with a separate component if each menu item has its own style-->
<!--Necessarily need to have at least one element within the slot-->
<!--An alternate background will be applied from the 2nd element-->
<div style="width: 300px; padding: 30px">
Header: {{ item }}
</div>
<div style="padding: 30px">
Second element
</div>
</template>
<template #before-nav>
<!--Image or svg of website logo-->
<li style="width: 50px; height: 50px">
<img
src="https://vuejs.org/images/logo.png"
alt="My Logo"
>
</li>
</template>
<template #title="data">
<!--Display menu items through slots-->
{{ data.item.title }}
</template>
<template #after-nav>
<!--Mobile Burger, buttons, etc-->
<li class="vsm-mob-hide">
<button>My Button</button>
</li>
<!--Set "display: block" for the .vsm-mob-show class to display content-->
<vsm-mob>Mobile Content</vsm-mob>
</template>
</vsm-menu>
</template>
<script>
/*
* Inside #after-nav and #before-nav it is recommended to use
* to maintain the correct HTML structure:
* <li><!--Content--></li>
*/
export default {
data() {
return {
menu: [
{
// display menu item (can be overridden with title slot)
title: 'News',
// this element now has dropdown content
dropdown: 'news',
// don't want a button element? Pass HTMLElement or global component
// (pass only as a string, component must be globally accessible)
element: 'span', // div, router-link, nuxt-link, custom-component
// offset the position of the dropdown menu
align: 'center',
// menu item can accept all attributes
attributes: {
// I want more classes! No problem
// string, array, object, not matter
class: ['my-class1', { 'my-class2': true }],
// Custom attributes
'data-big': 'yes'
},
// add some events?
listeners: {
// all possible native events
mouseover: (evt) => {
console.log('news hover', evt)
}
},
// just extra properties in the object
customAttribute: true,
},
{
title: 'External Link',
attributes: {
href: 'https://github.com/oleksiikhr/vue-stripe-menu',
target: '_blank'
}
}
// ...
]
}
},
methods: {
onOpenDropdown() {
console.log('onOpenDropdown')
},
onCloseDropdown() {
console.log('onCloseDropdown')
}
}
}
</script>
```
## API
### [Menu] Props
| Property | Parameters | Description | Type | Default | Required |
|--------------------|---------------------|-----------------------------------------------------|----------------|---------|----------|
| menu | MenuObject | Description of the menu items | array | | true |
| element | | HTMLElement for the root element | string | header | false |
| screen-offset | | Offset from the window screen | string, number | header | false |
| dropdown-offset | | Offset from the dropdown menu | string, number | header | false |
| transition-timeout | | Animation speed in ms (equals $vsm-transition scss) | string, number | 250 | false |
| handler | hover, click | On what event to open dropdown menu | string | hover | false |
| align | center, left, right | Offset the position of the dropdown menu | string | center | false |
### [Menu] Events
| Name | Description | Return |
|----------------|--------------------------------------------------------|-------------|
| open-dropdown | Open the dropdown menu, return the active HTMLElement | HTMLElement |
| close-dropdown | Close the dropdown menu, return the closed HTMLElement | HTMLElement |
### [Menu] Slots
| Name | Parameters | Description |
|------------|-----------------|----------------------------------------------------|
| default | MenuItem, index | The main content for the dropdown list |
| before-nav | before-nav | Content to the left of the list |
| after-nav | after-nav | Content to the right of the list |
| title | MenuItem, index | Replace the output of menu\[i].title with your own |
### [Menu] Methods
`this.$refs[myVsmRef].closeDropdown()`
| Name | Parameters | Description | Return |
|----------------|-------------|------------------------------------------------------------|--------|
| toggleDropdown | HTMLElement | Open dropdown menu, if it is an active HTMLElement - close | |
| openDropdown | HTMLElement | Open dropdown menu for selected HTMLElement | |
| closeDropdown | | Close active dropdown menu | |
| resizeDropdown | | Recalculate size and location of dropdown menu | |
### [Menu] Properties
`this.$refs[myVsmRef].itemsWithDropdown`
| Name | Description | Return |
|------------------------|-------------------------------------------------|--------------------------------------------------------------|
| itemsWithDropdown | Filtered menu items with "dropdown" property | Array\<MenuObject> |
| elementsWithDropdown | List of HTMLElements that have dropdown content | Array\<MenuObject> |
| dropdownContainerItems | List of dropdown HTMLElements | Array<{el: HTMLElement, name: string, content: HTMLElement}> |
### [Menu] MenuObject (menu props)
| Property | Type | Description |
|------------|--------|---------------------------------------------------------------------------------------------------------|
| title | string | Menu item name. Can also be redefined through the slot |
| dropdown | string | Unique value indicates that this item has a dropdown menu |
| align | string | Offset the position of the dropdown menu (center/left/right) |
| element | string | HTMLElement or global component in the header element, if not specified, it will be <button /> or <a /> |
| attributes | object | All attributes to be assigned in the header element (v-bind) |
| listeners | object | All events to be assigned in the header element (v-on) |
### [Mob] Props
| Property | Parameters | Description | Type | Default | Required |
|----------|------------|--------------------------------------|---------|---------|----------|
| v-model | | The state of the open/close the menu | boolean | false | false |
### [Mob] Slots
| Name | Parameters | Description |
|-----------|------------|--------------------------|
| default | | Main content |
| hamburger | | Replace hamburger button |
| close | | Replace close button |
### [Mob] Methods
`this.$refs[myVsmMobRef].closeDropdown()`
| Name | Parameters | Description | Return |
|---------------|------------|---------------------|--------|
| closeDropdown | | Close dropdown menu | |
### Classes
| Name | Description |
|--------------|------------------------------------|
| vsm-mob-show | Show HTMLElements in mobile design |
| vsm-mob-hide | Hide HTMLElements in mobile design |
## Contributing
Please make sure to read the [Contributing Guide](https://github.com/oleksiikhr/vue-stripe-menu/blob/main/.github/CONTRIBUTING.md) before making a pull request.
## Changelog
Detailed changes for each release are documented in the [CHANGELOG.md](https://github.com/oleksiikhr/vue-stripe-menu/blob/main/CHANGELOG.md).
## License
[MIT](https://opensource.org/licenses/MIT)