Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
vue-material/dist/docs/ui-elements.20c543fc.js
Pablo Henrique Penha Silva 3f738bc4e1 [build] 0.7.2.1
2017-06-22 07:58:45 -03:00

1 line
No EOL
27 KiB
JavaScript
Raw Permalink Blame History

webpackJsonp([1,37],{836:function(t,e,a){function l(t){a(893)}var d=a(1)(null,a(926),l,"data-v-172ceb40",null);t.exports=d.exports},837:function(t,e,a){function l(t){a(916)}var d=a(1)(null,a(956),l,"data-v-d5af2876",null);t.exports=d.exports},861:function(t,e,a){e=t.exports=a(795)(),e.push([t.i,'.layout-demo[data-v-172ceb40]{min-height:100px}.no-gutter>.md-layout[data-v-172ceb40]:last-child:before{background-color:rgba(0,0,0,.2)!important}.grid>.md-layout>.md-layout[data-v-172ceb40]:not(.md-column){min-height:40px;margin-bottom:16px}.grid-content[data-v-172ceb40]{padding:16px}.gutter .color .md-layout[data-v-172ceb40]{color:rgba(0,0,0,.54);font-size:13px;font-weight:500;text-indent:8px}.color:not(.md-column).md-gutter-8>.md-layout[data-v-172ceb40]:before{right:4px;left:4px}.color.md-column.md-gutter-8>.md-layout[data-v-172ceb40]:before{top:4px;bottom:4px}.color:not(.md-column).md-gutter-16>.md-layout[data-v-172ceb40]:before{right:8px;left:8px}.color.md-column.md-gutter-16>.md-layout[data-v-172ceb40]:before{top:8px;bottom:8px}.color:not(.md-column).md-gutter-24>.md-layout[data-v-172ceb40]:before{right:12px;left:12px}.color.md-column.md-gutter-24>.md-layout[data-v-172ceb40]:before{top:12px;bottom:12px}.color:not(.md-column).md-gutter-40>.md-layout[data-v-172ceb40]:before{right:20px;left:20px}.color.md-column.md-gutter-40>.md-layout[data-v-172ceb40]:before{top:20px;bottom:20px}.color>.md-layout[data-v-172ceb40]{position:relative}.color>.md-layout[data-v-172ceb40]:before{width:100%;height:100%;margin-bottom:-200%;display:block;pointer-events:none;background-color:rgba(0,0,0,.12);content:" "}.column-size[data-v-172ceb40]{height:250px!important}.column-size+.column-size[data-v-172ceb40]{margin-top:48px!important}.color-red[data-v-172ceb40]:before{background-color:#f44336!important}.color-blue[data-v-172ceb40]:before{background-color:#2196f3!important}.color-yellow[data-v-172ceb40]:before{background-color:#ffeb3b!important}.color-green[data-v-172ceb40]:before{background-color:#4caf50!important}.color-purple[data-v-172ceb40]:before{background-color:#9c27b0!important}.color-pink[data-v-172ceb40]:before{background-color:#e91e63!important}.color-teal[data-v-172ceb40]:before{background-color:#009688!important}.color-orange[data-v-172ceb40]:before{background-color:#ff9800!important}.properties table tr td[data-v-172ceb40]:first-child{white-space:nowrap}',""])},884:function(t,e,a){e=t.exports=a(795)(),e.push([t.i,".demo>[data-v-d5af2876]{margin:.5em 0;display:block}",""])},893:function(t,e,a){var l=a(861);"string"==typeof l&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);a(796)("3360f65c",l,!0)},916:function(t,e,a){var l=a(884);"string"==typeof l&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);a(796)("36f35de2",l,!0)},926:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("page-content",{attrs:{"page-title":"UI Elements - Layout"}},[a("docs-component",[a("div",{slot:"description"},[a("p",[t._v("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.")]),t._v(" "),a("p",[t._v("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 "),a("code",[t._v("md-gutter")]),t._v(" property. If you want the automatic calculation the engine will set "),a("code",[t._v("16px")]),t._v(" for small screens and then apply "),a("code",[t._v("24px")]),t._v(" for medium to large.")]),t._v(" "),a("p",[t._v("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.")]),t._v(" "),a("p",[t._v("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:")]),t._v(" "),a("md-table",{staticClass:"properties",slot:"properties"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[t._v("Name")]),t._v(" "),a("md-table-head",[t._v("Size")]),t._v(" "),a("md-table-head",[t._v("Description")])],1)],1),t._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[a("code",[t._v("xsmall")])]),t._v(" "),a("md-table-cell",[t._v("600px")]),t._v(" "),a("md-table-cell",[t._v("For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.")])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[a("code",[t._v("small")])]),t._v(" "),a("md-table-cell",[t._v("960px")]),t._v(" "),a("md-table-cell",[t._v("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.")])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[a("code",[t._v("medium")])]),t._v(" "),a("md-table-cell",[t._v("1280px")]),t._v(" "),a("md-table-cell",[t._v("For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.")])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[a("code",[t._v("large")])]),t._v(" "),a("md-table-cell",[t._v("1920px")]),t._v(" "),a("md-table-cell",[t._v("For screens who have between of 1280px and 1920px wide. For large desktop monitors.")])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[a("code",[t._v("xlarge")])]),t._v(" "),a("md-table-cell",[t._v(">1920px")]),t._v(" "),a("md-table-cell",[t._v("For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.")])],1)],1)],1)],1),t._v(" "),a("div",{slot:"api"},[a("api-table",{attrs:{name:"md-layout"}},[a("md-table",{staticClass:"properties",slot:"properties"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[t._v("Name")]),t._v(" "),a("md-table-head",[t._v("Type")]),t._v(" "),a("md-table-head",[t._v("Description")])],1)],1),t._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[t._v("md-tag")]),t._v(" "),a("md-table-cell",[a("code",[t._v("String")])]),t._v(" "),a("md-table-cell",[t._v("The output tag. Default "),a("code",[t._v("div")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-gutter")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean|Number")])]),t._v(" "),a("md-table-cell",[t._v("Apply a gutter space to direct childs of the element that have this property. If "),a("code",[t._v("true")]),t._v(" the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts "),a("code",[t._v("8")]),t._v("|"),a("code",[t._v("16")]),t._v("|"),a("code",[t._v("24")]),t._v("|"),a("code",[t._v("40")]),t._v(". Default "),a("code",[t._v("false")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-row")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Create a row container. All child will be side by side.")])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-row-{type}")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Create a row container on screen sizes less than or equal to given breakpoint. Example: "),a("code",[t._v("md-row-large")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-column")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Create a column container. All child will be one underneath the other.")])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-column-{type}")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Create a column container on screen sizes less than or equal to given breakpoint. Example: "),a("code",[t._v("md-column-small")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-hide-{type}")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: "),a("code",[t._v("md-hide-medium")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-hide-{type}-and-up")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Hide a layout container/child on screen sizes greater than or equal to given breakpoint. Example: "),a("code",[t._v("md-hide-medium-and-up")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-flex")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean|Number")])]),t._v(" "),a("md-table-cell",[t._v("Create a flexible child. If "),a("code",[t._v("true")]),t._v(" the child element will grow to fill the empty space available on the parent element. If "),a("code",[t._v("Number")]),t._v(" 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: "),a("code",[t._v("true")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-flex-{type}")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean|Number")])]),t._v(" "),a("md-table-cell",[t._v("Create a flexible child on screen sizes less than or equal to given breakpoint. Example: "),a("code",[t._v('md-flex-small="33"')])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-flex-offset")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Number")])]),t._v(" "),a("md-table-cell",[t._v("Create a empty space before the actual child. Accepts the same value of "),a("code",[t._v("md-flex")]),t._v(" Example: "),a("code",[t._v('md-flex-offset="50"')])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-flex-offset-{type}")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Number")])]),t._v(" "),a("md-table-cell",[t._v("Create a empty space before the actual child on screen sizes less than or equal to given breakpoint. Example: "),a("code",[t._v('md-flex-offset-small="20"')])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-align")]),t._v(" "),a("md-table-cell",[a("code",[t._v("String")])]),t._v(" "),a("md-table-cell",[t._v("Apply an alignment to the container. Accepts "),a("code",[t._v("start")]),t._v("|"),a("code",[t._v("center")]),t._v("|"),a("code",[t._v("end")]),t._v(" Example: "),a("code",[t._v('md-align="end"')])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-align-{type}")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Number")])]),t._v(" "),a("md-table-cell",[t._v("Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: "),a("code",[t._v('md-align-xlarge="center"')])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-vertical-align")]),t._v(" "),a("md-table-cell",[a("code",[t._v("String")])]),t._v(" "),a("md-table-cell",[t._v("Apply an vertical alignment to the container. Accepts "),a("code",[t._v("start")]),t._v("|"),a("code",[t._v("center")]),t._v("|"),a("code",[t._v("end")]),t._v("|"),a("code",[t._v("stretch")]),t._v(" Example: "),a("code",[t._v('md-vertical-align="end"')])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-vertical-align-{type}")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Number")])]),t._v(" "),a("md-table-cell",[t._v("Apply an vertical alignment to the container on screen sizes less than or equal to given breakpoint. Example: "),a("code",[t._v('md-vertical-align-xlarge="center"')])])],1)],1)],1)],1)],1),t._v(" "),a("div",{slot:"example"},[a("example-box",{attrs:{"card-title":"Responsive"}},[a("div",{staticClass:"layout-demo grid",slot:"demo"},[a("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[a("md-layout",{staticClass:"color-red",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[a("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),a("br"),t._v('\n md-flex-small="50" '),a("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),a("md-layout",{staticClass:"color-blue",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[a("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),a("br"),t._v('\n md-flex-small="50" '),a("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),a("md-layout",{staticClass:"color-pink",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[a("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),a("br"),t._v('\n md-flex-small="50" '),a("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),a("md-layout",{staticClass:"color-teal",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[a("div",{staticClass:"grid-content"},[t._v("\n md-flex-xsmall "),a("br"),t._v('\n md-flex-small="50" '),a("br"),t._v('\n md-flex-medium="33"\n ')])]),t._v(" "),a("md-layout",{staticClass:"color-green",attrs:{"md-flex-small":"100","md-flex-medium":"33","md-hide-xsmall":""}},[a("div",{staticClass:"grid-content"},[t._v('\n md-flex-medium="33" '),a("br"),t._v("\n md-hide-xsmall\n ")])]),t._v(" "),a("md-layout",{staticClass:"color-yellow",attrs:{"md-flex":"","md-flex-medium":"33","md-hide-small":""}},[a("div",{staticClass:"grid-content"},[t._v('\n md-flex-medium="33" '),a("br"),t._v("\n md-hide-small\n ")])])],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n <md-layout md-gutter>\n <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n md-flex-xsmall <br>\n md-flex-small="50" <br>\n md-flex-medium="33"\n </md-layout>\n\n <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n md-flex-xsmall <br>\n md-flex-small="50" <br>\n md-flex-medium="33"\n </md-layout>\n\n <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n md-flex-xsmall <br>\n md-flex-small="50" <br>\n md-flex-medium="33"\n </md-layout>\n\n <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n md-flex-xsmall <br>\n md-flex-small="50" <br>\n md-flex-medium="33"\n </md-layout>\n\n <md-layout md-flex-small="100" md-flex-medium="33" md-hide-xsmall>\n md-flex-medium="33" <br>\n md-hide-xsmall\n </md-layout>\n\n <md-layout md-flex md-flex-medium="33" md-hide-small>\n md-flex-medium="33" <br>\n md-hide-small\n </md-layout>\n </md-layout>\n ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Sizes and Offset"}},[a("div",{staticClass:"layout-demo grid",slot:"demo"},[a("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[a("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),a("md-layout"),t._v(" "),a("md-layout"),t._v(" "),a("md-layout")],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[a("md-layout",{attrs:{"md-flex":"33"}}),t._v(" "),a("md-layout")],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[a("md-layout"),t._v(" "),a("md-layout",{attrs:{"md-flex":"33","md-flex-offset":"33"}})],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[a("md-layout",{attrs:{"md-flex":"75"}}),t._v(" "),a("md-layout")],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[a("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),a("md-layout"),t._v(" "),a("md-layout")],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[a("md-layout",{attrs:{"md-flex":"25","md-flex-offset":"25"}}),t._v(" "),a("md-layout",{attrs:{"md-flex":"25"}})],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n <md-layout md-gutter>\n <md-layout md-flex="50"></md-layout>\n <md-layout></md-layout>\n <md-layout></md-layout>\n <md-layout></md-layout>\n </md-layout>\n\n <md-layout md-gutter>\n <md-layout md-flex="33"></md-layout>\n <md-layout></md-layout>\n </md-layout>\n\n <md-layout md-gutter>\n <md-layout></md-layout>\n <md-layout md-flex="33" md-flex-offset="33"></md-layout>\n </md-layout>\n\n <md-layout md-gutter>\n <md-layout md-flex="75"></md-layout>\n <md-layout></md-layout>\n </md-layout>\n\n <md-layout md-gutter>\n <md-layout md-flex="50"></md-layout>\n <md-layout></md-layout>\n <md-layout></md-layout>\n </md-layout>\n\n <md-layout md-gutter>\n <md-layout md-flex="25" md-flex-offset="25"></md-layout>\n <md-layout md-flex="25"></md-layout>\n </md-layout>\n ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Direction"}},[a("div",{staticClass:"layout-demo grid",slot:"demo"},[a("md-layout",{staticClass:"column-size",attrs:{"md-gutter":"16"}},[a("md-layout",{staticClass:"color",attrs:{"md-column":"","md-gutter":"16"}},[a("md-layout",{attrs:{"md-flex":"20"}}),t._v(" "),a("md-layout")],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-column":"","md-gutter":"16"}},[a("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),a("md-layout"),t._v(" "),a("md-layout")],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n <md-layout md-gutter>\n <md-layout md-column md-gutter>\n <md-layout md-flex="20"></md-layout>\n <md-layout></md-layout>\n </md-layout>\n\n <md-layout md-column md-gutter>\n <md-layout md-flex="50"></md-layout>\n <md-layout></md-layout>\n <md-layout></md-layout>\n </md-layout>\n </md-layout>\n ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Alignment"}},[a("div",{staticClass:"layout-demo grid gutter",slot:"demo"},[a("md-layout",{staticClass:"color",attrs:{"md-gutter":"16"}},[a("md-layout",{attrs:{"md-flex":"50"}},[a("span",[t._v("start")])])],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-align":"end","md-gutter":"16"}},[a("md-layout",{attrs:{"md-flex":"33"}},[a("span",[t._v("end")])])],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-align":"end","md-gutter":"16"}},[a("md-layout",{attrs:{"md-flex":"20"}},[a("span",[t._v("end")])]),t._v(" "),a("md-layout",{attrs:{"md-flex":"20"}},[a("span",[t._v("end")])])],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-align":"center","md-gutter":"16"}},[a("md-layout",{attrs:{"md-flex":"35"}},[a("span",[t._v("center")])]),t._v(" "),a("md-layout",{attrs:{"md-flex":"35"}},[a("span",[t._v("center")])])],1),t._v(" "),a("md-layout",[a("md-layout",{staticClass:"color",style:{height:"100px"},attrs:{"md-vertical-align":"center","md-gutter":"16"}},[a("md-layout",[a("span",[t._v("vertical center")])])],1),t._v(" "),a("md-layout",{staticClass:"color",style:{height:"100px"},attrs:{"md-vertical-align":"start","md-gutter":"16"}},[a("md-layout",[a("span",[t._v("vertical start")])])],1),t._v(" "),a("md-layout",{staticClass:"color",style:{height:"100px"},attrs:{"md-vertical-align":"end","md-gutter":"16"}},[a("md-layout",[a("span",[t._v("vertical end")])])],1),t._v(" "),a("md-layout",{staticClass:"color",style:{height:"100px"},attrs:{"md-vertical-align":"stretch","md-gutter":"16"}},[a("md-layout",[a("span",[t._v("vertical stretch (default)")])])],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n <md-layout md-gutter="16">\n <md-layout md-flex="50">\n <span>start</span>\n </md-layout>\n </md-layout>\n\n <md-layout md-align="end" md-gutter="16">\n <md-layout md-flex="33">\n <span>end</span>\n </md-layout>\n </md-layout>\n\n <md-layout md-align="end" md-gutter="16">\n <md-layout md-flex="20">\n <span>end</span>\n </md-layout>\n\n <md-layout md-flex="20">\n <span>end</span>\n </md-layout>\n </md-layout>\n\n <md-layout md-align="center" md-gutter="16">\n <md-layout md-flex="35">\n <span>center</span>\n </md-layout>\n\n <md-layout md-flex="35">\n <span>center</span>\n </md-layout>\n </md-layout>\n ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Gutters"}},[a("div",{staticClass:"layout-demo grid gutter",slot:"demo"},[a("md-layout",{staticClass:"no-gutter color"},[a("md-layout"),t._v(" "),a("md-layout")],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":8}},[a("md-layout",[a("span",[t._v("8px")])]),t._v(" "),a("md-layout",[a("span",[t._v("8px")])]),t._v(" "),a("md-layout",[a("span",[t._v("8px")])]),t._v(" "),a("md-layout",[a("span",[t._v("8px")])]),t._v(" "),a("md-layout",[a("span",[t._v("8px")])]),t._v(" "),a("md-layout",[a("span",[t._v("8px")])])],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":"16"}},[a("md-layout",[a("span",[t._v("16px")])]),t._v(" "),a("md-layout",[a("span",[t._v("16px")])]),t._v(" "),a("md-layout",[a("span",[t._v("16px")])]),t._v(" "),a("md-layout",[a("span",[t._v("16px")])]),t._v(" "),a("md-layout",[a("span",[t._v("16px")])])],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":24}},[a("md-layout",[a("span",[t._v("24px")])]),t._v(" "),a("md-layout",[a("span",[t._v("24px")])]),t._v(" "),a("md-layout",[a("span",[t._v("24px")])]),t._v(" "),a("md-layout",[a("span",[t._v("24px")])])],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":40}},[a("md-layout",[a("span",[t._v("40px")])]),t._v(" "),a("md-layout",[a("span",[t._v("40px")])]),t._v(" "),a("md-layout",[a("span",[t._v("40px")])])],1),t._v(" "),a("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[a("md-layout",[a("span",[t._v("Automatic")])]),t._v(" "),a("md-layout",[a("span",[t._v("Automatic")])])],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n <md-layout>\n <md-layout></md-layout>\n <md-layout></md-layout>\n </md-layout>\n\n <md-layout :md-gutter="8">\n <md-layout>\n <span>8px</span>\n </md-layout>\n\n <md-layout>\n <span>8px</span>\n </md-layout>\n\n <md-layout>\n <span>8px</span>\n </md-layout>\n\n <md-layout>\n <span>8px</span>\n </md-layout>\n\n <md-layout>\n <span>8px</span>\n </md-layout>\n\n <md-layout>\n <span>8px</span>\n </md-layout>\n </md-layout>\n\n <md-layout md-gutter="16">\n <md-layout>\n <span>16px</span>\n </md-layout>\n\n <md-layout>\n <span>16px</span>\n </md-layout>\n\n <md-layout>\n <span>16px</span>\n </md-layout>\n\n <md-layout>\n <span>16px</span>\n </md-layout>\n\n <md-layout>\n <span>16px</span>\n </md-layout>\n </md-layout>\n\n <md-layout :md-gutter="24">\n <md-layout>\n <span>24px</span>\n </md-layout>\n\n <md-layout>\n <span>24px</span>\n </md-layout>\n\n <md-layout>\n <span>24px</span>\n </md-layout>\n\n <md-layout>\n <span>24px</span>\n </md-layout>\n </md-layout>\n\n <md-layout :md-gutter="40">\n <md-layout>\n <span>40px</span>\n </md-layout>\n\n <md-layout>\n <span>40px</span>\n </md-layout>\n\n <md-layout>\n <span>40px</span>\n </md-layout>\n </md-layout>\n\n <md-layout md-gutter>\n <md-layout>\n <span>Automatic</span>\n </md-layout>\n\n <md-layout>\n <span>Automatic</span>\n </md-layout>\n </md-layout>\n ')])],1)])],1)])],1)},staticRenderFns:[]}},956:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("page-content",{attrs:{"page-title":"UI Elements - Typography"}},[a("docs-component",[a("div",{slot:"description"},[a("h2",{staticClass:"md-title"},[t._v("Styles")]),t._v(" "),a("p",[t._v("Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.")]),t._v(" "),a("h2",{staticClass:"md-title"},[t._v("Typeface")]),t._v(" "),a("p",[t._v("Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.")])]),t._v(" "),a("div",{slot:"example"},[a("example-box",{attrs:{"card-title":"Default"}},[a("div",{staticClass:"demo",slot:"demo"},[a("span",{staticClass:"md-display-4"},[t._v("Display 4")]),t._v(" "),a("span",{staticClass:"md-display-3"},[t._v("Display 3")]),t._v(" "),a("span",{staticClass:"md-display-2"},[t._v("Display 2")]),t._v(" "),a("span",{staticClass:"md-display-1"},[t._v("Display 1")]),t._v(" "),a("span",{staticClass:"md-headline"},[t._v("Headline")]),t._v(" "),a("span",{staticClass:"md-title"},[t._v("Title")]),t._v(" "),a("span",{staticClass:"md-subheading"},[t._v("Subheading")]),t._v(" "),a("span",{staticClass:"md-body-2"},[t._v("Body 2")]),t._v(" "),a("span",{staticClass:"md-body-1"},[t._v("Body 1")]),t._v(" "),a("span",{staticClass:"md-caption"},[t._v("Caption")]),t._v(" "),a("a",{attrs:{href:"#/typography"}},[t._v("Link")])]),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n <span class="md-display-4">Display 4</span>\n <span class="md-display-3">Display 3</span>\n <span class="md-display-2">Display 2</span>\n <span class="md-display-1">Display 1</span>\n <span class="md-headline">Headline</span>\n <span class="md-title">Title</span>\n <span class="md-subheading">Subheading</span>\n <span class="md-body-2">Body 2</span>\n <span class="md-body-1">Body 1</span>\n <span class="md-caption">Caption</span>\n <a href="#/typography">Link</a>\n ')])],1)])],1)])],1)},staticRenderFns:[]}}});
Reference in a new issue View git blame Copy permalink