Skip to content

Commit 5324ced

Browse files
GarbeeGarbee
committed
Add expansion component
1 parent 0463566 commit 5324ced

File tree

5 files changed

+212
-0
lines changed

5 files changed

+212
-0
lines changed

‎docs/_pages/components.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,17 @@ categories:
127127
limited cross-browser support. To ensure support across all modern
128128
browsers, please consider using a polyfill or creating your own.
129129
There is no polyfill included with MDL.
130+
- name: expansion
131+
title: Expansion
132+
description: Collapsible content sections.
133+
components:
134+
- name: expansion
135+
class: mdl-expansion
136+
snippets:
137+
- snippet_group:
138+
- caption: Example Expansion
139+
file: expansion.html
140+
full_width: true
130141
- name: layout
131142
title: Layout
132143
description: Building blocks for constructing a page layout.

‎src/expansion/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
## Introduction
2+
3+
The Material Design Lite (MDL) **expansion** component provides a clean interface
4+
to show collapsable content areas to users.
5+
6+
## Basic Usage
7+
8+
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.
9+
10+
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.
11+
12+
Keep in mind, the order is automatically reversed for actions.
13+
Material Design requires that the primary (confirmation) action be displayed last.
14+
So, the first action you create will appear last on the action bar.
15+
This allows for more natural coding and tab ordering while following the specification.
16+
17+
Remember to add the event handlers for your action items.
18+
19+
## CSS Classes
20+
21+
### Blocks
22+
23+
| MDL Class | Effect | Remarks |
24+
|-----------|--------|---------|
25+
| `mdl-expansion` | Defines the container of the expansion component. | Required on expansion container. |
26+
27+
### Elements
28+
29+
30+
| MDL Class | Effect | Remarks |
31+
|-----------|--------|---------|
32+
| `mdl-expansion__summary` | Defines the summary container for the expansion panel. | Required on summary container. |
33+
| `mdl-expansion__header` | Defines the primary header for the summary. | Required on the header container within the summary. |
34+
| `mdl-expansion__subheader` | Defines the subheading for the summary. | Optional on a node within the header container. |
35+
| `mdl-expansion__secondary-header` | Defines auxiliary content for the summary. | Optional on a node within the summary container. |
36+
| `mdl-expansion__content` | Defines the container node for the content that is toggled. | Required on container node after the summary. |
37+
| `mdl-expansion__actions` | Defines the container node for the actions for any forms within the content. | Optional on container within the content |
38+
| `mdl-expansion__action` | Defines an action trigger to provide the appropriate margin. | Optional on trigger within the actions. |
39+
40+
### Modifiers
41+
42+
There are no modifiers for the expansion panel.

‎src/expansion/_expansion.scss

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* Copyright 2016 Google Inc. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
@import "../variables";
18+
@import "../mixins";
19+
20+
.mdl-expansion {
21+
border-bottom: 1px solid rgba(0, 0, 0, .12);
22+
box-sizing: border-box;
23+
24+
&__summary {
25+
@include typo-preferred-font;
26+
padding-left: 24px;
27+
padding-right: 24px;
28+
height: 48px;
29+
display: flex;
30+
outline: none;
31+
32+
&::-webkit-details-marker {
33+
display: none;
34+
}
35+
36+
&::after {
37+
@include typo-icon;
38+
content: '\e313';
39+
display: inline-flex;
40+
flex-direction: column;
41+
user-select: none;
42+
justify-content: center;
43+
transition: transform 200ms, color 200ms;
44+
margin-left: auto;
45+
color: rgba(0, 0, 0, .38);
46+
}
47+
48+
&:focus {
49+
background-color: unquote("rgba(#{$palette-grey-200}, 1)");
50+
&::after {
51+
color: rgba(0, 0, 0, .54);
52+
}
53+
}
54+
}
55+
56+
&__header {
57+
display: flex;
58+
flex-direction: column;
59+
justify-content: center;
60+
font-size: 0.9375rem;
61+
font-weight: 500;
62+
flex-basis: 30%;
63+
margin-right: 16px;
64+
}
65+
66+
&__subheader {
67+
font-size: .75rem;
68+
color: rgba(0, 0, 0, .54);
69+
}
70+
71+
&__secondary-header {
72+
display: flex;
73+
flex-direction: column;
74+
justify-content: center;
75+
font-size: 0.9375rem;
76+
font-weight: 500;
77+
flex-basis: 30%;
78+
color: rgba(0, 0, 0, .87);
79+
margin-right: 16px;
80+
}
81+
82+
&__content {
83+
@include typo-preferred-font;
84+
padding-left: 24px;
85+
padding-right: 24px;
86+
padding-top: 16px;
87+
padding-bottom: 16px;
88+
&+.mdl-expansion__actions {
89+
border-top: 1px solid rgba(0, 0, 0, .12);
90+
}
91+
}
92+
93+
&__actions {
94+
display: flex;
95+
flex-direction: row-reverse;
96+
padding-top: 16px;
97+
padding-bottom: 16px;
98+
}
99+
100+
&__action {
101+
margin-right: 8px;
102+
}
103+
104+
&[open] {
105+
.mdl-expansion__summary::after {
106+
transform: rotate(180deg);
107+
}
108+
}
109+
}

‎src/expansion/snippets/expansion.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<details class="mdl-expansion">
2+
<summary class="mdl-expansion__summary">
3+
<span class="mdl-expansion__header">Trip name</span>
4+
<span class="mdl-expansion__secondary-header">Caribbean Cruise</span>
5+
</summary>
6+
</details>
7+
<details class="mdl-expansion">
8+
<summary class="mdl-expansion__summary">
9+
<span class="mdl-expansion__header">Location</span>
10+
<span class="mdl-expansion__secondary-header">Barbados</span>
11+
</summary>
12+
13+
<div class="mdl-expansion__content">
14+
<select>
15+
<option>One</option>
16+
<option>two</option>
17+
</select>
18+
</div>
19+
<div class="mdl-expansion__actions">
20+
<button class="mdl-expansion__action mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Save</button>
21+
<button class="mdl-expansion__action mdl-button mdl-js-button mdl-button--raised">Cancel</button>
22+
</div>
23+
</details>
24+
<details class="mdl-expansion">
25+
<summary class="mdl-expansion__summary">
26+
<span class="mdl-expansion__header">Start and end dates</span>
27+
<span class="mdl-expansion__secondary-header">Start date: Feb 29, 2016</span>
28+
<span class="mdl-expansion__secondary-header">End date: Not set</span>
29+
</summary>
30+
</details>
31+
<details class="mdl-expansion">
32+
<summary class="mdl-expansion__summary">
33+
<span class="mdl-expansion__header">Carrier</span>
34+
<span class="mdl-expansion__secondary-header">The best cruise line</span>
35+
</summary>
36+
</details>
37+
<details class="mdl-expansion">
38+
<summary class="mdl-expansion__summary">
39+
<span class="mdl-expansion__header">
40+
Meal preferences
41+
<span class="mdl-expansion__subheader">
42+
Optional
43+
</span>
44+
</span>
45+
<span class="mdl-expansion__secondary-header">
46+
Vegetarian
47+
</span>
48+
</summary>
49+
</details>

‎src/material-design-lite.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
@import "chip/chip";
3636
@import "data-table/data-table";
3737
@import "dialog/dialog";
38+
@import "expansion/expansion";
3839
@import "footer/mega_footer";
3940
@import "footer/mini_footer";
4041
@import "icon-toggle/icon-toggle";

0 commit comments

Comments
 (0)