@emanon/ema-drawer

| Property | Attribute | Type | Default | Description | |--------------|--------------|------------------------------------------|---------|--------------------------------------------------| | opened | opened | boolean | false | Whether showing or not. | | persistent | persistent | boolean | false | Clicking outside of the element will not deactivate it. | | placement | placement | "top" \| "right" \| "bottom" \| "left" | "left" | Position where to show on the window. |

Usage no npm install needed!

<script type="module">
  import emanonEmaDrawer from 'https://cdn.skypack.dev/@emanon/ema-drawer';
</script>

README

ema-drawer

Properties

Property Attribute Type Default Description
opened opened boolean false Whether showing or not.
persistent persistent boolean false Clicking outside of the element will not deactivate it.
placement placement "top" \| "right" \| "bottom" \| "left" "left" Position where to show on the window.

Methods

Method Type
close (): void

Events

Event Type Description
close CustomEvent<{}> Fires when the drawer has closed.
opened CustomEvent<{}> Fires when Drawer has opened.
request-close CustomEvent<{ accept: () => void; }> Fires when the drawer want to be closed.
Call the function passed to accept.

CSS Custom Properties

Property Default Description
--ema-c-drawer-containerBGColor "#fff" Container background color.
--ema-c-drawer-containerMaxSize "auto" Container max size.
--ema-c-drawer-containerRadius 0 Container Radius.
--ema-c-drawer-containerSize "30%" Container size.
--ema-c-drawer-diff "100px" Transform length.
--ema-c-drawer-duration "300ms" Length of transition time.
--ema-c-drawer-overlayColor "#80888f" Overlay color.
--ema-c-drawer-overlayOpacity 0.5 Ovaerlay opacity.