@belleui/belle-modal

npm install @belleui/belle-modal

Usage no npm install needed!

<script type="module">
  import belleuiBelleModal from 'https://cdn.skypack.dev/@belleui/belle-modal';
</script>

README

@belleui/belle-modal

Downloads per month NPM Version TypeScript Published on webcomponents.org

Preview

screent shot

Install

npm install @belleui/belle-modal

Useage

Basic Useage

<belle-modal
  title="Basic Modal"
  .visible="${false}"
  @onOk=${handleOk}
  @onCancel=${handleCancel}
>
  <div style="width: 500px;">
    <p>弹窗的内容</p>
    <p>弹窗的内容</p>
    <p>弹窗的内容</p>
    <p>弹窗的内容</p>
    <p>...</p>
  </div>
</belle-modal>

Properties

Property Attribute Type Default Description
cancelText cancelText string "取消" 取消按钮文字
closable closable boolean true 是否显示右上角关闭按钮
footer footer TemplateResult \| null "" 自定义footer，为null时不显示footer
maskClosable maskClosable boolean true 是否允许点击蒙层关闭
modalMask HTMLElement
okText okText string "确认" 确认按钮文字
title title string "" 弹窗标题
visible visible boolean false 是否显示弹窗

Methods

Method Type
handleCancel (): void
handleOk (): void

Events

Event Description
onCancel 点击确定的回调函数
onOk 关闭弹窗和点击取消的回调函数