mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-02 12:34:44 +00:00
create docs for layout
This commit is contained in:
Marcos Moura
parent
e9d0ba83aa
commit
3f8caf7990
3 changed files with 227 additions and 18 deletions
|
|
@ -8,10 +8,10 @@
|
|||
|
||||
<div class="md-title">{{ pageTitle }}</div>
|
||||
|
||||
<div class="release-version">
|
||||
<div class="release-version" v-if="availableDocs.length">
|
||||
<span>Version:</span>
|
||||
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs" v-if="availableDocs.length" v-once>
|
||||
<md-option v-for="doc in availableDocs" :value="doc">{{ doc }}</md-option>
|
||||
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
|
||||
<md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
|
||||
</md-select>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,126 @@
|
|||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.</p>
|
||||
<p>By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the <code>md-gutter</code> property. If you want the automatic calculation the engine will set <code>16px</code> for small screens and then apply <code>24px</code> for medium to large.</p>
|
||||
<p>You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.</p>
|
||||
<p>The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:</p>
|
||||
<md-table slot="properties" class="properties">
|
||||
<md-table-header>
|
||||
<md-table-row>
|
||||
<md-table-head>Name</md-table-head>
|
||||
<md-table-head>Size</md-table-head>
|
||||
<md-table-head>Description</md-table-head>
|
||||
</md-table-row>
|
||||
</md-table-header>
|
||||
|
||||
<md-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell><code>xsmall</code></md-table-cell>
|
||||
<md-table-cell>600px</md-table-cell>
|
||||
<md-table-cell>For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell><code>small</code></md-table-cell>
|
||||
<md-table-cell>960px</md-table-cell>
|
||||
<md-table-cell>For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell><code>medium</code></md-table-cell>
|
||||
<md-table-cell>1280px</md-table-cell>
|
||||
<md-table-cell>For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell><code>large</code></md-table-cell>
|
||||
<md-table-cell>1920px</md-table-cell>
|
||||
<md-table-cell>For screens who have between of 1280px and 1920px wide. For large desktop monitors.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell><code>xlarge</code></md-table-cell>
|
||||
<md-table-cell>>1920px</md-table-cell>
|
||||
<md-table-cell>For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.</md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
<api-table name="md-layout">
|
||||
<md-table slot="properties" class="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>
|
||||
|
||||
<md-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-tag</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The output tag. Default <code>div</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-gutter</md-table-cell>
|
||||
<md-table-cell><code>Boolean|Number</code></md-table-cell>
|
||||
<md-table-cell>Apply a gutter space to direct childs of the element that have this property. If <code>true</code> the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts <code>8</code>|<code>16</code>|<code>24</code>|<code>40</code>. Default <code>false</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-row</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Create a row container. All child will be side by side.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-row-{type}</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Create a row container on screen sizes less than or equal to given breakpoint. Example: <code>md-row-large</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-column</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Create a column container. All child will be one underneath the other.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-column-{type}</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Create a column container on screen sizes less than or equal to given breakpoint. Example: <code>md-column-small</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-hide-{type}</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: <code>md-hide-medium</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-flex</md-table-cell>
|
||||
<md-table-cell><code>Boolean|Number</code></md-table-cell>
|
||||
<md-table-cell>Create a flexible child. If <code>true</code> the child element will grow to fill the empty space available on the parent element. If <code>Number</code> the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: <code>true</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-flex-{type}</md-table-cell>
|
||||
<md-table-cell><code>Boolean|Number</code></md-table-cell>
|
||||
<md-table-cell>Create a flexible child on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-small="33"</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-flex-offset</md-table-cell>
|
||||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>Create a empty space before the actual child. Accepts the same value of <code>md-flex</code> Example: <code>md-flex-offset="50"</code></md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
</div>
|
||||
|
||||
<div slot="example">
|
||||
|
|
@ -131,36 +251,100 @@
|
|||
</example-box>
|
||||
|
||||
<example-box card-title="Gutters">
|
||||
<div class="layout-demo grid" slot="demo">
|
||||
<div class="layout-demo grid gutter" slot="demo">
|
||||
<md-layout class="no-gutter color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="8" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout>
|
||||
<span>8px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>8px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>8px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>8px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>8px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>8px</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-gutter="16" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout>
|
||||
<span>16px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>16px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>16px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>16px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>16px</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="24" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout>
|
||||
<span>24px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>24px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>24px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>24px</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="40" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout>
|
||||
<span>40px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>40px</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>40px</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-gutter class="color">
|
||||
<md-layout>
|
||||
<span>Automatic</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<span>Automatic</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
</div>
|
||||
|
||||
|
|
@ -195,6 +379,13 @@
|
|||
padding: 16px;
|
||||
}
|
||||
|
||||
.gutter .color .md-layout {
|
||||
color: rgba(#000, .54);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-indent: 8px;
|
||||
}
|
||||
|
||||
.color {
|
||||
$sizes: (8, 16, 24, 40);
|
||||
|
||||
|
|
@ -266,4 +457,10 @@
|
|||
.color-orange:before {
|
||||
background-color: #FF9800 !important;
|
||||
}
|
||||
|
||||
.properties {
|
||||
table tr td:first-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,18 @@
|
|||
@include layout();
|
||||
|
||||
|
||||
/* Container */
|
||||
|
||||
.md-layout.md-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
|
||||
&.md-centered {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Gutter Size */
|
||||
|
||||
@mixin layout-gutter($margin: -12px, $padding: 12px) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue