@infinitoui/infinito-modal

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"	弹窗的那边距