PolymerElements/paper-drawer-panel: A Material Design two-section responsive pan ...

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称（OpenSource Name）：

PolymerElements/paper-drawer-panel

开源软件地址(OpenSource Url)：

https://github.com/PolymerElements/paper-drawer-panel

开源编程语言(OpenSource Language)：

JavaScript 62.5%

开源软件介绍(OpenSource Introduction)：

<paper-drawer-panel>

This element has been deprecated in favor of app-layout.

paper-drawer-panel contains a drawer panel and a main panel. The drawer and the main panel are side-by-side with drawer on the left. When the browser window size is smaller than the responsiveWidth, paper-drawer-panel changes to narrow layout. In narrow layout, the drawer will be stacked on top of the main panel. The drawer will slide in/out to hide/reveal the main panel.

Use the attribute drawer to indicate that the element is the drawer panel and main to indicate that the element is the main panel.

Example:

<paper-drawer-panel>
  <div slot="drawer"> Drawer panel... </div>
  <div slot="main"> Main panel... </div>
</paper-drawer-panel>

The drawer and the main panels are not scrollable. You can set CSS overflow property on the elements to make them scrollable or use paper-header-panel.

Example:

<paper-drawer-panel>
  <paper-header-panel slot="drawer">
    <paper-toolbar></paper-toolbar>
    <div> Drawer content... </div>
  </paper-header-panel>
  <paper-header-panel slot="main">
    <paper-toolbar></paper-toolbar>
    <div> Main content... </div>
  </paper-header-panel>
</paper-drawer-panel>

To position the drawer to the right, add right-drawer attribute.

<paper-drawer-panel right-drawer>
  <div slot="drawer"> Drawer panel... </div>
  <div slot="main"> Main panel... </div>
</paper-drawer-panel>

Styling

To change the main container:

paper-drawer-panel {
  --paper-drawer-panel-main-container: {
    background-color: gray;
  };
}

To change the drawer container when it's in the left side:

paper-drawer-panel {
  --paper-drawer-panel-left-drawer-container: {
    background-color: white;
  };
}

To change the drawer container when it's in the right side:

paper-drawer-panel {
  --paper-drawer-panel-right-drawer-container: {
    background-color: white;
  };
}

To customize the scrim:

paper-drawer-panel {
  --paper-drawer-panel-scrim: {
    background-color: red;
  };
}

The following custom properties and mixins are available for styling:

Custom property	Description	Default
`--paper-drawer-panel-scrim-opacity`	Scrim opacity	1
`--paper-drawer-panel-drawer-container`	Mixin applied to drawer container	{}
`--paper-drawer-panel-left-drawer-container`	Mixin applied to container when it's in the left side	{}
`--paper-drawer-panel-main-container`	Mixin applied to main container	{}
`--paper-drawer-panel-right-drawer-container`	Mixin applied to container when it's in the right side	{}
`--paper-drawer-panel-scrim`	Mixin applied to scrim	{}

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-drawer-panel

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-drawer-panel/paper-drawer-panel.js';
    </script>
  </head>
  <body>
    <paper-drawer-panel>
      <div slot="drawer"> Drawer panel... </div>
      <div slot="main"> Main panel... </div>
    </paper-drawer-panel>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-drawer-panel/paper-drawer-panel.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-drawer-panel>
        <div slot="drawer"> Drawer panel... </div>
        <div slot="main"> Main panel... </div>
      </paper-drawer-panel>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-drawer-panel
cd paper-drawer-panel
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

voila-dashboards/voila-material: Material design template for Voilà发布时间：2022-08-17

eastonman/material: New Material —— A Material Design Theme for Typecho发布时间：2022-08-17

剪的笔顺,诠释剪的笔画,认识剪的部首

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期

阅读：18406|2023-10-27

2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知

阅读：9735|2022-11-06

3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：8215|2022-11-06

4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要

阅读：8576|2022-11-06

5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多

阅读：8493|2022-11-06

6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不

阅读：9445|2022-11-06

7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很

阅读：8465|2022-11-06

8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法

阅读：7892|2022-11-06

9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win

阅读：8452|2022-11-06

10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎

阅读：7424|2022-11-06

客服电话

电子邮件

PolymerElements/paper-drawer-panel: A Material Design two-section responsive pan ...

开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

<paper-drawer-panel>

Styling

Usage

Installation

In an html file

In a Polymer 3 element

Contributing

Installation

Running the demo locally

Running the tests

请发表评论

全部评论

上一篇：

下一篇：

PacktPublishing/Python-Machine-Learning-

sussillo/hfopt-matlab: A parallel, cpu-b

鲁东大学一米网:Win7系统USB驱动器RAM的操

CVE-2022-34571

emersion/go-ostatus: An OStatus library

剪的笔顺,诠释剪的笔画,认识剪的部首

六六分期app的软件客服如何联系？(六六分期

florent37/ViewAnimator: A fluent Android

florent37/Shrine-MaterialDesign2: implem

CVE-2020-36276

SimpleSoftwareIO/simple-sms: Send and re

关于我们

产品与服务

解决方案

139-2527-9053