1.0.1 • Published 4 years ago

@chameleon-ds/modal v1.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

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 NameType(s)Default ValueDescription
openBooleanfalseIf the modal is open
dismissibleBooleanfalseIf the modal is dismissible
fullScreenBooleanfalseWhether 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>
`;