# svelma-pro
可折叠元素

# Collapse

## 可折叠元素

基础用法

Codesandbox
Click Me!

### Subtitle

Lorem ipsum dolor...

娱乐新闻
体育新闻

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

手风琴模式

Codesandbox
目录一

### Subtitle

Lorem ipsum dolor...

目录二

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

自定义面板标题

Codesandbox
我是自定义面板!
我是标题面板

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

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`activeNames` | 当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array) | string, number | — | `[]`
`accordion` | 是否手风琴模式 | Boolean | — | `false`
`name` | 组件唯一标识符 | string, number | — | `随机数`
`title` | 面板标题 | string | — | `未定义标题`

## EVENT

Name | Parameters | Description
--- | --- | ---
`change` | e | 改变折叠框事件