msc-sidebar

A sidebar provides a way to display meta content intended for temporary access (navigation links, buttons, menus, etc.). The sidebar can be revealed by a button tap while the main content remains visually underneath.

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

Basic Usage

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

• Required Script

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

• Structure

Put the content inside <msc-sidebar /> as its child. When <msc-sidebar /> opened. It will display the content with the whole viewport size.

<msc-sidebar>
  <script type="application/json">
    {
      "open": false,
      "side": "left"
    }
  </script>

  <!-- content node, add slot="content" to it. -->
  <nav slot="content">
    ...
  </nav>
</msc-sidebar>

Or set attributes directly.

<msc-sidebar side="left">
  <!-- content node, add slot="content" to it. -->
  <nav slot="content">
    ...
  </nav>
</msc-sidebar>

Otherwise, developers could also choose remoteconfig to fetch config for

<msc-sidebar remoteconfig="https://your-domain/api-path">
  <!-- content node, add slot="content" to it. -->
  <nav slot="content">
    ...
  </nav>
</msc-sidebar>

JavaScript Instantiation

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

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

<script type="module">
import { MscSidebar } from 'https://your-domain/wc-msc-sidebar.js';

// use DOM api
const nodeA = document.createElement('msc-sidebar');
document.body.appendChild(nodeA);
nodeA.side = "right";
nodeA.appendChild(
  document.querySelector(".your-content-node")
);

// new instance with Class
const nodeB = new MscSidebar();
document.body.appendChild(nodeB);
nodeB.side = "right";
nodeB.appendChild(
  document.querySelector(".your-content-node")
);

// new instance with Class & default config
const config = {
  open: false,
  side: "right"
};
const nodeC = new MscSidebar(config);
document.body.appendChild(nodeC);
nodeC.appendChild(
  document.querySelector(".your-content-node")
);
</script>

Style Customization

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

<style>
msc-sidebar {
  --msc-sidebar-z-index: 1000;
  --msc-sidebar-background: cubic-bezier(0,0,.21,1);
  --msc-sidebar-overlay: rgba(0,0,0,.5);
  --msc-sidebar-timing-function: cubic-bezier(0,0,.21,1);
  --msc-sidebar-duration: 233ms;
}
</style>

Attributes

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

• open

Set open for <msc-sidebar />. Default is false (not set).

<msc-sidebar open>
  <!-- content node -->
  <nav slot="content">
    ...
  </nav>
</msc-sidebar>

• side

This attribute will positioned the content node's displayed position. There are two valid value which are "left" and "right". Default is "left".

<msc-sidebar side="left">
  <!-- content node -->
  <nav slot="content">
    ...
  </nav>
</msc-sidebar>

Properties

Property Name	Type	Description
open	Boolean	Getter / Setter for open. Default is false.
side	String	Getter / Setter for side. Valid value should be "left" or "right". Default is "left".

Method

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

Event

Event Signature	Description
msc-sidebar-change	Fired when open or not.

Reference

• <msc-sidebar />