this project just start for shadow learning.
new Modal(Options);| Option | Type | Required | Description |
|---|---|---|---|
| name | {String} |
true | A DOMString For CustomElementRegistry.define() first param |
| onClose | {Function} |
false | |
| onComfirm | {Function} |
false | |
| onCancel | {Function} |
false | |
| buttons | {Array.<Button>} |
false | |
| content | `{String | Element}` | false |
| container | {Element} |
false | Parent node of the Modal component |
| className | {String} |
false |
| Option | Type | Required | Description |
|---|---|---|---|
| text | {String} |
true | Button text |
| action | {Function} |
true | A function to be executed after the button click |
const modal = new Modal({
name: 'modal',
buttons: [{ action: ({ close }) => close(), text: 'close' }],
content: 'this is a modal',
});
modal.show();<template id="template">
<p>this is a modal</p>
</template>const { content } = document.querySelector('#template');
const modal = new Modal({
name: 'modal',
content: document.importNode(content, true),
buttons: [{ action: ({ close }) => close(), text: 'close' }],
});<slot-modal>
<h3 slot="content">This is a Modal create by slot mode</h3>
<p slot="content">
This is a Modal create by template mode.
</p>
<div slot="footer">
<button onclick="closeModal()">confirm</button>
</div>
</slot-modal>// You still need to instantiate a Modal to register the custom element
const slotModal = new Modal({ name: 'slot-modal' });
window.closeModal = slotModal.close;Tip: If your javascript code is executed after HTML parse, you need to code css like the following for the slot element to prevent it from appearing before the custom element is registered.
slot-modal:not(:defined) *[slot] {
display: none;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent