Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-23 09:20:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update menu examples

Browse source
This commit is contained in:
Marcos Moura 2016-11-14 23:28:58 -02:00
parent 29e94d72d6
commit 2befdb2d63
1 changed files with 158 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
docs/src/pages/components/Menu.vue
View file

@ -163,7 +163,165 @@
</div>
<div slot="code">
<demo-example label="Directions">
&lt;md-menu&gt;
&lt;md-button md-menu-trigger&gt;Bottom Right&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-direction=&quot;bottom left&quot;&gt;
&lt;md-button md-menu-trigger&gt;Bottom Left&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item disabled&gt;My Item 3&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 4&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-direction=&quot;top left&quot;&gt;
&lt;md-button md-menu-trigger&gt;Top Left&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-direction=&quot;top right&quot;&gt;
&lt;md-button md-menu-trigger&gt;Top Right&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
</demo-example>
<demo-example label="Sizes">
&lt;md-menu&gt;
&lt;md-button md-menu-trigger&gt;Default&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-size=&quot;1&quot;&gt;
&lt;md-button md-menu-trigger&gt;Size 1&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-size=&quot;2&quot;&gt;
&lt;md-button md-menu-trigger&gt;Size 2&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-size=&quot;4&quot;&gt;
&lt;md-button md-menu-trigger&gt;Size 4&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-size=&quot;5&quot;&gt;
&lt;md-button md-menu-trigger&gt;Size 5&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-size=&quot;7&quot;&gt;
&lt;md-button md-menu-trigger&gt;Size 7&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
</demo-example>
<demo-example label="List Icons">
&lt;md-menu&gt;
&lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
&lt;md-icon&gt;more_vert&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-size=&quot;4&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;span&gt;My Item 1&lt;/span&gt;
&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;span&gt;My Item 2&lt;/span&gt;
&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;span&gt;My Item 3&lt;/span&gt;
&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-direction=&quot;bottom left&quot; md-size=&quot;4&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
&lt;md-icon&gt;near_me&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;
&lt;span&gt;Find on map&lt;/span&gt;
&lt;md-icon&gt;near_me&lt;/md-icon&gt;
&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;
&lt;span&gt;Call&lt;/span&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
</demo-example>
</div>
<div slot="api">