material-design-lite/src/expansion/snippets/expansion.html

50 lines
1.7 KiB
HTML

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