# svelma-pro
模态框

# Modal

## 模态框

Codesandbox

    <script>
      import { Button, Modal } from 'svelma-pro'

      let active = false
    </script>

    <Button class="block" on:click={() => active = !active}>Toggle</Button>
    <Modal bind:active={active}>
      <p class="image is-4by3">
        <img alt="Test image" src="https://via.placeholder.com/1280x920"/>
      </p>
    </Modal>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`active` | 是否激活模态框 | Boolean | — | `false`
`width` | 宽度 | String | — | `false`
`height` | 高度 | String | — | `false`
`title` | 标题 | String | — | `Modal title`
`showClose` | 是否显示左上角关闭按钮 | Boolean | — | `true`
`backdrop` | 是否显示遮罩 | Boolean | — | `true`
`backdropClose` | 遮罩存在时,是否点击关闭 | Boolean | — | `true`
`showHeader` | 是否显示头部 | Boolean | — | `true`

## EVENT

Name | Parameters | Description
--- | --- | ---
`closeEvent` | — | 取消事件