drub0y

<template>
  <div class="collapsible-open-close-events">
    <ul md-collapsible="on-open.call: collapsibleOpen($event); on-close.call: collapsibleClose($event)">
      <li ref="firstSection">
        <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First<span md-badge data-badge-caption="opens">${firstSection.openCount || 0}</span><span md-badge data-badge-caption="closes">${firstSection.closeCount || 0}</span></div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
      </li>
      <li ref="secondSection">
        <div class="collapsible-header"><i class="mdi-maps-place"></i>Second<span md-badge data-badge-caption="opens">${secondSection.openCount || 0}</span><span md-badge data-badge-caption="closes">${secondSection.closeCount || 0}</span></div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>

drub0y

<template>
  <div>
    <ul class="collection">
      <li class="collection-item">Sent</li>
      <li class="collection-item">Inbox<span md-badge="is-new: true;">3</span></li>
      <li class="collection-item">Spam<span show.bind="spamCount > 0" class="yellow black-text" md-badge="is-new: true; caption.bind: spamCaption">${spamCount}</span></li>
    </ul>
  </div>
  <div class="actions">
    <hr />