Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(182)

Side by Side Diff: third_party/polymer/components/iron-flex-layout/README.md

Issue 3010683002: Update Polymer components. (Closed)
Patch Set: Rebase Created 3 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 [![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?bran ch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout) 1 [![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?bran ch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
2 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.or g-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/ir on-flex-layout) 2 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.or g-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/ir on-flex-layout)
3 3
4 ##<iron-flex-layout> 4 ## <iron-flex-layout>
5 5
6 The `<iron-flex-layout>` component provides simple ways to use 6 The `<iron-flex-layout>` component provides simple ways to use
7 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS /Flexible_boxes), 7 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS /Flexible_boxes),
8 also known as flexbox. This component provides two different ways to use flexbox : 8 also known as flexbox. This component provides two different ways to use flexbox :
9 9
10 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas ter/iron-flex-layout-classes.html). 10 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas ter/iron-flex-layout-classes.html).
11 The layout class stylesheet provides a simple set of class-based flexbox rules, that 11 The layout class stylesheet provides a simple set of class-based flexbox rules, that
12 let you specify layout properties directly in markup. You must include this file 12 let you specify layout properties directly in markup. You must include this file
13 in every element that needs to use them. 13 in every element that needs to use them.
14 14
15 Sample use: 15 Sample use:
16 16
17 <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> 17 <!--
18 ```
19 <custom-element-demo>
20 <template>
21 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
22 <link rel="import" href="iron-flex-layout-classes.html">
23 <dom-module id="demo-element">
24 <template>
25 <style is="custom-style" include="iron-flex iron-flex-alignment"></style >
26 <style>
27 .container, .layout {
28 background-color: #ccc;
29 padding: 4px;
30 }
18 31
19 <style is="custom-style" include="iron-flex iron-flex-alignment"></style> 32 .container div, .layout div {
20 33 background-color: white;
21 <div class="layout horizontal layout-start"> 34 padding: 12px;
22 <div>cross axis start alignment</div> 35 margin: 4px;
23 </div> 36 }
37 </style>
38 <next-code-block></next-code-block>
39 </template>
40 <script>Polymer({is: "demo-element"});</script>
41 </dom-module>
42 <demo-element></demo-element>
43 </template>
44 </custom-element-demo>
45 ```
46 -->
47 ```html
48 <div class="layout horizontal layout-start" style="height: 154px">
49 <div>cross axis start alignment</div>
50 </div>
51 ```
24 52
25 1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/ master/iron-flex-layout.html). 53 1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/ master/iron-flex-layout.html).
26 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. 54 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
27 55
28 56
29 57
30 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme nts/iron-flex-layout/tree/master/classes) 58 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme nts/iron-flex-layout/tree/master/classes)
31 are deprecated, and should not be used. To continue using layout properties 59 are deprecated, and should not be used. To continue using layout properties
32 directly in markup, please switch to using the new `dom-module`-based 60 directly in markup, please switch to using the new `dom-module`-based
33 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master /iron-flex-layout-classes.html). 61 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master /iron-flex-layout-classes.html).
34 Please note that the new version does not use `/deep/`, and therefore requires y ou 62 Please note that the new version does not use `/deep/`, and therefore requires y ou
35 to import the `dom-modules` in every element that needs to use them. 63 to import the `dom-modules` in every element that needs to use them.
36 64
37 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to ` <iron-flex-layout>` is available. 65 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to ` <iron-flex-layout>` is available.
38 66
39 67
OLDNEW
« no previous file with comments | « third_party/polymer/components/iron-flex-layout/GUIDE.md ('k') | third_party/polymer/components/iron-flex-layout/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698