Add expansion component
Jonathan Garbee
parent
046356689b
commit
5324cedee2
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue