diff --git a/docs/_pages/components.md b/docs/_pages/components.md index 94801540..b070f392 100644 --- a/docs/_pages/components.md +++ b/docs/_pages/components.md @@ -127,6 +127,17 @@ categories: limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own. There is no polyfill included with MDL. + - name: expansion + title: Expansion + description: Collapsible content sections. + components: + - name: expansion + class: mdl-expansion + snippets: + - snippet_group: + - caption: Example Expansion + file: expansion.html + full_width: true - name: layout title: Layout description: Building blocks for constructing a page layout. diff --git a/src/expansion/README.md b/src/expansion/README.md new file mode 100644 index 00000000..d68626b4 --- /dev/null +++ b/src/expansion/README.md @@ -0,0 +1,42 @@ +## Introduction + +The Material Design Lite (MDL) **expansion** component provides a clean interface +to show collapsable content areas to users. + +## Basic Usage + +To use the expansion panel component browsers must support the [details element](https://www.w3.org/TR/2011/WD-html5-author-20110809/the-details-element.html). Currently only [IE and Edge](http://caniuse.com/#feat=details) do not provide support for this. For support there you'll need to include a polyfill for the `
` element. There are a few available which each have different pitfalls to test them to find the one that best suites your needs. + +Once you have support for detail elements all you need to do is make them with a summary and content containers. Remember that the content element comes directly after the summary element and contains all the rest of the content for the block. If your content has a form or some kind of actions for the user to carry out, include an actions container with actions in the content container. + +Keep in mind, the order is automatically reversed for actions. +Material Design requires that the primary (confirmation) action be displayed last. +So, the first action you create will appear last on the action bar. +This allows for more natural coding and tab ordering while following the specification. + +Remember to add the event handlers for your action items. + +## CSS Classes + +### Blocks + +| MDL Class | Effect | Remarks | +|-----------|--------|---------| +| `mdl-expansion` | Defines the container of the expansion component. | Required on expansion container. | + +### Elements + + +| MDL Class | Effect | Remarks | +|-----------|--------|---------| +| `mdl-expansion__summary` | Defines the summary container for the expansion panel. | Required on summary container. | +| `mdl-expansion__header` | Defines the primary header for the summary. | Required on the header container within the summary. | +| `mdl-expansion__subheader` | Defines the subheading for the summary. | Optional on a node within the header container. | +| `mdl-expansion__secondary-header` | Defines auxiliary content for the summary. | Optional on a node within the summary container. | +| `mdl-expansion__content` | Defines the container node for the content that is toggled. | Required on container node after the summary. | +| `mdl-expansion__actions` | Defines the container node for the actions for any forms within the content. | Optional on container within the content | +| `mdl-expansion__action` | Defines an action trigger to provide the appropriate margin. | Optional on trigger within the actions. | + +### Modifiers + +There are no modifiers for the expansion panel. diff --git a/src/expansion/_expansion.scss b/src/expansion/_expansion.scss new file mode 100644 index 00000000..fb8c428a --- /dev/null +++ b/src/expansion/_expansion.scss @@ -0,0 +1,109 @@ +/** + * Copyright 2016 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "../variables"; +@import "../mixins"; + +.mdl-expansion { + border-bottom: 1px solid rgba(0, 0, 0, .12); + box-sizing: border-box; + + &__summary { + @include typo-preferred-font; + padding-left: 24px; + padding-right: 24px; + height: 48px; + display: flex; + outline: none; + + &::-webkit-details-marker { + display: none; + } + + &::after { + @include typo-icon; + content: '\e313'; + display: inline-flex; + flex-direction: column; + user-select: none; + justify-content: center; + transition: transform 200ms, color 200ms; + margin-left: auto; + color: rgba(0, 0, 0, .38); + } + + &:focus { + background-color: unquote("rgba(#{$palette-grey-200}, 1)"); + &::after { + color: rgba(0, 0, 0, .54); + } + } + } + + &__header { + display: flex; + flex-direction: column; + justify-content: center; + font-size: 0.9375rem; + font-weight: 500; + flex-basis: 30%; + margin-right: 16px; + } + + &__subheader { + font-size: .75rem; + color: rgba(0, 0, 0, .54); + } + + &__secondary-header { + display: flex; + flex-direction: column; + justify-content: center; + font-size: 0.9375rem; + font-weight: 500; + flex-basis: 30%; + color: rgba(0, 0, 0, .87); + margin-right: 16px; + } + + &__content { + @include typo-preferred-font; + padding-left: 24px; + padding-right: 24px; + padding-top: 16px; + padding-bottom: 16px; + &+.mdl-expansion__actions { + border-top: 1px solid rgba(0, 0, 0, .12); + } + } + + &__actions { + display: flex; + flex-direction: row-reverse; + padding-top: 16px; + padding-bottom: 16px; + } + + &__action { + margin-right: 8px; + } + + &[open] { + .mdl-expansion__summary::after { + transform: rotate(180deg); + } + } +} diff --git a/src/expansion/snippets/expansion.html b/src/expansion/snippets/expansion.html new file mode 100644 index 00000000..2cf05f39 --- /dev/null +++ b/src/expansion/snippets/expansion.html @@ -0,0 +1,49 @@ +
+ + Trip name + Caribbean Cruise + +
+
+ + Location + Barbados + + +
+ +
+
+ + +
+
+
+ + Start and end dates + Start date: Feb 29, 2016 + End date: Not set + +
+
+ + Carrier + The best cruise line + +
+
+ + + Meal preferences + + Optional + + + + Vegetarian + + +
diff --git a/src/material-design-lite.scss b/src/material-design-lite.scss index 512360e1..391da201 100644 --- a/src/material-design-lite.scss +++ b/src/material-design-lite.scss @@ -35,6 +35,7 @@ @import "chip/chip"; @import "data-table/data-table"; @import "dialog/dialog"; +@import "expansion/expansion"; @import "footer/mega_footer"; @import "footer/mini_footer"; @import "icon-toggle/icon-toggle";