@infinitoui/infinito-modal v1.7.7

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

Slots

CSS Custom Properties