@inotom/sws-drawer v1.8.2

sws-drawer

A web Components to add drawer element.

Demo

Demo

Usage

Place sws-drawer sws-drawer-toggle-button sws-drawer-close-button custom element.

<sws-drawer-toggle-button>
  Toggle Button
</sws-drawer-toggle-button>
<sws-drawer>
  <sws-drawer-close-button>
  Close Button
  </sws-drawer-close-button>
  <p>
    Content
  </p>
</sws-drawer>
<script type="module" src="sws-drawer.min.js" defer></script>

Set element's style by css custom properties.

sws-drawer {
  --sws-drawer-position: fixed;
  --sws-drawer-top: 0;
  --sws-drawer-right: 0;
  --sws-drawer-bottom: 0;
  --sws-drawer-left: 0;
  --sws-drawer-z-index: 1000;
  --sws-drawer-width: 80%;
  --sws-drawer-visibility: hidden;
  --sws-drawer-opacity: 0;
  --sws-drawer-main-position: absolute;
  --sws-drawer-main-top: 0;
  --sws-drawer-main-bottom: 0;
  --sws-drawer-main-left: calc(100% - var(--sws-drawer-width));
  --sws-drawer-main-overflow-x: visible;
  --sws-drawer-main-overflow-y: auto;
  --sws-drawer-main-overscroll-behavior: contain;
  --sws-drawer-box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
  --sws-drawer-color: currentColor;
  --sws-drawer-background: #fff;
  --sws-drawer-layer-color: currentColor;
  --sws-drawer-layer-background: rgba(0, 0, 0, 0.5);
  --sws-drawer-layer-backdrop-filter: blur(5px);
  --sws-drawer-animation-speed: 0.3s;
  --sws-drawer-translate: translate3d(100%, 0, 0);
  --sws-drawer-transition-hide: visibility 0s linear var(--sws-drawer-animation-speed),
    opacity 0s linear var(--sws-drawer-animation-speed);
  --sws-drawer-transition-show: visibility 0s, opacity 0s;
}

sws-drawer-toggle-button {
  --sws-drawer-toggle-button-display: inline-block;
  --sws-drawer-toggle-button-appearance: none;
  --sws-drawer-toggle-button-width: auto;
  --sws-drawer-toggle-button-height: initial;
  --sws-drawer-toggle-button-margin: 0;
  --sws-drawer-toggle-button-padding: 0;
  --sws-drawer-toggle-button-color: currentColor;
  --sws-drawer-toggle-button-background: transparent;
  --sws-drawer-toggle-text-align: center;
  --sws-drawer-toggle-button-border: 0 none;
  --sws-drawer-toggle-button-font-size: inherit;
  --sws-drawer-toggle-button-font-family: inherit;
  --sws-drawer-toggle-button-cursor: inherit;
}

sws-drawer-close-button {
  --sws-drawer-close-button-display: inline-block;
  --sws-drawer-close-button-appearance: none;
  --sws-drawer-close-button-width: auto;
  --sws-drawer-close-button-height: initial;
  --sws-drawer-close-button-margin: 0;
  --sws-drawer-close-button-padding: 0;
  --sws-drawer-close-button-color: currentColor;
  --sws-drawer-close-button-background: transparent;
  --sws-drawer-close-text-align: center;
  --sws-drawer-close-button-border: 0 none;
  --sws-drawer-close-button-font-size: inherit;
  --sws-drawer-close-button-font-family: inherit;
  --sws-drawer-close-button-cursor: inherit;
}

CSS custom properties

sws-drawer

sws-drawer-toggle-button

sws-drawer-close-button

Options

<sws-drawer-toggle-button
  status-key="is-sws-drawer-active"
  body-top-key=""
  x-tabindex="0"
  group-keys="['is-sws-drawer-active', 'is-sws-drawer-active-other']"
>
  Toggle Button
</sws-drawer-toggle-button>

<sws-drawer
  status-key="is-sws-drawer-active"
  body-top-key=""
>
  <sws-drawer-close-button
    status-key="is-sws-drawer-active"
    body-top-key=""
    x-tabindex="0"
  >
  Close Button
  </sws-drawer-close-button>
  <p>
    Content
  </p>
</sws-drawer>

If the body-top-key property is not set, the position top of the body tag will not change.

sws-drawer

sws-drawer-toggle-button

sws-drawer-close-button

License

MIT

Author

inotom