Chameleon Modal
import { html } from "@open-wc/demoing-storybook";
import "./chameleon-modal.js";
export default {
title: "Components|Overlays/Modal",
component: "chameleon-modal",
options: { selectedPanel: "storybookjs/docs/panel" },
};Properties
| Property Name | Type(s) | Default Value | Description |
|---|---|---|---|
open |
Boolean | false |
If the modal is open |
dismissible |
Boolean | false |
If the modal is dismissible |
fullScreen |
Boolean | false |
Whether or not the modal appears fullscreen |
Examples
Default
export const Default = () => html`
<chameleon-modal open="true" dismissible="true">
<h3 slot="title">Contact Form</h3>
<div slot="body">
<chameleon-input label="First Name"></chameleon-input>
<chameleon-input label="Last Name"></chameleon-input>
<chameleon-input type="email" label="Email"></chameleon-input>
</div>
<chameleon-button theme="text" slot="left-button">
Cancel
</chameleon-button>
<chameleon-button theme="primary" slot="right-button">
Continue
</chameleon-button>
</chameleon-modal>
`;