Drawer

Drawer effect provides extra promotion space for web page. It is also a common effect in web pages & APPs, such as Google APP applied it for "image search" or other related "search results". Developers could also apply it for mentioning some information.

<msc-drawer /> provides different themes for light / dark mode and also mobile ready.

Let's take a try and see what can <msc-drawer /> do.

tap me

Basic Usage

<msc-drawer /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-drawer />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://your-domain/wc-msc-drawer.js"> </script>

Structure

Put [slot="msc-drawer-content"] inside <msc-drawer /> as its child. It will use it as content.

<msc-drawer> <script type="application/json"> { "active": false, "subject": "your subject" } </script> <div slot="msc-drawer-content"> ... </div> </msc-drawer>

Or set attributes directly.

<msc-drawer active subject="your subject" > <div slot="msc-drawer-content"> ... </div> </msc-drawer>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-drawer />.

<msc-drawer remoteconfig="https://your-domain/api-path"> <div slot="msc-drawer-content"> ... </div> </msc-drawer>

JavaScript Instantiation

<msc-drawer /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscDrawer } from 'https://your-domain/wc-msc-drawer.js'; const content = document.querySelector('[slot="msc-drawer-content"]'); // use DOM api const nodeA = document.createElement('msc-drawer'); nodeA.appendChild(content.cloneNode(true)); document.body.appendChild(nodeA); nodeA.subject = 'your subject'; // new instance with Class const nodeB = new MscLens(); nodeB.appendChild(content.cloneNode(true)); document.body.appendChild(nodeB); nodeB.subject = 'your subject'; // new instance with Class & default config const config = { active: false, subject: 'your subject' }; const nodeC = new MscLens(config); nodeC.appendChild(content.cloneNode(true)); document.body.appendChild(nodeC); nodeC.subject = 'your subject'; </script>

Style Customization

<msc-drawer /> uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style> msc-drawer { --msc-drawer-z-index: 1000; --msc-drawer-overlay-bgcolor: #000; } </style>

Attributes

<msc-drawer /> supports some attributes to let it become more convenience & useful.

subject

Set subject for <msc-drawer />.

<msc-drawer subject="your subject" > <div slot="msc-drawer-content"> ... </div> </msc-drawer>

active

Set active for <msc-drawer />. It will turn <msc-drawer /> on or not. Default is false (not set).

<msc-drawer active > <div slot="msc-drawer-content"> ... </div> </msc-drawer>

Properties

Property Name Type Description
subject String Getter / Setter for subject. Developers could use this property to setup subject.
active Boolean Getter / Setter for active. It will turn <msc-drawer /> on or not.

Method

Methos Signature Description
toggle([force]) Toggle <msc-drawer /> active or not. When argument is present: If the argument is true, <msc-drawer /> will be turned on, and if it is false, <msc-drawer /> will be turned off.

Events

Event Signature Description
msc-drawer-switch Fired when <msc-drawer /> turn on or off. Developers could get active through event.detail.

Reference

unit title 1

unit title 2

unit title 3

unit title 4

unit title 5

unit title 6

unit title 7

unit title 8

unit title 9

unit title 10

unit title 11

unit title 12

unit title 13

unit title 14

unit title 15

unit title 16

unit title 17

unit title 18

unit title 19

unit title 20

unit title 21