' + highlightedCode.value + 'Full View \ - View Source
' - ); - element.append(links); - } + codeElement.append(highlightedCode.value).addClass('highlight'); + + } + }; } }; -}); +}]) +; diff --git a/docs/app/partials/demo.tmpl.html b/docs/app/partials/demo.tmpl.html index ff6bfe16a1d..df76f3902f4 100644 --- a/docs/app/partials/demo.tmpl.html +++ b/docs/app/partials/demo.tmpl.html @@ -1,41 +1,6 @@ -
- Child elements of a layout element can be aligned using the layout-align
- attribute. In each demo, the center black line represents the "main axis",
- which is the primary axis along which child element are laid out. For a row layout,
- child elements will line up horizontally along the main axis. For a column layout,
- child elements will line up vertically along the main axis. Alternatively, the "cross axis"
- is the imaginary line perpendicular to the black main axis line.
+ When the layout-align attribute is given on a a layout element, its value
+ answers two questions:
+
- The layout-align="center" attribute will center the cells across the main axis.
- Note that each demo's center black line represents the "main axis". Additionally, by default
- each item will "stretch" the cross axis, which is explained later.
+ layout-align="center" will center children across the layout direction.
layout-align="start" attribute will position the cell to the left for a
a row layout, and at the top for a column layout. (Stretches the cross axis by default)
- layout-align="end" attribute will position the cell to the right for a
a row layout, and at the bottom for a column layout. (Stretches the cross axis by default)
- layout-align="space-around" attribute will evenly distribute
the cells and the space around them. (Stretches the cross axis by default)
-
The layout-align="space-between" attribute will evenly distribute
the cells and the free space between them, with the first cell is aligned
at the start, and the last cell aligned at the end. (Stretches the cross axis by default)
layout-align="end center" attribute packs up all of the cells at the
"end" of the main axis, and in the "center" of the cross axis.
- layout-align="center start" attribute packs up all of the cells at the
"center" of the main axis, and at the "start" of the cross axis.
- layout-align="start start" attribute packs up all of the cells at the
"start" of the main axis, and at the "start" of the cross axis.
- layout-align="end start" attribute packs up all of the cells at the
"end" of the main axis, and at the "start" of the cross axis.
- layout-align="center end" attribute packs up all of the cells at the
"center" of the main axis, and at the "end" of the cross axis.
- layout-align="start end" attribute packs up all of the cells at the
"start" of the main axis, and at the "end" of the cross axis.
- layout-align="end end" attribute packs up all of the cells at the
"end" of the main axis, and at the "end" of the cross axis.
- - Angular Md uses a responsive CSS layout based on - flexbox, rather than - using CSS floats. Traditionally, floats proved to be the best solution for CSS - layouts, but with flexbox now available in a majority of browsers, - we're moving onto a new era with improved layout capabilities and features. + Angular Material's responsive CSS layout is based on + flexbox, rather than traditional + CSS floats. With flexbox now available in + major browsers, + flexbox is the best bet.
- The layout system uses element attributes, rather than CSS classes. - By doing so we're able to simplify creating layouts and make it easier to quickly generate - the structure required at various viewport sizes. The attribute system allows - assigning values following standard HTML conventions, which makes it easier to read and - understand compared to long strung together CSS classes. Additionally, the layout attributes - help to separate custom app styles from the core structure, which further simplifies code. + The layout system is based upon element attributes rather than CSS classes. + Attributes provide an easy way to set a value (eg `layout="row"`), and additionally + helps us separate concerns: attributes define layout, and classes define styling.
- Use the layout attribute on an element to arrange its children
+ Use the layout attribute on an element to align its children
horizontally in a row (layout="row"), or vertically in
- a column (layout="column"). The layout attribute's value
- describes what the "main axis" is for its children. It uses words that adhere
- to the flexbox specification.
+ a column (layout="column").
- From the ground up the layout system is built around being responsive to viewport size.
- Out of the box it comes with useful, which can be easily reused.
- The layout attribute used with "row" or "column" values define arrangement on all device sizes.
- If you wish to define a layout depending upon the device size, there are
- other layout attributes available:
+ See Layout Options for information on responsive layouts and other options.
layout sets the default layout on all devices.
- layout-phone sets the layout on device <=600px wide.
- layout-tablet sets the layout on devices >600px and <=960px wide.
- layout-tablet-landscape sets the layout on devices >960 and <=1200px wide.
- layout-pc sets the layout on devices >=1200px wide.
-
+ In this layout, the header and footer are both using their normal height, while the main
+ content area is flexing, or stretching, to fill the remaining area.
+
- The grid system is different than most because of its use of the
- CSS Flexible Box Layout Module standard. With flexbox
- you have the power to simply add in the columns and rows required, and they'll evenly take up the
- available space of their parent layout container. There's no restriction to a 12 column grid, or
- having to explicitly state how large each column should be.
+ To customize the size and position of elements in a layout, use the
+ flex, offset, and flex-order attributes.
- Child elements of a layout container with the flex
- attribute will "flex", or stretch, to fill the available area within its parent layout container.
- If a design requires three evenly spaced elements, simply add three elements with a
- flex attribute. Elements without the flex attribute will take up their natural size,
- whereas elements with the flex attribute will evenly fill in the available area.
-
- This layout has padding, or gutters, between each cell by adding the
- layout-padding attribute. The previous examples added in their own
- margins/padding manually, whereas the layout-padding attribute spaces it all out
- evenly.
+ Add the flex attribute to a layout's child element, and it
+ will flex (stretch) to fill the available area.
- Flex attributes can be given integers to represent the percentage of the available space - it should take up. Note that elements which are not given a percentage still - fill up the available area. Adjust the window size to see - the demo's responsive layout attributes at work. -
+ +
- Note that flex attributes are only defined in increments of 5, with the exception of
- 33 and 66. (ie. flex=5, flex=10, flex=15, ... flex=33, flex=35, ... flex=66, etc)
- This avoids needlessly including extra css in the framework. If you need more
- specificity than what is provided by our breakpoints, use stylesheets to set the
- flex-basis: x%; max-width: x%; properties.
+ A layout child's flex attribute can be given an integer value from 0-100.
+ The element will stretch to the percentage of available space matching the value.
+
+ The flex attribute value is restricted to 33, 66, and multiples
+ of five.
+
+ For example: flex="5", flex="20", "flex="33", flex="50", flex="66", flex="75", ....
- Elements can be offset from the left, but still allow the gutters to line up correctly. - Adjust the window size to see the demo's responsive layout attributes at work. + See the layout options page for more information on responsive flex attributes.
-
- Child elements of a layout container can have their order changed through the use of the
- layout-order attribute, and respective responsive
- attributes such as: layout-order-sm, layout-order-md, and layout-order-lg. Reordering elements
- is useful when the placement of a cell should be changed depending on the viewport size.
+ Add the offset attribute with a value from 0-100 to
+ make a layout child be offset by the given percent. The offset
+ attribute has the same restrictions as the flex attribute: It is defined only at 33, 66, and multiples of five.
- In the demo, notice how the default size (the smallest) has each of the elements in their - natural order determined by its markup. However, as the viewport changes size then each - individual cell can change their order using the layout-order attribute. + See the layout options page for more information on responsive offset attributes.
-- This layout lets each of the header and footer tracks height be the size of their - respective content, and the middle track (menu and main) flex vertically to fill the - space of the entire layout. This is also an example of nested layouts, where the entire - body is a vertical layout (header/content/footer), and the content row is its own layout - (menu/main), and each layout has their own settings. -
+
- The body element has the layout="column" attribute.
- By default the middle track has the menu and main elements stacked vertically. However,
- the elements line up horizontally starting at the "small" size, which is determined by the
- media query.
+ Add the flex-order attribute to a layout child to set its
+ position within the layout.
- From the ground up the layout system is built around being responsive to viewport size.
- Out of the box it comes with useful and customizable breakpoints, which can be easily reused.
- The layout attribute used with "row" or "column" values define arrangement on all device sizes.
- If you wish to define a layout depending upon the device size, there are
+ See the Layout Container page for a basic explanation
+ of layout attributes.
+
+ To make your layout change depending upon the device size, there are
other layout attributes available:
layout sets the default layout on all devices.
layout-phone sets the layout on device <600px wide.
+ layout-sm sets the layout on devices less than 600px wide (phones).
+ layout-gt-sm sets the layout on devices greater than 600px wide (bigger than phones).
layout-tablet sets the layout on devices >=600px and <960px wide.
+ layout-md sets the layout on devices between 600px and 960px wide (tablets in portrait).
layout-tablet-landscape sets the layout on devices >=960px and <1200px wide.
+ layout-gt-md sets the layout on devices greater than 960px wide (bigger than tablets in portrait).
layout-pc sets the layout on devices >=1200px wide.
+ layout-lg sets the layout on devices between 960 and 1200px wide (tablets in landscape).
+ layout-gt-lg sets the layout on devices greater than 1200px wide (computers and large screens).
- layout-padding adds padding between this layout's children with
- the flex attribute.
+ layout-margin adds a margin around each flex child. It also adds a margin to the layout container itself.
+
+ layout-fill forces the layout element to fill its parent container.
- layout-fill forces the layout element to fill its parent container.
+ See the Layout Grid page for a basic explanation
+ of flex and offset attributes.
| flex | +Sets flex. | +
| flex-sm | +Sets flex on devices less than 600px wide. | +
| flex-gt-sm | +Sets flex on devices greater than 600px wide. | +
| flex-md | +Sets flex on devices between 600px and 960px wide.. | +
| flex-gt-md | +Sets flex on devices greater than 960px wide. + |
| flex-lg | +Sets flex on devices between 960px and 1200px. | +
| flex-gt-lg | +Sets flex on devices greater than 1200px wide. | +
| offset | +Sets offset. | +
| offset-sm | +Sets offset on devices less than 600px wide. | +
| offset-gt-sm | +Sets offset on devices greater than 600px wide. | +
| offset-md | +Sets offset on devices between 600px and 960px wide.. | +
| offset-gt-md | +Sets offset on devices greater than 960px wide. + |
| offset-lg | +Sets offset on devices between 960px and 1200px. | +
| offset-gt-lg | +Sets offset on devices greater than 1200px wide. | +
| hide | display: none |
||
| hide-phone | -display: none when the phone media query is active. |
+ hide-sm | +display: none on devices less than 600px wide. |
| hide-tablet | -display: none when the tablet media query is active. |
+ hide-gt-sm | +display: none on devices greater than 600px wide. |
| hide-tablet-landscape | -display: none when the tablet-landscape media query is active. |
+ hide-md | +display: none on devices between 600px and 960px wide.. |
| hide-pc | -display: none when the pc media query is active. |
+ hide-gt-md | +display: none on devices greater than 960px wide.
+ |
| hide-lg | +display: none on devices between 960px and 1200px. |
+ ||
| hide-gt-lg | +display: none on devices greater than 1200px wide. |
||
| show | -negates hide operator | +Negates hide. | +|
| show-sm | +Negates hide on devices less than 600px wide. | ||
| show-phone | -negates hide operator when the phone media query is active. | +show-gt-sm | +Negates hide on devices greater than 600px wide. |
| show-tablet | -negates hide operator when the tablet media query is active. | +show-md | +Negates hide on devices between 600px and 960px wide.. |
| show-tablet-landscape | -negates hide operator when the tablet-landscape media query is active. | +show-gt-md | +Negates hide on devices greater than 960px wide. |
| show-pc | -negates hide operator when the pc media query is active. | +show-lg | +Negates hide on devices between 960px and 1200px. | +
| show-gt-lg | +Negates hide on devices greater than 1200px wide. |