@chameleon-ds/modal

Chameleon modal

Usage no npm install needed!

<script type="module">
  import chameleonDsModal from 'https://cdn.skypack.dev/@chameleon-ds/modal';
</script>

README

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