From f6e97a02a9c88b1695094a8a85a11958924e4c61 Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Thu, 3 Dec 2015 22:48:02 -0600 Subject: [PATCH] update(docs, layout): fix breakpoints, documentation, and gettingStarted * update component custom mediaQueries to be consistent with ranges defined for Layout mediaQueries * update `hide` API for mediaQueries * fix hide SCSS and component mediaQuery(s) * fix mixins for gt-lg and xl * fix flex-order with negative ordering; support -20 to 20 * fix RTE with $log injection * update(layout): Currently `validateAttributeUsage( )` is only used for the `flex` API, so remove its use from the non-observable APIs. * fix menu demos with workarounds for layout=column issues * wrapper div for `

` tags * min-height for `

` Fixes #5646. Fixes #6056. Fixes #5576. Fixes #6057. Fixes #5962. Closes #6082, --- docs/app/css/style.css | 9 + docs/app/js/app.js | 27 +- docs/app/partials/getting-started.tmpl.html | 98 +++-- docs/app/partials/layout-alignment.tmpl.html | 91 +++-- docs/app/partials/layout-children.tmpl.html | 322 +++++++++++++++ docs/app/partials/layout-container.tmpl.html | 136 +++++-- docs/app/partials/layout-grid.tmpl.html | 232 ----------- .../partials/layout-introduction.tmpl.html | 373 ++++++++++++++++++ docs/app/partials/layout-options.tmpl.html | 185 ++++----- package.json | 2 +- src/components/autocomplete/autocomplete.scss | 2 + src/components/bottomSheet/bottom-sheet.scss | 5 +- src/components/button/button.scss | 1 + src/components/chips/chips.scss | 1 + .../chips/demoContactChips/style.scss | 3 +- src/components/dialog/dialog.scss | 4 +- .../menu/demoMenuPositionModes/index.html | 14 +- src/components/menu/demoMenuWidth/index.html | 8 +- src/components/menu/menu.scss | 2 + src/components/toast/toast.scss | 4 +- src/components/toolbar/toolbar.scss | 6 +- .../services/layout/layout.attributes.scss | 41 +- src/core/services/layout/layout.js | 19 +- src/core/services/layout/layout.scss | 42 +- 24 files changed, 1137 insertions(+), 490 deletions(-) create mode 100644 docs/app/partials/layout-children.tmpl.html delete mode 100644 docs/app/partials/layout-grid.tmpl.html create mode 100644 docs/app/partials/layout-introduction.tmpl.html diff --git a/docs/app/css/style.css b/docs/app/css/style.css index 106d228043d..7b21db7411c 100644 --- a/docs/app/css/style.css +++ b/docs/app/css/style.css @@ -874,3 +874,12 @@ table.attributes tr td:last-child { table.md-api-table tr td:first-child { font-weight: bold; } + + +.layout_note { + font-size: 0.9em; + margin: -5px 40px 0px 20px; + color: rgb(1, 57, 114); + background-color: rgba(156, 204, 101,0.4); + padding: 20px; +} diff --git a/docs/app/js/app.js b/docs/app/js/app.js index fddd7247e1b..51d7e07b8ec 100644 --- a/docs/app/js/app.js +++ b/docs/app/js/app.js @@ -22,7 +22,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, } }) .when('/layout/', { - redirectTo: '/layout/container' + redirectTo: '/layout/introduction' }) .when('/demo/', { redirectTo: DEMOS[0].url @@ -248,23 +248,32 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind name: 'Layout', type: 'toggle', pages: [{ - name: 'Container Elements', + name: 'Introduction', + id: 'layoutIntro', + url: 'layout/introduction' + } + ,{ + name: 'Layout Containers', id: 'layoutContainers', url: 'layout/container' - },{ - name: 'Layout System', + } + ,{ + name: 'Layout Children', id: 'layoutGrid', - url: 'layout/grid' - },{ + url: 'layout/children' + } + ,{ name: 'Child Alignment', id: 'layoutAlign', url: 'layout/alignment' - },{ + } + ,{ name: 'Options', id: 'layoutOptions', url: 'layout/options' - },{ - name: 'Tips & Tricks', // Possibly rename to Troubleshooting + } + ,{ + name: 'Troubleshooting', id: 'layoutTips', url: 'layout/tips' }] diff --git a/docs/app/partials/getting-started.tmpl.html b/docs/app/partials/getting-started.tmpl.html index 7aa17f4a242..50fef1cd01c 100644 --- a/docs/app/partials/getting-started.tmpl.html +++ b/docs/app/partials/getting-started.tmpl.html @@ -1,38 +1,84 @@
-

New to Angular.js? Before getting into Angular Material, it might be helpful to - read about the framework.

+

New to Angular? Before getting into Angular Material, it might be helpful to: +

-

How do I start?

+

+

How do I start with Angular Material?

+ title="Link opens in a new window">Use the Github Starter Project -

Including Angular Material and its dependencies

-
    -
  • Using Bower
    • -
  • Using a CDN (example below)
    • +
  • Use 'Edit on CodePen' button on any of our Demos
    + +
    • + +
  • Easily build a Material application from scratch (below)
- -
+ + +

Now just you add your Angular Material components and other HTML content to your Blank starter app.

+
+
-

Include Optional Dependencies

+

Our CodePen Community

- Angular Material integrates with some additional libraries which you may optionally include: + You can also visit our CodePen Community to explore more samples and ideas.

+
+ + + +
+ + +

+ +
+ +

Installing the Angular Material Libraries

+ +
+ You can install the Angular Material library (and it's dependent library) in your local project using either + NPM, JSPM, or Bower. + +

+ Angular Material also integrates with some additional, optional libraries which you may elect to include: +

+
  • ngMessages @@ -49,14 +95,18 @@

    Include Optional Dependencies

+
+
+

Unsupported Integrations

- Angular Material v1.0 has a few known integration issues with the following libraries: + Angular Material v1.0 has a few known integration issues + with the following libraries:

  • - ngTouchs - - This module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices. + ngTouch + - This Angular.js Touch module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices.
  • diff --git a/docs/app/partials/layout-alignment.tmpl.html b/docs/app/partials/layout-alignment.tmpl.html index c9c4cc3a9eb..4402c81e2ef 100644 --- a/docs/app/partials/layout-alignment.tmpl.html +++ b/docs/app/partials/layout-alignment.tmpl.html @@ -1,50 +1,75 @@

    - The layout-align attribute takes two words. - The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.

    + The layout-align directive takes two words. + The first word says how the children will be aligned in the lay3ut's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.

    -

    Only one word is required for the attribute. For example, layout="row" layout-align="center" would make the elements center horizontally and use the default behavior vertically.

    +

    Only one value is required for this directive. + For example, layout="row" layout-align="center" would make the elements + center horizontally and use the default behavior vertically.

    layout="column" layout-align="center end" would make children align along the center vertically and along the end (right) horizontally.

    + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
    APISets child alignments within the layout container
    layout-alignSets default alignment unless overridden by another breakpoint.
    layout-alignSets child alignment.
    layout-align-smSets child alignment on devices less than 600px wide.
    layout-align-gt-smSets child alignment on devices greater than 600px wide.
    layout-align-mdSets child alignment on devices between 600px and 960px wide.
    layout-align-gt-mdSets child alignment on devices greater than 960px wide. -
    layout-align-lgSets child alignment on devices between 960px and 1200px wide.
    layout-align-gt-lgSets child alignment on devices greater than 1200px wide.
    + layout-align-xs + width < 600px + + + layout-align-gt-xs + width >= 600px + + + layout-align-sm + 600px <= width < 960px + + + layout-align-gt-sm + width >= 960px + + + layout-align-md + 960px <= width < 1280px + + + layout-align-gt-md + width >= 1280px + + + layout-align-lg + 1280px <= width < 1920px + + + layout-align-gt-lg + width >= 1920px + + + layout-align-xl + width >= 1920px + + + +
    +

    - See below for more examples: + Below is an interactive demo that lets you explore the visual results of the different settings:

    -
    diff --git a/docs/app/partials/layout-children.tmpl.html b/docs/app/partials/layout-children.tmpl.html new file mode 100644 index 00000000000..15400b0c843 --- /dev/null +++ b/docs/app/partials/layout-children.tmpl.html @@ -0,0 +1,322 @@ +
    + +

    Children within a Layout Container

    + +

    + To customize the size and position of elements in a layout container, use the + flex, flex-order, and flex-offset attributes on the container's child elements: +

    + + + +
    +
    + [flex="20"] +
    +
    + [flex="70"] +
    +
    + [flex] +
    +
    +     +     + +

    + Add the flex directive to a layout's child element and the element will flex (grow or shrink) to fit + the area unused by other elements. flex defines how the element will ajust its size with respect to its + parent container and the other elements within the container. +

    + + + +
    +
    + [flex="30"] +
    +
    + [flex="45"] +
    +
    + [flex="25"] +
    +
    + [flex="33"] +
    +
    + [flex="66"] +
    +
    + [flex="50"] +
    +
    + [flex] +
    +
    +     +     + + +

    + A layout child's flex directrive can be given an integer value from 0-100. + The element will stretch to the percentage of available space matching the value. Currently, the flex + directive value is restricted to multiples of five, 33 or 66. +

    + +

    For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100".

    + + + +
    +
    + flex 33% on mobile,
    and 66% on gt-sm devices. +
    +
    + flex 66% on mobile,
    and 33% on gt-sm devices. +
    +
    +     +     + + +

    + See the layout options page for more information on responsive flex directives like + hide-sm and layout-wrap used in the above examples. +

    + +
    +
    +
    + +

    Additional Flex Values

    + +

    + There are additional flex values provided by Angular Material to improve flexibility and to make the API + easier to understand. +

    + + + +
    +
    + [flex="0"] +
    +
    + [flex="none"] +
    +
    + [flex] +
    +
    + [flex="grow"] +
    +
    + [flex="auto"] +
    +
    + [flex="auto"] +
    +
    + [flex="initial"] +
    +
    +     +     + + + + + + + + + + + + + + + + + + + + + + + +
    flexWill grow and shrink as needed. Starts with a size of 0%. Same as flex="0".
    flex="none"Will not grow or shrink. Sized based on it's width and height values.
    flex="initial"Will shrink as needed. Starts with a size based on it's width and height values.
    flex="auto"Will grow and shrink as needed. Starts with a size based on it's width and height values.
    flex="grow"Will grow and shrink as needed. Starts with a size of 100%. Same as flex="100".
    + + +
    +
    +
    + +

    Ordering HTML Elements

    + +

    + Add the flex-order directive to a layout child to set its + order position within the layout container. Any integer value from -20 to 20 is accepted. +

    + + + +
    +
    +

    [flex-order="-1"]

    +
    +
    +

    [flex-order="1"]

    +

    [flex-order-gt-md="3"]

    +
    +
    +

    [flex-order="2"]

    +
    +
    +

    [flex-order="3"]

    +

    [flex-order-gt-md="1"]

    +
    +
    +     +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    APIDevice width when breakpoint overrides default
    flex-orderSets default layout order unless overridden by another breakpoint.
    flex-order-xswidth < 600px
    flex-order-gt-xswidth >= 600px
    flex-order-sm600px <= width < 960px
    flex-order-gt-smwidth >= 960px
    flex-order-md960px <= width < 1280px
    flex-order-gt-mdwidth >= 1280px
    flex-order-lg1280px <= width < 1920px
    flex-order-gt-lgwidth >= 1920px
    flex-order-xlwidth >= 1920px
    + + +

    + See the layout options page for more information on directives like + hide, hide-gt-md, and show-gt-md used in the above examples. +

    + +
    +
    +
    + +

    Add Offsets to the Preceding HTML Elements

    + +

    + Add the flex-offset directive to a layout child to set its + offset percentage within the layout container. Values must be multiples + of 5 or 33 / 66. These offsets establish a margin-left + with respect to the preceding element or the containers left boundary. +

    + +

    + When using flex-offset the margin-left offset is applied... regardless of your choice of flex-order. + or if you use a flex-direction: reverse. +

    + + + +
    +
    + [flex-offset="15"] + [flex="66"] +
    +
    + [flex] +
    +
    +     +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    APIDevice width when breakpoint overrides default
    flex-offsetSets default margin-left offset (%-based) unless overridden by another breakpoint.
    flex-offset-xswidth < 600px
    flex-offset-gt-xswidth >= 600px
    flex-offset-sm600px <= width < 960px
    flex-offset-gt-smwidth >= 960px
    flex-offset-md960px <= width < 1280px
    flex-offset-gt-mdwidth >= 1280px
    flex-offset-lg1280px <= width < 1920px
    flex-offset-gt-lgwidth >= 1920px
    flex-offset-xlwidth >= 1920px
    + + +
    + diff --git a/docs/app/partials/layout-container.tmpl.html b/docs/app/partials/layout-container.tmpl.html index 2552b5218d4..3a2f35b9f4e 100644 --- a/docs/app/partials/layout-container.tmpl.html +++ b/docs/app/partials/layout-container.tmpl.html @@ -1,28 +1,11 @@
    -

    Overview

    -

    - Angular Material's responsive CSS layout is built on - flexbox. -

    +

    Layout and Containers

    - 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 - help us separate concerns: attributes define layout, and classes define styling. -

    -

    - - Note: Due to performance problems related to attribute selectors in IE11, our attributes are converted - to class selectors at runtime. You should continue to use layout attribute selectors in your code. - -

    - -

    Layout Attribute

    -

    - Use the layout attribute on an element to arrange its children + Use the layout directive on a container element to specify the layout direction for its children: horizontally in a row (layout="row") or vertically in a column (layout="column"). - Row layout is the default if you specify the layout attribute without a value. + Note that row is the default layout direction if you specify the layout directive without a value.

    @@ -36,7 +19,9 @@

    Layout Attribute

    - +
    + +
    First item in row
    @@ -50,6 +35,111 @@

    Layout Attribute

    - See the layout options page for information on responsive layouts and other options. + Note that layout only affects the flow direction for that container's immediate children. +

    + +
    + +
    +

    Layouts and Responsive Breakpoints

    + +

    + As discussed in the Layout Introduction page you can + make your layout change depending upon the device view size by using breakpoint alias suffixes. +

    + +

    + To make your layout automatically change depending upon the device screen size, use one to the following layout + APIs to set the layout direction for devices with view widths:

    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    APIDevice width when breakpoint overrides default
    layoutSets default layout direction unless overridden by another breakpoint.
    layout-xswidth < 600px
    layout-gt-xswidth >= 600px
    layout-sm600px <= width < 960px
    layout-gt-smwidth >= 960px
    layout-md960px <= width < 1280px
    layout-gt-mdwidth >= 1280px
    layout-lg1280px <= width < 1920px
    layout-gt-lgwidth >= 1920px
    layout-xlwidth >= 1920px
    +
    + +

    + +

    + + +

    + For the demo below, as you shrink your browser window width notice the flow direction changes to column + for mobile devices (xs). And as you expand it will reset to row + for gt-sm view sizes. + +

    + + + +
    +
    + I'm above on mobile, and to the left on larger devices. +
    +
    + I'm below on mobile, and to the right on larger devices. +
    +
    +     +     + + + +

    + See the Layout Options page for more options such as padding, alignments, etc. +

    + + + +
    + diff --git a/docs/app/partials/layout-grid.tmpl.html b/docs/app/partials/layout-grid.tmpl.html deleted file mode 100644 index 04e921be4c6..00000000000 --- a/docs/app/partials/layout-grid.tmpl.html +++ /dev/null @@ -1,232 +0,0 @@ -
    - -

    - To customize the size and position of elements in a layout, use the - flex, flex-order, and flex-offset attributes. -

    - - - -
    -
    - [flex] -
    -
    - [flex] -
    -
    - [flex] -
    -
    -     -     -

    - Add the flex attribute to a layout's child element and the element will flex (grow or shrink) to fit - the area unused by other elements. flex defines how the element will ajust its size with respect to its - parent container and the other other elements within the container. -

    - - - -
    -
    - [flex="30"] -
    -
    - [flex="45"] -
    -
    - [flex="25"] -
    -
    - [flex="33"] -
    -
    - [flex="66"] -
    -
    - [flex="50"] -
    -
    - [flex] -
    -
    -     -     - -

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

    - Currently, the flex attribute value is restricted to multiples of five and 33 or 66. -
    - For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100". -

    -

    - See the layout options page for more information on responsive flex attributes like - hide-sm and layout-wrap used in the above examples. -

    - - - -
    -
    - [flex="0"] -
    -
    - [flex="none"] -
    -
    - [flex] -
    -
    - [flex="grow"] -
    -
    - [flex="auto"] -
    -
    - [flex="auto"] -
    -
    - [flex="initial"] -
    -
    -     -     - -

    - There are additional flex values provided by Angular Material to improve flexibility and to make the API - easier to understand. -

    - - - - - - - - - - - - - - - - - - - - - -
    flexWill grow and shrink as needed. Starts with a size of 0%. Same as flex="0".
    flex="none"Will not grow or shrink. Sized based on it's width and height values.
    flex="initial"Will shrink as needed. Starts with a size based on it's width and height values.
    flex="auto"Will grow and shrink as needed. Starts with a size based on it's width and height values.
    flex="grow"Will grow and shrink as needed. Starts with a size of 100%. Same as flex="100".
    - - - -
    -
    -

    [flex-order="-1"]

    -
    -
    -

    [flex-order="1"]

    -

    [flex-order-gt-md="3"]

    -
    -
    -

    [flex-order="2"]

    -
    -
    -

    [flex-order="3"]

    -

    [flex-order-gt-md="1"]

    -
    -
    -     -     -

    - Add the flex-order attribute to a layout child to set its - position within the layout. Any value from -9 to 9 is accepted. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    flex-orderSets element order.
    flex-order-smSets element order on devices less than 600px wide.
    flex-order-gt-smSets element order on devices greater than 600px wide.
    flex-order-mdSets element order on devices between 600px and 960px wide.
    flex-order-gt-mdSets element order on devices greater than 960px wide. -
    flex-order-lgSets element order on devices between 960px and 1200px wide.
    flex-order-gt-lgSets element order on devices greater than 1200px wide.
    -

    - See the layout options page for more information on attributes like - hide, hide-gt-md, and show-gt-md used in the above examples. -

    - - - -
    -
    - [flex offset="33"] -
    -
    - [flex] -
    -
    -     -     -

    - Add the flex-offset attribute to a layout child to set its - offset percentage within the layout. Values must be multiples - of 5 or 33 / 66. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    flex-offsetSets element offset.
    flex-offset-smSets element offset on devices less than 600px wide.
    flex-offset-gt-smSets element offset on devices greater than 600px wide.
    flex-offset-mdSets element offset on devices between 600px and 960px wide.
    flex-offset-gt-mdSets element offset on devices greater than 960px wide. -
    flex-offset-lgSets element offset on devices between 960px and 1200px wide.
    flex-offset-gt-lgSets element offset on devices greater than 1200px wide.
    -
    - diff --git a/docs/app/partials/layout-introduction.tmpl.html b/docs/app/partials/layout-introduction.tmpl.html new file mode 100644 index 00000000000..34c02df1bcf --- /dev/null +++ b/docs/app/partials/layout-introduction.tmpl.html @@ -0,0 +1,373 @@ +
    + +

    Overview

    +

    + Angular Material's Layout features provide sugar to enable developers to more easily create modern, + responsive layouts on top of CSS3 flexbox. + The layout API consists of a set of Angular directives that can + be applied to any of your application's HTML content. +

    + + +

    + Using HTML Directives as the API provides an easy way to set a value (eg. layout="row") and + helps with separation of concerns: Attributes define layout while CSS classes assign styling. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    HTML Markup APIAllowed values (raw or interpolated)
    layoutrow | column
    flex integer (increments of 5 for 0%->100%)
    flex-orderinteger values from -20 to 20
    flex-offsetinteger (increments of 5 for 0%->100%, 100%/3, 200%/3)
    layout-alignstart|center|end|space-around|space-between start|center|end|stretch
    layout-fill
    layout-wrap
    layout-nowrap
    layout-margin
    layout-padding
    show
    hide
    + + +

    And if we use Breakpoints as specified in Material Design:

    +

    +

    + + +

    We can associate breakpoints with mediaQuery definitions using breakpoint alias(es):

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    BreakpointMediaQuery (pixel range)
    xs'(max-width: 599px)'
    gt-xs'(min-width: 600px)'
    sm'(min-width: 600px) and (max-width: 959px)'
    gt-sm'(min-width: 960px)'
    md'(min-width: 960px) and (max-width: 1279px)'
    gt-md'(min-width: 1280px)'
    lg'(min-width: 1280px) and (max-width: 1919px)'
    gt-lg'(min-width: 1920px)'
    xl'(min-width: 1920px)'
    + +
    +
    +

    + API with Responsive Breakpoints +

    + +

    Now we can combine the breakpoint alias with the Layout API to easily support Responsive breakpoints + with our simple Layout markup convention. The alias is simply used as suffix extensions to the Layout + API keyword. +
    e.g. +

    + +

    + This notation results in, for example, the following table for the layout and flex APIs: +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    layout APIflex APIActivates when device
    layoutflexSets default layout direction & flex unless overridden by another breakpoint.
    layout-xsflex-xswidth < 600px
    layout-gt-xsflex-gt-xswidth >= 600px
    layout-smflex-sm600px <= width < 960px
    layout-gt-smflex-gt-smwidth >= 960px
    layout-mdflex-md960px <= width < 1280px
    layout-gt-mdflex-gt-mdwidth >= 1280px
    layout-lgflex-lg1280px <= width < 1920px
    layout-gt-lgflex-gt-lgwidth >= 1920/b>px
    layout-xlflex-xlwidth >= 1920px
    + +

    Below is an example usage of the Responsive Layout API:

    + + +
    + +
    +
    + +
    +
    +
    + +
    +
    + +
    +     + +
    + +

    + This Layout API means it is much easier to set up and maintain flexbox layouts vs. defining everything via CSS. + The developer uses the Layout HTML API to specify intention and the Layout engine handles all the issues of CSS flexbox styling. +

    + +

    + The Layout engine will log console warnings when it encounters conflicts or known issues. +

    + + +

    +
    +
    + +

    Under-the-Hood

    + +

    + Due to performance problems when using Attribute Selectors with Internet Explore browsers; see the following for more details: +

    + + + +

    + Layout directives dynamically generate class selectors at runtime. And the Layout CSS classNames and styles have each been + predefined in the angular-material.css stylesheet. +

    + +

    + Developers should continue to use Layout directives in the HTML + markup as the classes may change between releases. +

    + +

    + Let's see how this directive-to-className transformation works. Consider the simply use of the layout and flex directives (API): +

    + + +
    + +
    + +
    First item in row
    +
    Second item in row
    + +
    +
    + +
    First item in column
    +
    Second item in column
    + +
    + +
    +     + + +

    + At runtime, these attributes are transformed to CSS classes. +

    + + +
    + +
    + +
    First item in row
    +
    Second item in row
    + +
    +
    + +
    First item in column
    +
    Second item in column
    + +
    + +
    +     + +

    + Using the style classes above defined in angular-material.css +

    + + + + .flex { + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + box-sizing: border-box; + } + .flex-20 { + -webkit-flex: 1 1 20%; + -ms-flex: 1 1 20%; + flex: 1 1 20%; + max-width: 20%; + max-height: 100%; + box-sizing: border-box; + } + + .layout-row .flex-33 { + -webkit-flex: 1 1 33%; + -ms-flex: 1 1 33%; + flex: 1 1 33%; + box-sizing: border-box; + } + + .layout-row .flex-66 { + -webkit-flex: 1 1 66%; + -ms-flex: 1 1 66%; + flex: 1 1 66%; + box-sizing: border-box; + } + + + .layout-row .flex-33 { + max-width: calc(100% / 3); + max-height: 100%; + } + + .layout-row .flex-66 { + max-width: calc(200% / 3); + max-height: 100%; + } + + .layout-column .flex-33 { + max-width: 100%; + max-height: calc(100% / 3); + } + + .layout-column .flex-66 { + max-width: 100%; + max-height: calc(200% / 3); + } + + +
    diff --git a/docs/app/partials/layout-options.tmpl.html b/docs/app/partials/layout-options.tmpl.html index 6af5cda68cd..954d75f13d5 100644 --- a/docs/app/partials/layout-options.tmpl.html +++ b/docs/app/partials/layout-options.tmpl.html @@ -15,45 +15,69 @@

    See the Container Elements page for a basic explanation - of layout attributes. + of layout directives.
    To make your layout change depending upon the device screen size, there are - other layout attributes available: + other layout directives available:

    + + + + + + - + + + + + + + + + - + - + - + - + - + - + + + + +
    APIActivates when device
    layoutSets the default layout on all devices.Sets default layout direction unless overridden by another breakpoint.
    layout-xswidth < 600px
    layout-gt-xswidth >= 600px
    layout-smSets the layout on devices less than 600px wide (phones).600px <= width < 960px
    layout-gt-smSets the layout on devices greater than 600px wide (bigger than phones).width >= 960px
    layout-mdSets the layout on devices between 600px and 960px wide (tablets in portrait).960px <= width < 1280px
    layout-gt-mdSets the layout on devices greater than 960px wide (bigger than tablets in portrait).width >= 1280px
    layout-lgSets the layout on devices between 960 and 1200px wide (tablets in landscape).1280px <= width < 1920px
    layout-gt-lgSets the layout on devices greater than 1200px wide (computers and large screens).width >= 1920px
    layout-xlwidth >= 1920px


    +
    +
    + +

    Layout Margin, Padding, Wrap and Fill

    +
    + @@ -73,16 +97,17 @@

    - layout-margin adds margin around each flex child. It also adds a margin to the layout container itself. + layout-margin adds margin around each flex child. It also adds a margin to the layout + container itself.
    - layout-padding adds padding inside each flex child. It also adds padding to the layout container itself. + layout-padding adds padding inside each flex child. It also adds padding to the layout + container itself.
    layout-fill forces the layout element to fill its parent container.

    -
    -
    +

    Here is a non-trivial group of flex elements using layout-wrap

    @@ -97,77 +122,38 @@
    +

    - layout-wrap allows flex children to wrap within the container if the elements use more than 100%. + layout-wrap allows flex children to wrap within the container if the elements use more + than 100%.



    +
    +
    - - -
    -
    - I flex to one-third of the space on mobile, and two-thirds on other devices. -
    -
    - I flex to two-thirds of the space on mobile, and one-third on other devices. -
    -
    -     -     +

    Show & Hide

    -

    - See the Layout System page for a basic explanation - of flex and offset attributes. +

    Use the show hide APIs to responsively show or hide elements. While these work similar + to ng-show and ng-hide, these Angular Material Layout directives are mediaQuery-aware.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    flexSets flex.
    flex-smSets flex on devices less than 600px wide.
    flex-gt-smSets flex on devices greater than 600px wide.
    flex-mdSets flex on devices between 600px and 960px wide..
    flex-gt-mdSets flex on devices greater than 960px wide. -
    flex-lgSets flex on devices between 960px and 1200px.
    flex-gt-lgSets flex on devices greater than 1200px wide.
    - -
    - - +
    - Hidden on small and shown on larger devices. + Only show on gt-sm devices.
    - Shown on small and hidden on larger devices. + Shown on small and medium.
    + Hidden on gt-sm devices.
    -
    - Shown on small and medium size devices. +
    + Shown on small and medium size devices.
    + Hidden on gt-md devices.
    Shown on medium size devices only. @@ -180,62 +166,59 @@
    + + + + + + + - - + + + + + + + + - + + - + + - + + - + - + + - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + +
    hide (display: none)show (negates hide)Activates when:
    hidedisplay: nonehide-xsshow-xswidth < 600px
    hide-gt-xsshow-gt-xswidth >= 600px
    hide-smdisplay: none on devices less than 600px wide.show-sm600px <= width < 960px
    hide-gt-smdisplay: none on devices greater than 600px wide.hide-gt-smwidth >= 960px
    hide-mddisplay: none on devices between 600px and 960px wide.show-md960px <= width < 1280px
    hide-gt-mddisplay: none on devices greater than 960px wide. + show-gt-mdwidth >= 1280px
    hide-lgdisplay: none on devices between 960px and 1200px.show-lg1280px <= width < 1920px
    hide-gt-lgdisplay: none on devices greater than 1200px wide.
    showNegates hide.
    show-smNegates hide on devices less than 600px wide.
    show-gt-smNegates hide on devices greater than 600px wide.
    show-mdNegates hide on devices between 600px and 960px wide..
    show-gt-mdNegates hide on devices greater than 960px wide. -
    show-lgNegates hide on devices between 960px and 1200px.show-gt-lgwidth >= 1920/b>px
    show-gt-lgNegates hide on devices greater than 1200px wide.hide-xlshow-xlwidth >= 1920px
    +
    diff --git a/package.json b/package.json index 05ac1d005d4..6efcf67e300 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "dgeni-packages": "^0.10.3", "esprima": "^1.2.2", "glob": "~4.0.2", - "gulp": "^3.8.11", + "gulp": "^3.9.0", "gulp-autoprefixer": "^1.0.1", "gulp-concat": "^2.2.0", "gulp-connect": "^2.2.0", diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss index abe8ef5fe8f..14371b9207c 100644 --- a/src/components/autocomplete/autocomplete.scss +++ b/src/components/autocomplete/autocomplete.scss @@ -181,6 +181,7 @@ md-autocomplete { } } } + // IE Only @media screen and (-ms-high-contrast: active) { $border-color: #fff; @@ -230,6 +231,7 @@ md-autocomplete { } } +// IE Only @media screen and (-ms-high-contrast: active) { md-autocomplete, .md-autocomplete-suggestions { diff --git a/src/components/bottomSheet/bottom-sheet.scss b/src/components/bottomSheet/bottom-sheet.scss index 4c0d40f19a3..8dbf7749436 100644 --- a/src/components/bottomSheet/bottom-sheet.scss +++ b/src/components/bottomSheet/bottom-sheet.scss @@ -125,11 +125,11 @@ md-bottom-sheet { @include grid-items-per-row(3, true); } - @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) { + @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { @include grid-items-per-row(4); } - @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) { + @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { @include grid-items-per-row(6); } @@ -178,6 +178,7 @@ md-bottom-sheet { } } +// IE only @media screen and (-ms-high-contrast: active) { md-bottom-sheet { border: 1px solid #fff; diff --git a/src/components/button/button.scss b/src/components/button/button.scss index bbb4592c0ee..25a22bf58f4 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -224,6 +224,7 @@ button.md-button::-moz-focus-inner { border-radius: 0px 2px 2px 0px; } } +// IE only @media screen and (-ms-high-contrast: active) { .md-button.md-raised, .md-button.md-fab { diff --git a/src/components/chips/chips.scss b/src/components/chips/chips.scss index 73fd29ed962..67143b31403 100644 --- a/src/components/chips/chips.scss +++ b/src/components/chips/chips.scss @@ -183,6 +183,7 @@ $contact-chip-name-width: rem(12) !default; } } } +// IE only @media screen and (-ms-high-contrast: active) { .md-chip-input-container, md-chip { diff --git a/src/components/chips/demoContactChips/style.scss b/src/components/chips/demoContactChips/style.scss index f221e2c0fd2..a0f1089fa01 100644 --- a/src/components/chips/demoContactChips/style.scss +++ b/src/components/chips/demoContactChips/style.scss @@ -33,7 +33,8 @@ md-content.autocomplete { overflow: hidden; } } - @media (min-width: 900px) { + + @media screen and (min-width: 960px) { float: left; width: 33%; } diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss index 24c3cd42424..5e76b64e98d 100644 --- a/src/components/dialog/dialog.scss +++ b/src/components/dialog/dialog.scss @@ -120,10 +120,10 @@ md-dialog { } } -@media (max-width: $layout-breakpoint-sm) { +@media (max-width: $layout-breakpoint-sm - 1) { md-dialog.md-dialog-fullscreen { min-height: 100%; min-width: 100%; border-radius: 0; } -} \ No newline at end of file +} diff --git a/src/components/menu/demoMenuPositionModes/index.html b/src/components/menu/demoMenuPositionModes/index.html index 63c5feb1748..d293547f07b 100644 --- a/src/components/menu/demoMenuPositionModes/index.html +++ b/src/components/menu/demoMenuPositionModes/index.html @@ -1,10 +1,12 @@
    -
    -

    Position Mode Demos

    -

    The md-position-mode attribute can be used to specify the positioning along the x and y axis.

    -
    -

    Target-Based Position Modes

    -
    +
    +
    +

    Position Mode Demos

    +

    The md-position-mode attribute can be used to specify the positioning along the x and y axis.

    +
    +

    Target-Based Position Modes

    +
    +

    Target Mode Positioning (default)

    diff --git a/src/components/menu/demoMenuWidth/index.html b/src/components/menu/demoMenuWidth/index.html index 528c427e0dc..f031614db68 100644 --- a/src/components/menu/demoMenuWidth/index.html +++ b/src/components/menu/demoMenuWidth/index.html @@ -1,8 +1,10 @@ -
    -
    +
    +
    +

    Different Widths

    md-menu-content may specify a width attribute which will follow the official spec.

    -
    +
    +

    Wide menu (width=6)

    diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss index 0c8eb9e258b..8e9ca525d50 100644 --- a/src/components/menu/menu.scss +++ b/src/components/menu/menu.scss @@ -139,6 +139,7 @@ md-toolbar { } } } + @media (min-width: $layout-breakpoint-sm) { md-menu-content { min-width: 96px; @@ -149,3 +150,4 @@ md-toolbar { } } } + diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss index e628decaa59..ae12de6590a 100644 --- a/src/components/toast/toast.scss +++ b/src/components/toast/toast.scss @@ -88,7 +88,7 @@ md-toast { } } -@media (max-width: $layout-breakpoint-sm) { +@media (max-width: $layout-breakpoint-sm - 1) { md-toast { left: 0; right: 0; @@ -157,4 +157,4 @@ md-toast { // While animating, set the toast parent's overflow to hidden so scrollbars do not appear .md-toast-animating { overflow: hidden !important; -} \ No newline at end of file +} diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index a100f35770d..5a0d717f7f3 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -132,8 +132,7 @@ md-toolbar { } // Handle mobile portrait -@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and - (orientation: portrait) { +@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) { md-toolbar { min-height: $toolbar-height-mobile-portrait; } @@ -145,8 +144,7 @@ md-toolbar { } // Handle mobile landscape -@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and - (orientation: landscape) { +@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) { md-toolbar { min-height: $toolbar-height-mobile-landscape; } diff --git a/src/core/services/layout/layout.attributes.scss b/src/core/services/layout/layout.attributes.scss index 3b034dc9163..16ec7148c1c 100644 --- a/src/core/services/layout/layout.attributes.scss +++ b/src/core/services/layout/layout.attributes.scss @@ -41,7 +41,7 @@ $layout-breakpoint-lg: 1920px !default; } } - @for $i from 0 through 19 { + @for $i from -20 through 20 { $order : ''; $suffix : ''; @@ -421,11 +421,14 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) { // SMALL SCREEN - [hide-sm], [hide] { - &:not([show-sm]):not([show]) { + [hide-sm], [hide-gt-xs] { + &:not([show-gt-xs]):not([show-sm]):not([show]) { display: none; } } + [hide-sm]:not([show-sm]):not([show]) { + display: none; + } @include layouts_for_breakpoint(sm); } @@ -437,14 +440,14 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { // MEDIUM SCREEN - [hide], [hide-gt-sm] { - &:not([show-gt-sm]):not([show-md]):not([show]) { + [hide], [hide-gt-xs], [hide-gt-sm] { + &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) { + display: none; + } + } + [hide-md]:not([show-md]):not([show]) { display: none; } - } - [hide-md]:not([show-md]):not([show]) { - display: none; - } @include layouts_for_breakpoint(md); } @@ -455,8 +458,8 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { // LARGE SCREEN - [hide], [hide-gt-sm], [hide-gt-md] { - &:not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) { + [hide],[hide-gt-xs], [hide-gt-sm], [hide-gt-md] { + &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) { display: none; } } @@ -469,18 +472,18 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-lg) { // BIGGER THAN LARGE SCREEN - [hide-gt-sm], [hide-gt-md], [hide-gt-lg], [hide] { - &:not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) { + @include layouts_for_breakpoint(gt-lg); + @include layouts_for_breakpoint(xl); + + // BIGGER THAN LARGE SCREEN + [hide], [hide-gt-xs], [hide-gt-sm], [hide-gt-md], [hide-gt-lg] { + &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) { display: none; } } - [hide-xl]:not([show-xl]):not([show]) { + [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) { display: none; } - - - // BIGGER THAN LARGE SCREEN - @include layouts_for_breakpoint(gt-lg); - @include layouts_for_breakpoint(xl); } + diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js index 3c983e83f7f..efa5525d21e 100644 --- a/src/core/services/layout/layout.js +++ b/src/core/services/layout/layout.js @@ -265,7 +265,8 @@ * any attribute value */ function attributeWithoutValue(className) { - return ['$interpolate', function(_$interpolate_, _$log_) { + return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) { + $mdUtil = _$mdUtil_; $interpolate = _$interpolate_; $log = _$log_; @@ -276,8 +277,6 @@ if (config.enabled) { // immediately replace static (non-interpolated) invalid values... - validateAttributeUsage(className, attr, element, $log); - validateAttributeValue( className, getNormalizedAttrValue(className, attr, ""), buildUpdateFn(element, className, attr) @@ -458,17 +457,21 @@ return found; } - function extractAlignAxis(config) { + function extractAlignAxis(attrValue) { var axis = { main : "start", cross: "stretch" }, values; - config = (config || ""); - if ( config.indexOf("-") == 0 ) config = "none" + config; + attrValue = (attrValue || ""); + if ( attrValue.indexOf("-") == 0 ) { + // For missing main-axis values + attrValue = "none" + attrValue; + } - values = config.toLowerCase().trim().replace(WHITESPACE, "-").split("-"); - if ( values[0] === "space" ) { + values = attrValue.toLowerCase().trim().replace(WHITESPACE, "-").split("-"); + if ( values.length && (values[0] === "space") ) { + // for main-axis values of "space-around" or "space-between" values = [ values[0]+"-"+values[1],values[2] ]; } diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss index 853566fe183..cea340ae8e2 100644 --- a/src/core/services/layout/layout.scss +++ b/src/core/services/layout/layout.scss @@ -31,7 +31,7 @@ } } - @for $i from 0 through 19 { + @for $i from -20 through 20 { $order : ''; $suffix : ''; @@ -47,6 +47,7 @@ } } } + @mixin offset-for-name($sizes:null) { @if $sizes == null { $sizes : ''; } @@ -443,12 +444,15 @@ } @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) { - // SMALL SCREEN - .hide-sm, .hide { - &:not(.show-sm):not(.show) { + .hide, .hide-gt-xs { + &:not(.show-gt-xs):not(.show-sm):not(.show) { display: none; } } + .hide-sm:not(.show-sm):not(.show) { + display: none; + } + @include layouts_for_breakpoint(sm); } @@ -460,8 +464,8 @@ @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { // MEDIUM SCREEN - .hide, .hide-gt-sm { - &:not(.show-gt-sm):not(.show-md):not(.show) { + .hide, .hide-gt-xs, .hide-gt-sm { + &:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show) { display: none; } } @@ -478,32 +482,30 @@ @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { // LARGE SCREEN - .hide, .hide-gt-sm, .hide-gt-md { - &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) { - display: none; - } - } - .hide-lg:not(.show-lg):not(.show) { + .hide,.hide-gt-xs, .hide-gt-sm, .hide-gt-md { + &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) { display: none; } + } + .hide-lg:not(.show-lg):not(.show) { + display: none; + } @include layouts_for_breakpoint(lg); } @media (min-width: $layout-breakpoint-lg) { + @include layouts_for_breakpoint(gt-lg); + @include layouts_for_breakpoint(xl); + // BIGGER THAN LARGE SCREEN - .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide { - &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) { + .hide, .hide-gt-xs, .hide-gt-sm, .hide-gt-md, .hide-gt-lg { + &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) { display: none; } } - .hide-xl:not(.show-xl):not(.show) { + .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show) { display: none; } - - // BIGGER THAN LARGE SCREEN - @include layouts_for_breakpoint(gt-lg); - @include layouts_for_breakpoint(xl); } -