pip-webui
Version:
HTML5 UI for LOB applications
138 lines (123 loc) • 6.69 kB
HTML
<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
Flexbox
</p>
<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Breakpoints</p>
<div class="layout-row layout-wrap">
<div class="flex" style="border: 1px solid">
768px
</div>
<div class="flex" style="border: 1px solid">
1000px
</div>
<div class="flex" style="border: 1px solid">
1200px
</div>
</div>
<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Material angular styles responsive</p>
<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Layout</p>
<p>Example 1</p>
<div>
<p> Use the layout attribute on an element to arrange its children horizontally in a row (layout="row"), or
vertically in a column (layout="column").
</p>
<div class="layout-row">
<div class="bg-cyan">I'm left.</div>
<div class="bg-light-green">I'm right.</div>
</div>
<div class="layout-column">
<div class="bg-goal-chips">I'm above.</div>
<div class="bg-deep-orange">I'm below.</div>
</div>
</div>
<p>To make your layout change depending upon the device screen size, there are other layout attributes available:</p>
<p><b>layout </b>Sets the default layout on all devices.</p>
<p><b>layout-sm</b>Sets the layout on devices less than 768px wide (phones).</p>
<p><b>layout-gt-sm </b>Sets the layout on devices greater than 768px wide (bigger than phones).</p>
<p><b>layout-md </b>Sets the layout on devices between 768px and 1000px wide (tablets in portrait).</p>
<p><b>layout-gt-md </b>Sets the layout on devices greater than 1000px wide (bigger than tablets in portrait).</p>
<p><b>layout-lg </b>Sets the layout on devices between 1000 and 1200px wide (tablets in landscape).</p>
<p><b>layout-gt-lg </b>Sets the layout on devices greater than 1200px wide (computers and large screens).</p>
<p> <b>layout-margin</b> adds margin around each flex child. It also adds a margin to the layout container itself.<br>
<b>layout-padding</b> adds padding inside each flex child. It also adds padding to the layout container itself.<br>
<b>layout-fill</b> forces the layout element to fill its parent container.</p>
<div class=" layout-row" style="height: 128px !important;">
<div class="layout-row layout-margin" >
<div class="flex bg-dark-red">Parent layout and this element have margins.</div>
</div>
<div class="layout-row layout-padding" >
<div class="flex bg-dark-red">Parent layout and this element have padding.</div>
</div>
<div class="layout-row layout-fill" >
<div class="flex bg-dark-red">Parent layout is set to fill available space.</div>
</div>
<div class="layout-row layout-padding layout-margin layout-fill">
<div class="flex bg-dark-red">I am using all three at once.</div>
</div>
</div>
<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Grid system</p>
<div>
<p>Добавьте flex атрибут к дочернему эдементу layout и поучите растягивающуюся область</p>
<p>Пример 1</p>
<div class="layout-row">
<div class="bg-dark-red flex">
[flex]
</div>
<div class="flex bg-light-green">
[flex]
</div>
<div class="hide-sm flex bg-cyan">
[flex]
</div>
</div>
<p>Пример 2</p>
<div class="layout-row layout-wrap">
<div class="flex-33 bg-cyan">
[flex="33"]
</div>
<div class="flex-55 bg-area-chips">
[flex="55"]
</div>
<div class="flex bg-grey">
[flex]
</div>
<div class="flex bg-light-green">
[flex]
</div>
<div class="flex-33 bg-goal-chips">
[flex]
</div>
</div>
<p>Flex and offset attributes.</p>
<p><b>flex </b> Sets flex.</p>
<p><b>flex-sm </b> Sets flex on devices less than 768px wide.</p>
<p><b>flex-gt-sm</b> Sets flex on devices greater than 768px wide.</p>
<p><b>flex-md </b> Sets flex on devices between 768px and 1000px wide.</p>
<p><b>flex-gt-md</b> Sets flex on devices greater than 1000px wide.</p>
<p><b>flex-lg </b> Sets flex on devices between 1000px and 1200px.</p>
<p><b>flex-gt-lg</b> Sets flex on devices greater than 1200px wide.</p>
</div>
<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Hide and Show Attributes</p>
<p><b>hide </b> display: none</p>
<p><b>hide-sm </b> display: none on devices less than 768px wide.</p>
<p><b>hide-gt-sm </b> display: none on devices greater than 768px wide.</p>
<p><b>hide-md </b> display: none on devices between 768px and 1000px wide.</p>
<p><b>hide-gt-md </b> display: none on devices greater than 1000px wide.</p>
<p><b>hide-lg </b> display: none on devices between 1000px and 1200px.</p>
<p><b>hide-gt-lg </b> display: none on devices greater than 1200px wide.</p>
<p><b>show </b> Negates hide.</p>
<p><b>show-sm </b> Negates hide on devices less than 768px wide.</p>
<p><b>show-gt-sm </b> Negates hide on devices greater than 768px wide.</p>
<p><b>show-md </b> Negates hide on devices between 768px and 1000px wide.</p>
<p><b>show-gt-md </b> Negates hide on devices greater than 1000px wide.</p>
<p><b>show-lg </b> Negates hide on devices between 1000px and 1200px.</p>
<p><b>show-gt-lg </b> Negates hide on devices greater than 1200px wide.</p>
<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Hide and Show Variables</p>
<p>$mdMedia is used to evaluate whether a given media query is true or false given the current device's screen / window size. The media query will be re-evaluated on resize, allowing you to register a watch.
</p>
<p>$mdMedia also has pre-programmed support for media queries that match the layout breakpoints. (sm, gt-sm, md, gt-md, lg, gt-lg).</p>
<p><b>$mdMedia('sm') </b> Negates hide on devices less than 768px wide.</p>
<p><b>$mdMedia('gt-sm') </b> Negates hide on devices greater than 768px wide.</p>
<p><b>$mdMedia('md') </b> Negates hide on devices between 768px and 1000px wide.</p>
<p><b>$mdMedia('gt-md') </b> Negates hide on devices greater than 1000px wide.</p>
<p><b>$mdMedia('lg') </b> Negates hide on devices between 1000px and 1200px.</p>
<p><b>$mdMedia('gt-lg') </b> Negates hide on devices greater than 1200px wide.</p>