UNPKG

bulmil

Version:

![bulmil](https://user-images.githubusercontent.com/2362138/65766959-c721a080-e16f-11e9-9fb9-45a5a2ad0391.jpg)

75 lines (74 loc) 2.17 kB
import { Component, Prop, h } from '@stencil/core'; export class Modal { constructor() { /** * Is Active */ this.isActive = false; /** * Modal Card */ this.hasModalCard = false; this.handleCloseButtonClick = () => { this.isActive = false; }; } render() { return (h("div", { class: { modal: true, 'is-active': this.isActive, } }, h("div", { class: "modal-background" }), h("div", { class: { 'modal-content': !this.hasModalCard, 'modal-card': this.hasModalCard, } }, h("slot", null)), h("button", { slot: "close", class: "modal-close is-large", "aria-label": "close", onClick: this.handleCloseButtonClick }))); } static get is() { return "bm-modal"; } static get originalStyleUrls() { return { "$": ["modal.scss"] }; } static get styleUrls() { return { "$": ["modal.css"] }; } static get properties() { return { "isActive": { "type": "boolean", "mutable": true, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "required": false, "optional": false, "docs": { "tags": [], "text": "Is Active" }, "attribute": "is-active", "reflect": true, "defaultValue": "false" }, "hasModalCard": { "type": "boolean", "mutable": false, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "required": false, "optional": false, "docs": { "tags": [], "text": "Modal Card" }, "attribute": "has-modal-card", "reflect": false, "defaultValue": "false" } }; } }