Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-20 21:11:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add speed dial code examples

Browse source
This commit is contained in:
Marcos Moura 2017-02-08 01:43:23 -02:00
parent 5e48e2048d
commit 8a82f26395
1 changed files with 86 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
docs/src/pages/components/SpeedDial.vue
View file

@ -108,7 +108,35 @@
<div slot="code">
<code-block lang="xml">
&lt;md-speed-dial md-open=&quot;hover&quot; class=&quot;md-fab-bottom-left&quot; md-theme=&quot;purple&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; md-fab-trigger&gt;
&lt;md-icon md-icon-morph&gt;close&lt;/md-icon&gt;
&lt;md-icon&gt;share&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;email&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;content_copy&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-speed-dial&gt;
&lt;md-speed-dial md-mode=&quot;scale&quot; class=&quot;md-fab-bottom-right&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; md-fab-trigger&gt;
&lt;md-icon md-icon-morph&gt;close&lt;/md-icon&gt;
&lt;md-icon&gt;share&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-mini md-clean&quot;&gt;
&lt;md-icon&gt;email&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-mini md-clean&quot;&gt;
&lt;md-icon&gt;content_copy&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-speed-dial&gt;
</code-block>
</div>
</example-box>
@ -178,7 +206,65 @@
<div slot="code">
<code-block lang="xml">
&lt;md-speed-dial md-open=&quot;hover&quot; md-direction=&quot;bottom&quot; class=&quot;md-fab-top-left&quot; md-theme=&quot;light-blue&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; md-fab-trigger&gt;
&lt;md-icon md-icon-morph&gt;event&lt;/md-icon&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;note_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;alarm_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-speed-dial&gt;
&lt;md-speed-dial md-open=&quot;hover&quot; md-direction=&quot;left&quot; class=&quot;md-fab-top-right&quot; md-theme=&quot;light-blue&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; md-fab-trigger&gt;
&lt;md-icon md-icon-morph&gt;event&lt;/md-icon&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;note_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;alarm_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-speed-dial&gt;
&lt;md-speed-dial md-open=&quot;hover&quot; md-direction=&quot;top&quot; class=&quot;md-fab-bottom-right&quot; md-theme=&quot;light-blue&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; md-fab-trigger&gt;
&lt;md-icon md-icon-morph&gt;event&lt;/md-icon&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;note_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;alarm_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-speed-dial&gt;
&lt;md-speed-dial md-open=&quot;hover&quot; md-direction=&quot;right&quot; class=&quot;md-fab-bottom-left&quot; md-theme=&quot;light-blue&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; md-fab-trigger&gt;
&lt;md-icon md-icon-morph&gt;event&lt;/md-icon&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;note_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini md-clean&quot;&gt;
&lt;md-icon&gt;alarm_add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;/md-speed-dial&gt;
</code-block>
</div>
</example-box>
@ -192,11 +278,3 @@
height: 250px;
}
</style>
<script>
export default {
data: () => ({
})
};
</script>