0.27.0 • Published 2 years ago

@material/mwc-drawer v0.27.0

Weekly downloads
4,567
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-drawer> Published on npm

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

The Navigation Drawer is used to organize access to destinations and other functionality on an app.

Material Design Guidelines: Navigation Drawer

Demo

Installation

npm install @material/mwc-drawer

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage

Standard

<mwc-drawer>
    <div>
        <p>Drawer Content!</p>
    </div>
    <div slot="appContent">
        <mwc-top-app-bar>
            <div slot="title">Title</div>
        </mwc-top-app-bar>
        <div>
            <p>Main Content!</p>
        </div>
    </div>
</mwc-drawer>

NOTE: When using an inline-drawer (i.e. non-modal drawer) with a top-app-bar, the app-bar is shifted to the right unlike the body content since its position is fixed. This may cause issues with action items on the top-app-bar to be shifted off screen. To remedy this, you should readjust the size of the top-app-bar based on the width of the drawer when the drawer is open. Here is an example of how to do this:

mwc-drawer[open] top-app-bar {
  /* Default width of drawer is 256px. See CSS Custom Properties below */
  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));
}

Standard with Header

<mwc-drawer hasHeader>
    <span slot="title">Drawer Title</span>
    <span slot="subtitle">subtitle</span>
    <div>
        <p>Drawer content!</p>
    </div>
    <div slot="appContent">
        <mwc-top-app-bar>
            <div slot="title">Title</div>
        </mwc-top-app-bar>
        <div>
            <p>Main Content!</p>
        </div>
    </div>
</mwc-drawer>

Dismissible

<mwc-drawer hasHeader type="dismissible">
    <span slot="title">Drawer Title</span>
    <span slot="subtitle">subtitle</span>
    <div>
        <p>Drawer content!</p>
        <mwc-icon-button icon="gesture"></mwc-icon-button>
        <mwc-icon-button icon="gavel"></mwc-icon-button>
    </div>
    <div slot="appContent">
        <mwc-top-app-bar>
            <mwc-icon-button slot="navigationIcon" icon="menu"></mwc-icon-button>
            <div slot="title">Title</div>
        </mwc-top-app-bar>
        <div>
            <p>Main Content!</p>
        </div>
    </div>
</mwc-drawer>
<script>
    const drawer = document.getElementsByTagName('mwc-drawer')[0];
    if (drawer) {
        const container = drawer.parentNode;
        container.addEventListener('MDCTopAppBar:nav', () => {
            drawer.open = !drawer.open;
        });
    }
</script>

Modal

<mwc-drawer hasHeader type="modal">
    <span slot="title">Drawer Title</span>
    <span slot="subtitle">subtitle</span>
    <div>
        <p>Drawer content!</p>
        <mwc-icon-button icon="gesture"></mwc-icon-button>
        <mwc-icon-button icon="gavel"></mwc-icon-button>
    </div>
    <div slot="appContent">
        <mwc-top-app-bar>
            <mwc-icon-button slot="navigationIcon" icon="menu"></mwc-icon-button>
            <div slot="title">Title</div>
        </mwc-top-app-bar>
        <div>
            <p>Main Content!</p>
        </div>
    </div>
</mwc-drawer>
<script>
    const drawer = document.getElementsByTagName('mwc-drawer')[0];
    if (drawer) {
        const container = drawer.parentNode;
        container.addEventListener('MDCTopAppBar:nav', () => {
            drawer.open = !drawer.open;
        });
    }
</script>

API

Slots

NameDescription
titleHeader title to display in the drawer when hasHeader is true.
subtitleHeader subtitle to display in the drawer when hasHeader is true.
headerAdditional header elements to display in the drawer.
appContentElements to display in the "app content" to the right of, or under, the drawer.
defaultElements to display under the header in drawer.

Properties/Attributes

NameTypeDefaultDescription
openbooleanfalseWhether the dialog is open
hasHeaderbooleanfalseWhen true, displays the title, subtitle, and header slots.
typestring''When set to 'dismissible', overlays the drawer on the content. When set to 'modal', also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.

Methods

None

Events

NameDetailDescription
MDCDrawer:opened{}Fired when the drawer opens.
MDCDrawer:closed{}Fired when the drawer closes.

CSS Custom Properties

NameDefaultDescription
--mdc-drawer-width256pxWidth of the side drawer when opened.

Global CSS Custom Properties

This component exposes the following global theming custom properties.

NameDetailDescription
--mdc-theme-surfaceThe background color of the drawer.
--mdc-typography-headline6-<PROPERTY>Styles the typography of the drawer's title.
--mdc-typography-body2-<PROPERTY>Styles the typography of the drawer's subtitle.
--mdc-typography-subtitle2-<PROPERTY>Styles the typography of the drawer's list items.

Additional References

0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.25.1

3 years ago

0.25.0

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.2

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.1

4 years ago

0.11.0

4 years ago

0.10.0

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.0

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago