angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
225 lines (205 loc) • 6.06 kB
HTML
<div ng-controller="LayoutCtrl" class="layout-content layout-options" ng-cloak>
<docs-demo demo-title="Responsive Layout" class="small-demo colorNested">
<demo-file name="index.html">
<div layout="row" layout-sm="column">
<div flex>
I'm above on mobile, and to the left on larger devices.
</div>
<div flex>
I'm below on mobile, and to the right on larger devices.
</div>
</div>
</demo-file>
</docs-demo>
<p>
See the <a href="layout/container">Container Elements</a> page for a basic explanation
of layout directives.
<br/>
To make your layout change depending upon the device screen size, there are
other <code>layout</code> directives available:
</p>
<table class="md-api-table">
<thead>
<tr>
<th>API</th>
<th>Activates when device</th>
</tr>
</thead>
<tr>
<td>layout</td>
<td>Sets default layout direction unless overridden by another breakpoint.</td>
</tr>
<tr>
<td>layout-xs</td>
<td>width < <b>600</b>px</td>
</tr>
<tr>
<td>layout-gt-xs</td>
<td>width >= <b>600</b>px</td>
</tr>
<tr>
<td>layout-sm</td>
<td><b>600</b>px <= width < <b>960</b>px</td>
</tr>
<tr>
<td>layout-gt-sm</td>
<td>width >= <b>960</b>px</td>
</tr>
<tr>
<td>layout-md</td>
<td><b>960</b>px <= width < <b>1280</b>px</td>
</tr>
<tr>
<td>layout-gt-md</td>
<td>width >= <b>1280</b>px</td>
</tr>
<tr>
<td>layout-lg</td>
<td><b>1280</b>px <= width < <b>1920</b>px</td>
</tr>
<tr>
<td>layout-gt-lg</td>
<td>width >= <b>1920</b>px</td>
</tr>
<tr>
<td>layout-xl</td>
<td>width >= <b>1920</b>px</td>
</tr>
</table>
<br/>
<br/>
<hr>
<br/>
<h3>Layout Margin, Padding, Wrap and Fill</h3>
<br/>
<docs-demo demo-title="Layout Margin, Padding, and Fill" class="small-demo colorNested-noPad">
<demo-file name="index.html">
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
<div layout="row" layout-padding>
<div flex>Parent layout and this element have padding.</div>
</div>
<div layout="row" layout-fill style="min-height: 224px;">
<div flex>Parent layout is set to fill available space.</div>
</div>
<div layout="row" layout-padding layout-margin layout-fill style="min-height: 224px;">
<div flex>I am using all three at once.</div>
</div>
</demo-file>
</docs-demo>
<p>
<code>layout-margin</code> adds margin around each <code>flex</code> child. It also adds a margin to the layout
container itself.
<br/>
<code>layout-padding</code> adds padding inside each <code>flex</code> child. It also adds padding to the layout
container itself.
<br/>
<code>layout-fill</code> forces the layout element to fill its parent container.
</p>
<p>Here is a non-trivial group of <code>flex</code> elements using <code>layout-wrap</code></p>
<docs-demo demo-title="Wrap" class="small-demo colorNested-noPad">
<demo-file name="index.html">
<div layout="row" layout-wrap>
<div flex="33">[flex=33]</div>
<div flex="66">[flex=66]</div>
<div flex="66">[flex=66]</div>
<div flex="33">[flex=33]</div>
<div flex="33">[flex=33]</div>
<div flex="33">[flex=33]</div>
<div flex="33">[flex=33]</div>
</div>
</demo-file>
</docs-demo>
<p>
<code>layout-wrap</code> allows <code>flex</code> children to wrap within the container if the elements use more
than 100%.
<br/>
</p>
<br/>
<br/>
<hr>
<br/>
<h3>Show & Hide </h3>
<p>Use the <code>show</code> <code>hide</code> APIs to responsively show or hide elements. While these work similar
to <code>ng-show</code> and <code>ng-hide</code>, these Angular Material Layout directives are mediaQuery-aware.
</p>
<docs-demo demo-title="Hide and Show Directives" class="small-demo colorNested">
<demo-file name="index.html">
<div layout="row">
<div hide show-gt-sm flex>
Only show on gt-sm devices.
</div>
<div hide-gt-sm flex>
Shown on small and medium.<br/>
Hidden on gt-sm devices.
</div>
<div show hide-gt-md flex>
Shown on small and medium size devices.<br/>
Hidden on gt-md devices.
</div>
<div hide show-md flex>
Shown on medium size devices only.
</div>
<div hide show-gt-lg flex>
Shown on devices larger than 1200px wide only.
</div>
</div>
</demo-file>
</docs-demo>
<br/>
<table class="md-api-table">
<thead>
<tr>
<th>hide (display: none)</th>
<th>show (negates hide)</th>
<th>Activates when:</th>
</tr>
</thead>
<tr>
<td>hide-xs</td>
<td>show-xs</td>
<td>width < <b>600</b>px</td>
</tr>
<tr>
<td>hide-gt-xs</td>
<td>show-gt-xs</td>
<td>width >= <b>600</b>px</td>
</tr>
<tr>
<td>hide-sm</td>
<td>show-sm</td>
<td><b>600</b>px <= width < <b>960</b>px</td>
</tr>
<tr>
<td>hide-gt-sm</td>
<td>show-gt-sm</td>
<td>width >= <b>960</b>px</td>
</tr>
<tr>
<td>hide-md</td>
<td>show-md</td>
<td><b>960</b>px <= width < <b>1280</b>px</td>
</tr>
<tr>
<td>hide-gt-md</td>
<td>show-gt-md</td>
<td>width >= <b>1280</b>px</td>
</tr>
<tr>
<td>hide-lg</td>
<td>show-lg</td>
<td><b>1280</b>px <= width < <b>1920</b>px</td>
</tr>
<tr>
<td>hide-gt-lg</td>
<td>show-gt-lg</td>
<td>width >= <b>1920</b>px</td>
</tr>
<tr>
<td>hide-xl</td>
<td>show-xl</td>
<td>width >= <b>1920</b>px</td>
</tr>
</table>
</div>