app-drawer

"app-drawer"是一个由polymer编写的抽屉组件,demo可看这里

"app-drawer"由官方polymer团队维护着,属于app-layout项目。
API可看这里

"app-drawer"提供了很多可定制的功能,且可独立使用(有些人可能认为必须配合app-drawer-layout,其实不需要);下面会以cookbook的形式来描述怎么使用它强大的功能。
大家最好同时打开着这个jsbin来实践一番。

#1,打开/关闭drawer

let drawer = document.querySelector('app-drawer');

// 打开drawer
drawer.open();

// 关闭drawer
drawer.close();

// 通过设置opened属性来打开/关闭drawer
drawer.opened = true

// toggle,打开时关闭,关闭时打开
drawer.toggle()

#2,将drawer放置在右方

设置align属性(默认为left)为right:

<app-drawer align="right">
</app-drawer>

查看jsbin

#3,将drawer固定

可以通过设置persistent来将drawer固定,固定后依然能够关闭/打开,但遮罩会消失。注意,如果你不特殊处理,它是会挡住下层内容的。

<app-drawer persistent opened>
</app-drawer>

查看jsbin

#4,设置drawer的打开/关闭的动画时长

可以设置transitionDuration来控制动画时长:

<app-drawer transition-duration="1000">
  <h2>Drawer</h2>
</app-drawer>

查看jsbin

#5,屏幕边缘滑动来打开drawer

设置swipeOpen为true:

<app-drawer swipe-open>
  <h2>Drawer</h2>
</app-drawer>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,593评论 25 709
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,751评论 0 17
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,422评论 0 7
  • 讨饭 我有一道菜,来来回回做了三十多年。 四十年前我还在路边要饭,一青布衣衫的青年蹲在我面前,递给我一盘菜,我感恩...
    崆箜倥阅读 406评论 2 1
  • 我每周末给母亲打一次电话,平时基本不打,偶尔她主动打来一次,总会把我吓的要命。一看是母亲的电话,挂掉,立马回过去,...
    一铭二畔阅读 172评论 0 0