Add expansion component

This commit is contained in:
Jonathan Garbee 2017-03-28 11:22:40 -04:00
parent 046356689b
commit 5324cedee2
5 changed files with 212 additions and 0 deletions

View File

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

42
src/expansion/README.md Normal file
View File

@ -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 `<details>` 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.

View File

@ -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);
}
}
}

View File

@ -0,0 +1,49 @@
<details class="mdl-expansion">
<summary class="mdl-expansion__summary">
<span class="mdl-expansion__header">Trip name</span>
<span class="mdl-expansion__secondary-header">Caribbean Cruise</span>
</summary>
</details>
<details class="mdl-expansion">
<summary class="mdl-expansion__summary">
<span class="mdl-expansion__header">Location</span>
<span class="mdl-expansion__secondary-header">Barbados</span>
</summary>
<div class="mdl-expansion__content">
<select>
<option>One</option>
<option>two</option>
</select>
</div>
<div class="mdl-expansion__actions">
<button class="mdl-expansion__action mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Save</button>
<button class="mdl-expansion__action mdl-button mdl-js-button mdl-button--raised">Cancel</button>
</div>
</details>
<details class="mdl-expansion">
<summary class="mdl-expansion__summary">
<span class="mdl-expansion__header">Start and end dates</span>
<span class="mdl-expansion__secondary-header">Start date: Feb 29, 2016</span>
<span class="mdl-expansion__secondary-header">End date: Not set</span>
</summary>
</details>
<details class="mdl-expansion">
<summary class="mdl-expansion__summary">
<span class="mdl-expansion__header">Carrier</span>
<span class="mdl-expansion__secondary-header">The best cruise line</span>
</summary>
</details>
<details class="mdl-expansion">
<summary class="mdl-expansion__summary">
<span class="mdl-expansion__header">
Meal preferences
<span class="mdl-expansion__subheader">
Optional
</span>
</span>
<span class="mdl-expansion__secondary-header">
Vegetarian
</span>
</summary>
</details>

View File

@ -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";