mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
Add README for drawer
This commit is contained in:
Daniel Freedman
parent
993ce8c0f5
commit
4a5768ab67
@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
- CSS styling options to `mwc-button`
|
||||
- CSS styling options to `mwc-textfield`
|
||||
- README for `mwc-drawer`
|
||||
- Demo for `mwc-drawer` without a header in the drawer
|
||||
|
||||
### Changed
|
||||
|
||||
|
||||
@ -26,7 +26,6 @@ limitations under the License.
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
|
||||
<style>
|
||||
iframe {
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 36px;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
@ -41,10 +40,12 @@ limitations under the License.
|
||||
|
||||
<main>
|
||||
<h2>Standard Drawer</h2>
|
||||
<iframe src="drawer/standard_no_header.html" frameborder="0"></iframe>
|
||||
<h2>Standard Drawer with Header</h2>
|
||||
<iframe src="drawer/standard.html" frameborder="0"></iframe>
|
||||
<h2>Dismissible Drawer</h2>
|
||||
<h2>Dismissible Drawer with header</h2>
|
||||
<iframe src="drawer/dismissible.html" frameborder="0"></iframe>
|
||||
<h2>Modal Drawer</h2>
|
||||
<h2>Modal Drawer with header</h2>
|
||||
<iframe src="drawer/modal.html" frameborder="0"></iframe>
|
||||
</main>
|
||||
|
||||
|
||||
50
demos/drawer/standard_no_header.html
Normal file
50
demos/drawer/standard_no_header.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>drawer demo without header</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../../node_modules/@material/mwc-drawer/mwc-drawer.js"></script>
|
||||
<script type="module" src="../../node_modules/@material/mwc-top-app-bar/mwc-top-app-bar.js"></script>
|
||||
<link rel="stylesheet" href="../demo-component.css">
|
||||
<link rel="stylesheet" href="drawer.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<mwc-drawer>
|
||||
<div class="drawer-content">
|
||||
<p>Drawer content!</p>
|
||||
<p>With separate drawer scrolling.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div slot="appContent">
|
||||
<mwc-top-app-bar>
|
||||
<div slot="title">Title</div>
|
||||
</mwc-top-app-bar>
|
||||
<div class="main-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</mwc-drawer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,64 +1,143 @@
|
||||
# mwc-drawer
|
||||
# `<mwc-drawer>` [](https://www.npmjs.com/package/@material/mwc-drawer)
|
||||
> IMPORTANT: The Material Web Components are a work in progress and subject to
|
||||
> major changes until 1.0 release.
|
||||
|
||||
> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:
|
||||
The Navigation Drawer is used to organize access to destinations and other functionality on an app.
|
||||
|
||||
A [Material Components](https://material.io/develop/) drawer implementation using [Web Components](https://www.webcomponents.org/introduction)
|
||||
[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)
|
||||
|
||||
## Getting started
|
||||
## Installation
|
||||
|
||||
* The easiest way to try out mwc-drawer is to use one of these online tools:
|
||||
```sh
|
||||
npm install @material/mwc-drawer
|
||||
```
|
||||
|
||||
* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
|
||||
> 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 Edge and IE11. See
|
||||
> [here](https://github.com/material-components/material-components-web-components#quick-start)
|
||||
> for detailed instructions.
|
||||
|
||||
* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
|
||||
[CodePen](https://codepen.io/azakus/pen/deZLja).
|
||||
## Example usage
|
||||
|
||||
* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
|
||||
### Standard
|
||||
<img src="images/standard_no_header.png" width="552px">
|
||||
|
||||
* When you're ready to use mwc-drawer in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
|
||||
```html
|
||||
<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>
|
||||
</mwc-drawer>
|
||||
```
|
||||
|
||||
1. Ensure the webcomponents polyfills are included in your HTML page
|
||||
### Standard with Header
|
||||
<img src="images/standard.png" width="552px">
|
||||
|
||||
- Install webcomponents polyfills
|
||||
```html
|
||||
<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>
|
||||
</mwc-drawer>
|
||||
```
|
||||
|
||||
```npm i @webcomponents/webcomponentsjs```
|
||||
### Dismissable
|
||||
<img src="images/dismissable.gif" width="552px">
|
||||
|
||||
- Add webcomponents polyfills to your HTML page
|
||||
```html
|
||||
<mwc-drawer hasHeader type="dismissable">
|
||||
<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" id="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>
|
||||
</mwc-drawer>
|
||||
```
|
||||
|
||||
```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
|
||||
### Modal
|
||||
<img src="images/modal.gif" width="552px">
|
||||
|
||||
1. Add mwc-drawer to your project:
|
||||
```html
|
||||
<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" id="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>
|
||||
</mwc-drawer>
|
||||
```
|
||||
|
||||
```npm i @material/mwc-drawer```
|
||||
## API
|
||||
|
||||
1. Import the mwc-drawer definition into your HTML page:
|
||||
### Slots
|
||||
Name | Description
|
||||
---- | -----------
|
||||
`title` | Header title to display in the drawer when `hasHeader` is true.
|
||||
`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.
|
||||
`header` | Additional header elements to display in the drawer.
|
||||
`appContent` | Elements to display in the "app content" to the right of, or under, the drawer.
|
||||
*default* | Elements to display under the header in drawer.
|
||||
|
||||
```<script type="module" src="@material/mwc-drawer/index.js"></script>```
|
||||
|
||||
Or into your module script:
|
||||
### Properties/Attributes
|
||||
|
||||
```import {Drawer} from "@material/mwc-drawer"```
|
||||
Name | Type | Default | Description
|
||||
---- | ---- | ------- | -----------
|
||||
`open` | `boolean` | `false` | Whether the dialog is open
|
||||
`hasHeader` | `boolean` | `false` | When `true`, adds
|
||||
`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.
|
||||
|
||||
1. Create an instance of mwc-drawer in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
|
||||
### Methods
|
||||
*None*
|
||||
|
||||
```<mwc-drawer>sentiment_very_satisfied</mwc-drawer>```
|
||||
### Events
|
||||
Name | Detail | Description
|
||||
---- | ------ | -----------
|
||||
`MDCDrawer:opened` | `{}` | Fired when the drawer opens.
|
||||
`MDCDrawer:closed` | `{}` | Fired when the drawer closes.
|
||||
|
||||
1. Install the Polymer CLI:
|
||||
### CSS Custom Properties
|
||||
*None*
|
||||
|
||||
```npm i -g polymer-cli```
|
||||
### Additional References
|
||||
|
||||
1. Run the development server and open a browser pointing to its URL:
|
||||
|
||||
```polymer serve```
|
||||
|
||||
> mwc-drawer is published on [npm](https://www.npmjs.com/package/@material/mwc-drawer) using JavaScript Modules.
|
||||
This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
|
||||
>
|
||||
> However, since mwc-drawer uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
|
||||
|
||||
Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-drawer.
|
||||
|
||||
## Supported Browsers
|
||||
|
||||
The last 2 versions of all modern browsers are supported, including
|
||||
Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.
|
||||
- [MDC Web Drawers](https://material.io/develop/web/components/drawers/)
|
||||
BIN
packages/drawer/images/dismissable.gif
Normal file
BIN
packages/drawer/images/dismissable.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 743 KiB |
BIN
packages/drawer/images/modal.gif
Normal file
BIN
packages/drawer/images/modal.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
packages/drawer/images/standard.png
Normal file
BIN
packages/drawer/images/standard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
packages/drawer/images/standard_no_header.png
Normal file
BIN
packages/drawer/images/standard_no_header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Loading…
Reference in New Issue
Block a user