Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

create whiteframe documentation with the new template

Browse source
This commit is contained in:
Marcos Moura 2016-11-25 19:44:34 -02:00
parent 487eb83bf7
commit 55c2e5202f
1 changed files with 99 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
docs/src/pages/components/Whiteframe.vue
View file

@ -1,82 +1,107 @@
<template>
<demo-page label="Components - Whiteframe">
<div slot="examples" class="whiteframe-list">
<demo-example label="Default">
<md-whiteframe md-elevation="1">1dp</md-whiteframe>
<md-whiteframe md-elevation="2">2dp</md-whiteframe>
<md-whiteframe md-elevation="3">3dp</md-whiteframe>
<md-whiteframe md-elevation="4">4dp</md-whiteframe>
<md-whiteframe md-elevation="5">5dp</md-whiteframe>
<md-whiteframe md-elevation="6">6dp</md-whiteframe>
<md-whiteframe md-elevation="7">7dp</md-whiteframe>
<md-whiteframe md-elevation="8">8dp</md-whiteframe>
<md-whiteframe md-elevation="9">9dp</md-whiteframe>
<md-whiteframe md-elevation="10">10dp</md-whiteframe>
<md-whiteframe md-elevation="11">11dp</md-whiteframe>
<md-whiteframe md-elevation="12">12dp</md-whiteframe>
<md-whiteframe md-elevation="13">13dp</md-whiteframe>
<md-whiteframe md-elevation="14">14dp</md-whiteframe>
<md-whiteframe md-elevation="15">15dp</md-whiteframe>
<md-whiteframe md-elevation="16">16dp</md-whiteframe>
<md-whiteframe md-elevation="17">17dp</md-whiteframe>
<md-whiteframe md-elevation="18">18dp</md-whiteframe>
<md-whiteframe md-elevation="19">19dp</md-whiteframe>
<md-whiteframe md-elevation="20">20dp</md-whiteframe>
<md-whiteframe md-elevation="21">21dp</md-whiteframe>
<md-whiteframe md-elevation="22">22dp</md-whiteframe>
<md-whiteframe md-elevation="23">23dp</md-whiteframe>
<md-whiteframe md-elevation="24">24dp</md-whiteframe>
</demo-example>
</div>
<page-content page-title="Components - Whiteframe">
<docs-component>
<div slot="description">
<p>The following classes can be applied to change the color palette:</p>
<ul class="md-body-2">
<li><code>md-accent</code></li>
<li><code>md-warn</code></li>
<li><code>md-transparent</code></li>
</ul>
</div>
<div slot="code">
<demo-example label="Default">
<code-block lang="xml">
&lt;md-whiteframe md-elevation=&quot;1&quot;&gt;1dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;2&quot;&gt;2dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;3&quot;&gt;3dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;4&quot;&gt;4dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;5&quot;&gt;5dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;6&quot;&gt;6dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;7&quot;&gt;7dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;8&quot;&gt;8dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;9&quot;&gt;9dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;10&quot;&gt;10dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;11&quot;&gt;11dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;12&quot;&gt;12dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;13&quot;&gt;13dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;14&quot;&gt;14dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;15&quot;&gt;15dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;16&quot;&gt;16dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;17&quot;&gt;17dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;18&quot;&gt;18dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;19&quot;&gt;19dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;20&quot;&gt;20dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;21&quot;&gt;21dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;22&quot;&gt;22dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;23&quot;&gt;23dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;24&quot;&gt;24dp&lt;/md-whiteframe&gt;
</code-block>
</demo-example>
</div>
<div slot="api">
<api-table name="md-whiteframe">
<md-table slot="properties">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<div slot="api">
<md-table-body>
<md-table-row>
<md-table-cell>md-elevation</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>The amount of elevation. From 0 to 24. <br>Default: <code>1</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>
</div>
</demo-page>
<div slot="example">
<example-box card-title="Default">
<div slot="demo">
<md-whiteframe>1dp</md-whiteframe>
<md-whiteframe md-elevation="2">2dp</md-whiteframe>
<md-whiteframe md-elevation="3">3dp</md-whiteframe>
<md-whiteframe md-elevation="4">4dp</md-whiteframe>
<md-whiteframe md-elevation="5">5dp</md-whiteframe>
<md-whiteframe md-elevation="6">6dp</md-whiteframe>
<md-whiteframe md-elevation="7">7dp</md-whiteframe>
<md-whiteframe md-elevation="8">8dp</md-whiteframe>
<md-whiteframe md-elevation="9">9dp</md-whiteframe>
<md-whiteframe md-elevation="10">10dp</md-whiteframe>
<md-whiteframe md-elevation="11">11dp</md-whiteframe>
<md-whiteframe md-elevation="12">12dp</md-whiteframe>
<md-whiteframe md-elevation="13">13dp</md-whiteframe>
<md-whiteframe md-elevation="14">14dp</md-whiteframe>
<md-whiteframe md-elevation="15">15dp</md-whiteframe>
<md-whiteframe md-elevation="16">16dp</md-whiteframe>
<md-whiteframe md-elevation="17">17dp</md-whiteframe>
<md-whiteframe md-elevation="18">18dp</md-whiteframe>
<md-whiteframe md-elevation="19">19dp</md-whiteframe>
<md-whiteframe md-elevation="20">20dp</md-whiteframe>
<md-whiteframe md-elevation="21">21dp</md-whiteframe>
<md-whiteframe md-elevation="22">22dp</md-whiteframe>
<md-whiteframe md-elevation="23">23dp</md-whiteframe>
<md-whiteframe md-elevation="24">24dp</md-whiteframe>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-whiteframe&gt;1dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;2&quot;&gt;2dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;3&quot;&gt;3dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;4&quot;&gt;4dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;5&quot;&gt;5dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;6&quot;&gt;6dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;7&quot;&gt;7dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;8&quot;&gt;8dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;9&quot;&gt;9dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;10&quot;&gt;10dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;11&quot;&gt;11dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;12&quot;&gt;12dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;13&quot;&gt;13dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;14&quot;&gt;14dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;15&quot;&gt;15dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;16&quot;&gt;16dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;17&quot;&gt;17dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;18&quot;&gt;18dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;19&quot;&gt;19dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;20&quot;&gt;20dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;21&quot;&gt;21dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;22&quot;&gt;22dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;23&quot;&gt;23dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;24&quot;&gt;24dp&lt;/md-whiteframe&gt;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style lang="scss">
.whiteframe-list .demo-example .demo-example-body {
padding-bottom: 48px;
.md-whiteframe {
width: 100px;
height: 100px;
margin: 24px 12px 12px 24px;
display: inline-flex;
justify-content: center;
align-items: center;
}
<style lang="scss" scoped>
.md-whiteframe {
width: 100px;
height: 100px;
margin: 24px 12px 12px 24px;
display: inline-flex;
justify-content: center;
align-items: center;
}
</style>