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

create typography documentation with the new template

Browse source
This commit is contained in:
Marcos Moura 2016-11-28 16:17:06 -02:00
parent 4d41949de1
commit 938b70e9e6
2 changed files with 42 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/src/components/DocsComponent.vue
View file

@ -7,7 +7,7 @@
<slot name="description"></slot>
</section>
<section class="api-documentation">
<section class="api-documentation" v-if="$slots.api">
<h2 class="md-headline">API Options</h2>
<slot name="api"></slot>

126
docs/src/pages/ui-elements/Typography.vue
View file

@ -1,96 +1,52 @@
<template>
<single-page label="UI Elements - Typography">
<div>
<div class="column">
<code>.md-display-4</code>
<page-content page-title="Typography">
<docs-component>
<div slot="description">
<h2 class="md-title">Styles</h2>
<p>Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.</p>
<h2 class="md-title">Typeface</h2>
<p>Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.</p>
</div>
<h1 class="md-display-4">Display 4</h1>
</div>
<div>
<div class="column">
<code>.md-display-3</code>
</div>
<h1 class="md-display-3">Display 3</h1>
</div>
<div slot="example">
<example-box card-title="Default">
<div class="demo" slot="demo">
<span class="md-display-4">Display 4</span>
<span class="md-display-3">Display 3</span>
<span class="md-display-2">Display 2</span>
<span class="md-display-1">Display 1</span>
<span class="md-headline">Headline</span>
<span class="md-title">Title</span>
<span class="md-subheading">Subheading</span>
<span class="md-body-2">Body 2</span>
<span class="md-body-1">Body 1</span>
<span class="md-caption">Caption</span>
<a href="#/typography">Link</a>
</div>
<div>
<div class="column">
<code>.md-display-2</code>
<div slot="code">
<code-block lang="xml">
&lt;h1 class=&quot;md-display-4&quot;&gt;Display 4&lt;/h1&gt;
&lt;h1 class=&quot;md-display-3&quot;&gt;Display 3&lt;/h1&gt;
&lt;h1 class=&quot;md-display-2&quot;&gt;Display 2&lt;/h1&gt;
&lt;h1 class=&quot;md-display-1&quot;&gt;Display 1&lt;/h1&gt;
&lt;h1 class=&quot;md-headline&quot;&gt;Headline&lt;/h1&gt;
&lt;h1 class=&quot;md-title&quot;&gt;Title&lt;/h1&gt;
&lt;h1 class=&quot;md-subheading&quot;&gt;Subheading&lt;/h1&gt;
&lt;h1 class=&quot;md-body-2&quot;&gt;Body 2&lt;/h1&gt;
&lt;h1 class=&quot;md-body-1&quot;&gt;Body 1&lt;/h1&gt;
&lt;h1 class=&quot;md-caption&quot;&gt;Caption&lt;/h1&gt;
</code-block>
</div>
</example-box>
</div>
<h1 class="md-display-2">Display 2</h1>
</div>
<div>
<div class="column">
<code>.md-display-1</code>
</div>
<h1 class="md-display-1">Display 1</h1>
</div>
<div>
<div class="column">
<code>.md-headline</code>
</div>
<h1 class="md-headline">Headline</h1>
</div>
<div>
<div class="column">
<code>.md-title</code>
</div>
<h1 class="md-title">Title</h1>
</div>
<div>
<div class="column">
<code>.md-subheading</code>
</div>
<h1 class="md-subheading">Subheading</h1>
</div>
<div>
<div class="column">
<code>.md-body-2</code>
</div>
<h1 class="md-body-2">Body 2</h1>
</div>
<div>
<div class="column">
<code>.md-body-1</code>
</div>
<h1 class="md-body-1">Body 1</h1>
</div>
<div>
<div class="column">
<code>.md-caption</code>
</div>
<h1 class="md-caption">Caption</h1>
</div>
<div>
<div class="column">
<code>Link</code>
</div>
<a>Link</a>
</div>
</single-page>
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>
.column {
width: 175px;
}
.column,
h1 {
display: inline-block;
vertical-align: middle;
}
h1 {
.demo > * {
margin: .5em 0;
display: block;
}
</style>