vue-material/docs/src/pages/components/Menu.vue

70 lines
1.9 KiB
Vue
Raw Normal View History

2016-10-19 04:25:00 +00:00
<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>
2016-10-20 04:40:20 +00:00
<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>
2016-10-19 04:25:00 +00:00
</demo-example>
</div>
<div slot="code">
</div>
<div slot="api">
</div>
</demo-page>
</template>
2016-10-20 04:40:20 +00:00
<style lang="scss" scoped>
.md-menu {
margin-right: 50px;
}
</style>