@acelords/vue-burger-menu 中文文档教程

Question

Vue Burger Menu

一个画布外侧边栏 Vue 组件，具有使用 CSS 过渡和 SVG 路径动画的效果和样式集合。

Demo & examples

现场演示 - https://vue-burger-menu.netlify.com/

要在本地构建示例，请运行：

npm i
npm run serve

yarn
yarn serve

然后打开 localhost:8080 在浏览器中

Installation

npm install @acelords/vue-burger-menu --save

yarn add @acelords/vue-burger-menu

Usage

项目应作为组件的子元素传递

import { Slide } from '@acelords/vue-burger-menu'  // import the CSS transitions you wish to use, in this case we are using `Slide`

export default {
    components: {
        Slide // Register your component
    }
}

在您的模板

<template>
    <Slide>
      <a id="home" href="#">
        <span>Home</span>
      </a>

      <template v-slot:button>
        <span class="bm-burger-bars line-style" :style="{top:20 * (index * 2) + '%'}" v-for="(x, index) in 3" :key="index"></span>
      </template>

      <template v-slot:close>
        <span v-for="(x, index) in 2" :key="x" class="bm-cross" :style="{ position: 'absolute', width: '3px', height: '14px',transform: index === 1 ? 'rotate(45deg)' : 'rotate(-45deg)'}"></span>
      </template>
    </Slide>
</template>

Animations

中 上面的示例导入了 slide，它呈现一个菜单，当单击汉堡图标时，该菜单会滑入页面。 要使用不同的动画，您可以用以下任何一种代替幻灯片

• Slide
• ScaleDown
• ScaleRotate
• Reveal
• Push
• PushRotate

注意 - 以下动画处于 WIP 中

• FallDown
• Stack
• Elastic
• Bubble

Properties

一些动画需要您页面上的某些其他元素

• Page wrapper - an element wrapping the rest of the content on yur page, placed after the menu component

<Menu/>

<main id="page-wrap">
.
.
</main>

• Outer container called app - an element containing everything including the menu component

<div id="app">
    <Menu/>
    <main id="page-wrap">
    .
    .
    .
    </main>
</div>

检查此表以查看哪些动画需要这些元素：

Animation	pageWrapId	appId
Slide
Push	✓	✓
PushRotate	✓	✓
ScaleDown	✓	✓
ScaleRotate	✓	✓
Reveal	✓	✓

Position

默认情况下，菜单从左侧打开。 要从右侧打开它，请使用 right 属性。 它只是一个布尔值，因此您无需指定值。

<Slide right/>

Width

您可以使用 width 属性指定菜单的宽度。 默认为 300px

<Slide width="400">

Open state

您可以使用 isOpen 属性控制侧边栏是打开还是关闭。 例如，如果您需要在用户单击菜单中的某个项目后关闭菜单，或者如果您想要从除标准汉堡图标之外的其他按钮打开菜单，这将很有用。 默认值为 false

// To render the menu open

<Slide isOpen>

Menu events

如果您想在菜单打开或关闭时收到通知，您可以使用 openMenu 和 closeMenu 通知。 这样您就可以在菜单打开或关闭时更新您的应用程序状态

// To bind the open and close events

<Slide
  @openMenu="handleOpenMenu"
  @closeMenu="handleCloseMenu"
>

Close on Outside Click

您可以在使用 disableOutsideClick 触发外部点击时关闭菜单关闭。

<Slide disableOutsideClick>

Close on Escape

默认情况下，菜单将在按下 Escape 键时关闭。 要禁用此行为，您可以传递 disableCloseOnEsc 属性。 这在您希望菜单始终打开的情况下很有用，例如，如果您正在实现一个根据浏览器宽度而表现不同的响应式菜单。

<Slide disableEsc />

Close on Navigation

默认情况下，单击菜单内的链接时不会关闭菜单。 要禁用此行为，您可以传递 closeOnNavigation 道具。 这在您希望在单击导航链接时关闭菜单的情况下很有用，因为这样可以避免用户必须额外单击才能关闭菜单。

<Slide :closeOnNavigation="true" />

Overlay

您可以使用 noOverlay 关闭默认覆盖。

<Slide noOverlay />

Burger Icon and Cross Icon

您可以通过将 burgerIcon 和 crossIcon 传递给 false 来禁用这两个图标。 如果您想让菜单保持打开状态并且不希望用户关闭菜单，这会很有用

<Slide :burgerIcon="false" :crossIcon="false"/>

Styling

视觉样式（颜色、字体等）需要在 CSS 的帮助下提供

CSS

该组件具有以下辅助类

 .bm-burger-button {
      position: fixed;
      width: 36px;
      height: 30px;
      left: 36px;
      top: 36px;
      cursor: pointer;
    }
    .bm-burger-bars {
      background-color: #373a47;
    }
    .line-style {
      position: absolute;
      height: 20%;
      left: 0;
      right: 0;
    }
    .cross-style {
      position: absolute;
      top: 12px;
      right: 2px;
      cursor: pointer;
    }
    .bm-cross {
      background: #bdc3c7;
    }
    .bm-cross-button {
      height: 24px;
      width: 24px;
    }
    .bm-menu {
      height: 100%; /* 100% Full-height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 1000; /* Stay on top */
      top: 0;
      left: 0;
      background-color: rgb(63, 63, 65); /* Black*/
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 60px; /* Place content 60px from the top */
      transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
    }

    .bm-overlay {
      background: rgba(0, 0, 0, 0.3);
    }
    .bm-item-list {
      color: #b8b7ad;
      margin-left: 10%;
      font-size: 20px;
    }
    .bm-item-list > * {
      display: flex;
      text-decoration: none;
      padding: 0.7em;
    }
    .bm-item-list > * > span {
      margin-left: 10px;
      font-weight: 700;
      color: white;
    }

Browser Support

Chrome 和 Firefox 具有完全支持，但 Safari 和 IE 对于某些菜单有奇怪的行为。

Author

© Mohit Bajoria

License

麻省理工学院

喜欢吗？ 它