vue侧边栏组件_画布侧边栏Vue组件
vue侧边栏组件
汉堡菜单 (vue-burger-menu)
An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations.
画布侧边栏Vue组件，具有使⽤CSS过渡和SVG路径动画的效果和样式的集合。
To build the examples locally, run:
要在本地构建⽰例，请运⾏：
1yarn
2yarn serve
Then open in a browser
然后在浏览器中打开
安装 (Installation)
npm install vue-burger-menu --save
yarn add vue-burger-menu
⽤法 (Usage)
Items should be passed as child elements of the components
项⽬应作为组件的⼦元素传递
1import { Slide } from 'vue-burger-menu'  // import the CSS transitions you wish to use, in this case we are using `Slide`
2
3export default {
4    components: {
5        Slide // Register your component
6    }
7}
In your template
在您的模板中
1<template>
2    <Slide>
3      <a id="home" href="#">
4        <span>Home</span>
5      </a>
6    </Slide>
7</template>
动画制作 (Animations)
The example above imported slide which renders a menu that slides in on the page when the burger icon is clicked. To use a different animation you can subsitute slide with any of the following
上⾯的⽰例导⼊了slide ，该幻灯⽚呈现了⼀个菜单，当单击汉堡图标时，该菜单会在页⾯上滑动。 要使⽤其他动画，您可以使⽤以下任意⼀种替换幻灯⽚
slide
滑动
ATTENTION - the below animations are in WIP
注意-以下动画在制品中
stack
叠
elastic
有弹性
bubble
泡沫
push
推
pushRotate
pushRotate
scaleDown
缩⼩
scaleRotate
scaleRotate
fallDown
摔倒
reveal
揭⽰
位置 (Position)
The menu opens from left by default. To have it open from the right, use the right prop. It's just a boolean so you don't need to specify a value.
默认情况下，菜单从左打开。 要从右侧打开它，请使⽤right道具。 它只是⼀个布尔值，因此您⽆需指定值。
<Slide right/>
宽度 (Width)
You can specify the width of the menu with the width prop. The default is 300px
您可以使⽤width属性指定菜单的width 。 默认值为300px
<Slide width="400">
开启状态 (Open state)
You can control whether the sidebar is open or closed with the isOpen prop. This is useful if you need to close the menu after a user clicks on an item in it, for example, or if you want to open the menu from some other button in addition to the standard burger icon. The default value is false
您可以使⽤isOpen道具控制边栏是打开还是关闭。 例如，如果您需要在⽤户单击菜单项后关闭菜单，或者要通过标准汉堡图标之外的其他按钮打开菜单，此功能将⾮常有⽤。 默认值为false
1// To render the menu open
2
3<Slide isOpen>
在逃⽣时关闭 (Close on Escape)
By default, the menu will close when the Escape key is pressed. To disable this behavior, you can pass the disableCloseOnEsc prop. This is useful in cases where you want the menu to be open all the time, for example if you're implementing a responsive menu that behaves differently depending on the browser width.
默认情况下，按退出键将关闭菜单。 若要禁⽤此⾏为，可以传递disableCloseOnEsc属性。 这在您希望菜单始终打开的情况下很有⽤，例如，如果您要实现响应式菜单，其⾏为根据浏览器的宽度⽽有所不同。
<Slide disableEsc />
覆盖 (Overlay)
You can turn off the default overlay with noOverlay.
您可以使⽤noOverlay关闭默认的叠加层。
<Slide noOverlay />
造型 (Styling)
Visual styles (color, font etc) need to be supplied with the help of CSS
视觉样式(颜⾊，字体等)需要在CSS的帮助下提供
CSS (CSS)
The component has following helper class
该组件具有以下帮助程序类
1.bm-burger-button {
2      position: fixed;
3      width: 36px;
4      height: 30px;
5      left: 36px;
6      top: 36px;
7      cursor: pointer;
8    }
9    .bm-burger-bars {
10      background-color: #373a47;
11    }
12    .line-style {
13      position: absolute;
14      height: 20%;
15      left: 0;
16      right: 0;
17    }
18    .cross-style {
19      position: absolute;
20      top: 12px;
21      right: 2px;
22      cursor: pointer;
23    }
24    .bm-cross {
25      background: #bdc3c7;
26    }
27    .bm-cross-button {
28      height: 24px;
29      width: 24px;
30    }
31    .bm-menu {
侧边栏怎么打开32      height: 100%; /* 100% Full-height */
33      width: 0; /* 0 width - change this with JavaScript */
34      position: fixed; /* Stay in place */
35      z-index: 1000; /* Stay on top */
36      top: 0;
37      left: 0;
38      background-color: rgb(63, 63, 65); /* Black*/
39      overflow-x: hidden; /* Disable horizontal scroll */
40      padding-top: 60px; /* Place content 60px from the top */
41      transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
42    }
43
44    .bm-overlay {
45      background: rgba(0, 0, 0, 0.3);
46    }
47    .bm-item-list {
48      color: #b8b7ad;
49      margin-left: 10%;
50      font-size: 20px;
51    }
52    .bm-item-list > * {
53      display: flex;
54      text-decoration: none;
55      padding: 0.7em;
56    }
57    .bm-item-list > * > span {
58      margin-left: 10px;
59      font-weight: 700;
60      color: white;
61    }
浏览器⽀持 (Browser Support)
Chrome and Firefox have full support, but Safari and IE have strange behavior for some of the menus. Chrome和Firefox具有完全⽀持，但是Safari和IE在某些菜单上有奇怪的⾏为。
vue侧边栏组件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。