This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@coffeekraken/drawer-webcomponent

1.0.0 • Public • Published

Coffeekraken s-drawer-component

npm npm npm

Simple webcomponent to create fully customizable drawers.

Table of content

  1. Install
  2. Get Started
  3. Javascript API
  4. SCSS API
  5. Coffeekraken

Install

npm install @coffeekraken/drawer-webcomponent --save

## Get Started

First, import the component into your javascript file like so:

import DrawerWebcomponent from '@coffeekraken/drawer-webcomponent'

Then simply use it inside your html like so:

<ck-drawer name="menu">
	<!-- your drawer content -->
</ck-drawer>
<main is="ck-drawer-content">
	<!-- your main website content -->
	<label for="menu">
		Open menu drawer
	</label>
</main>

If you need some default styles for your drawer, follow theses steps:

// import the drawer-webcomponent API
@use 'node_modules/@coffeekraken/drawer-webcomponent' as drawer-webcomponent;

// generate the classes
@include drawer-webcomponent.classes(
	$name: my-cool-drawer
	$side: right
);

// customize the drawer overlay
@include drawer-webcomponent.element(overlay, my-cool-drawer) {
	background-color: red;
}

Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose. All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...

Coffeekraken

Package Sidebar

Install

npm i @coffeekraken/drawer-webcomponent

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

1.48 MB

Total Files

26

Last publish

Collaborators

  • olivierbossel