Collapse

<script>
  import { Collapse, CollapseItem } from 'svelma-pro'

  let activeNames = ['1', '2'];

  function change(e) {
    console.log(e.detail)
  }
</script>

<Collapse activeNames={activeNames} on:change={change}>
  <CollapseItem title="Click Me!" name='1'>
    <div class="notification">
      <div class="content">
        <h3>Subtitle</h3>
        <p>Lorem ipsum dolor...</p>
      </div>
    </div>
  </CollapseItem>
  <CollapseItem title="娱乐新闻" name='2'>
    <div class="notification"> 
      <div class="content">
        <p>娱乐八卦天天有</p>
      </div>
    </div>
  </CollapseItem>
  <CollapseItem title="体育新闻" name='3'>
    <div class="notification"> 
      <div class="content">
        <p>这里有你最喜欢的体育趣闻</p>
      </div>
    </div>
  </CollapseItem>
</Collapse>

<script>
  import { Collapse, CollapseItem } from 'svelma-pro'

  let accordion = true;

  function change(e) {
    console.log(e.detail)
  }
</script>

<Collapse accordion activeNames='1'  on:change={change}>
  <CollapseItem active="{true}" title="目录一" name="1">
    <div class="notification">
      <div class="content">
        <h3>Subtitle</h3>
        <p>Lorem ipsum dolor...</p>
      </div>
    </div>
  </CollapseItem>
  <CollapseItem title="目录二" name="3">
    <div class="notification">
      <div class="content">
        <p>我最喜欢的颜色</p>
      </div>
    </div>
  </CollapseItem>
</Collapse>

<script>
  import { Collapse, CollapseItem } from 'svelma-pro'

</script>

<Collapse>
  <CollapseItem name="1">
    <div slot="title">
      我是自定义面板!
      <i class="fa fa-check"></i>
    </div>
    <div class="notification">
      <div class="content">
        <h3>Subtitle</h3>
        <p>Lorem ipsum dolor...</p>
      </div>
    </div>
  </CollapseItem>
  <CollapseItem title="我是标题面板" name="2">
    <div class="notification">
      <div class="content">
        <p>我最喜欢的颜色</p>
      </div>
    </div>
  </CollapseItem>
</Collapse>