msc-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.

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 on or not.

Method

Method Signature	Description
toggle([force])	Toggle active or not. When argument is present: If the argument is true, will be turned on, and if it is false, will be turned off.

Event

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

Reference

• <msc-drawer />