pip-webui

<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>