@chameleon-ds/modal

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>
`;