mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-20 21:11:52 +00:00
69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
<template>
|
|
<demo-page label="Components - Menu">
|
|
<div slot="examples">
|
|
<demo-example label="Default" height="400">
|
|
<md-menu>
|
|
<md-button class="md-icon-button" md-menu-trigger>
|
|
<md-icon>more_vert</md-icon>
|
|
</md-button>
|
|
|
|
<md-menu-content>
|
|
<md-menu-item>My Item 1</md-menu-item>
|
|
<md-menu-item>My Item 2</md-menu-item>
|
|
<md-menu-item>My Item 3</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
|
|
<md-menu md-direction="bottom left">
|
|
<md-button class="md-icon-button" md-menu-trigger>
|
|
<md-icon>more_vert</md-icon>
|
|
</md-button>
|
|
|
|
<md-menu-content>
|
|
<md-menu-item>My Item 1</md-menu-item>
|
|
<md-menu-item>My Item 2</md-menu-item>
|
|
<md-menu-item>My Item 3</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
|
|
<md-menu md-direction="top left">
|
|
<md-button class="md-icon-button" md-menu-trigger>
|
|
<md-icon>more_vert</md-icon>
|
|
</md-button>
|
|
|
|
<md-menu-content>
|
|
<md-menu-item>My Item 1</md-menu-item>
|
|
<md-menu-item>My Item 2</md-menu-item>
|
|
<md-menu-item>My Item 3</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
|
|
<md-menu md-direction="top right">
|
|
<md-button class="md-icon-button" md-menu-trigger>
|
|
<md-icon>more_vert</md-icon>
|
|
</md-button>
|
|
|
|
<md-menu-content>
|
|
<md-menu-item>My Item 1</md-menu-item>
|
|
<md-menu-item>My Item 2</md-menu-item>
|
|
<md-menu-item>My Item 3</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
</demo-example>
|
|
</div>
|
|
|
|
<div slot="code">
|
|
|
|
</div>
|
|
|
|
<div slot="api">
|
|
|
|
</div>
|
|
</demo-page>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.md-menu {
|
|
margin-right: 50px;
|
|
}
|
|
</style>
|