Permalink
Browse files

feature: Accordion supports more complex headers

  • Loading branch information...
MikeMitterer committed Jul 30, 2015
1 parent 61a13bc commit f00db4c6edd327f4e3d0653b39f9b710d39932bb
@@ -30,7 +30,6 @@
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<link rel="stylesheet" href="prism-default.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="styles.css">
@@ -2,67 +2,146 @@
samplename: accordion
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/master/example/mdlx_accordion/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<div class="demo-preview-block">
<h5>Multiple sections can be open at the same time</h5>
<div class="mdl-accordion-group">
<!-- Panel 1 -->
<!-- Panel 1 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator right">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 2 -->
<!-- Panel 2 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator right">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in
at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut
cupiditate delectus.</p>
</div>
</div>
<!-- Panel 3 -->
<!-- Panel 3 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<label class="mdl-accordion__label">Panel 3<i
class="material-icons indicator right">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing
elit.</p>
</div>
</div>
</div><!-- .mdl-accordion -->
</div> <!-- .mdl-accordion-group -->
</div>
<div class="preview-block sample">
<div class="demo-preview-block sample">
<h5>Only one section is open</h5>
<div class="mdl-accordion-group mdl-accordion--radio-type mdl-js-ripple-effect">
<!-- Panel 1 -->
<!-- Panel 1 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 1</label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 2 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 2</label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in
at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut
cupiditate delectus.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 37</label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing
elit.</p>
</div>
</div>
<!-- Panel 2 -->
</div> <!-- .mdl-accordion-group -->
</div>
<div class="demo-preview-block">
<h5>Advanced Panel-Header</h5>
<div class="mdl-accordion-group">
<!-- Panel 1 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<label class="mdl-accordion__label with-toolbar">Panel 1
<span class="mdl-accordion__label--stretch">
<i class="mdl-icon material-icons mdl-color-text--accent">3d_rotation</i>
<i class="mdl-icon material-icons mdl-color-text--accent">accessibility</i>
<i class="mdl-icon material-icons mdl-color-text--accent">account_balance</i>
</span>
<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- Panel 3 -->
<!-- Panel 2 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<label class="mdl-accordion__label">Panel 2<span class="sample">Text in span</span>
<i class="material-icons indicator">chevron_right</i>
</label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in
at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut
cupiditate delectus.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
<label class="mdl-accordion__label">
<i class="material-icons indicator">loop</i>
Panel 3
</label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
</div><!-- .mdl-accordion -->
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing
elit.</p>
</div>
</div>
</div> <!-- .mdl-accordion-group -->
</div>
<!-- start Autogenerated with gensamples.dart -->
<!-- <script type="application/dart" src="main.dart"></script> -->
<!-- <script type="text/javascript" src="packages/browser/dart.js"></script> -->
<!-- end Autogenerated with gensamples.dart -->
@@ -1,2 +1,3 @@
template_dir: ../_templates
assets_dir: ../_assets
watchfolder1: ../../../lib/assets/styles/accordion
@@ -20,5 +20,31 @@
.demo-page--accordion, .demo-section--accordion {
.demo-preview-block {
margin-bottom: 24px;
.mdl-accordion__label--stretch {
text-align: right;
margin-right: 12px;
.material-icons {
font-size: 18px;
margin-right: 8px;
}
}
.mdl-accordion__label {
&.with-toolbar {
.indicator {
margin-right: 12px;
}
}
.sample {
padding: 0 1em;
font-weight: bold;
}
}
}
}
Oops, something went wrong.

0 comments on commit f00db4c

Please sign in to comment.