@belleui/belle-modal NPM

@belleui/belle-modal

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`	关闭弹窗和点击取消的回调函数

web-components belleui

@belleui/belle-button lit-element

@infinitebrahmanuniverse/nolb-_bel @everything-registry/sub-chunk-119 @belleui/belle-elements @zalastax/nolb-_bel

0.0.1-alpha.2

3 years ago

0.0.1-alpha.1

4 years ago