Preview

Demo

Install

npm install @infinitoui/infinito-modal

Usage

引入组件：

import '@infinitoui/infinito-modal'

使用：

import { LitElement, html, css } from 'lit-element'
import '@infinitoui/infinito-button'
import '@infinitoui/infinito-modal'

class ModalWrapper extends LitElement {

  static get properties() {
    return {
      open: { type: Boolean }
    }
  }

  constructor() {
    super()
    this.open = false
  }

  static styles = css`
    div {
      padding: 30px;
    }
  `

  render() {
    return html`
      <div>
        <infinito-button @click=${this.openModal}>弹窗</infinito-button>
        <infinito-modal .open=${this.open} .onCancel=${this.handleCancel}>
          <div slot="body">
            这是弹窗的内容
          </div>
        </infinito-modal>
      </div>
      `
  }

  openModal() {
    this.open = true
  }

  handleCancel = () => {
    this.open = false
  }
}

Properties

| Property | Attribute | Type | Default | Description | |-------------|-------------|------------|---------|-------------| | closeable | closeable | boolean | true | 是否显示左上角关闭按钮 | | onCancel | onCancel | function | | 关闭弹窗的回调函数 | | open | open | boolean | false | 默认是否打开弹窗 |

Slots

| Name | Description | |--------|-------------| | body | 弹窗主体内容 | | foot | footer |

CSS Custom Properties

| Property | Default | Description | |-------------------|---------|-------------| | --border-radius | "6px" | 弹窗圆角 | | --modal-padding | "20px" | 弹窗的那边距 |