Drawers
onyx.Drawer
onyx.Drawer是根据open属性来显示或隐藏的control。Open属性是默认为true（可见）的boolean类型。
Drawer的显示和隐藏滑动动画方向默认由orient属性决定。Orient的默认值是“v”，表明drawer沿着垂直方向open和close。要创建水平方向的drawer只需将orient属性设置为“h”。
从enyo2.1开始，onyx.Drawer多了一个animated属性，将该属性设置为false可以取消滑动动画。
Vertical Drawers
一个实现了垂直drawer的例子：
enyo.kind({
name: "VDrawer",
components: [
{kind: "FittableRows", classes: "outer-box", components: [
{content: "Activate Vertical", classes: "inner-box inner-box-v", ontap: "activateDrawer"},
{name: "drawer", kind: "onyx.Drawer", open: false, components: [
{content: "Vertical Drawer<br>Vertical Drawer</br>Vertical Drawer",
classes: "inner-box inner-box-v", allowHtml: true}
]}
]}
],
activateDrawer: function(inSender, inEvent) {
this.$.drawer.setOpen(!this.$.drawer.open);
},
});
Horizontal Drawers
例：
enyo.kind({
name: "HDrawer",
components: [
{kind: "FittableColumns", ontap: "activateColumnsDrawer", classes: "outer-box",
components: [
{content: "Activate Horizontal", classes: "inner-box inner-box-h"},
{name: "columnsDrawer", orient: "h", kind: "onyx.Drawer", fit: true, open: false,
components: [
{content: "Horizontal Drawer Horizontal Drawer",
classes: "inner-box inner-box-h"}
]
}
]
}
],
activateColumnsDrawer: function(inSender, inEvent) {
this.$.columnsDrawer.setOpen(!this.$.columnsDrawer.open);
}
});
A Note on CSS
Css：
.outer-box {
border: 2px solid orange;
padding: 4px;
white-space: nowrap;
overflow: hidden;
margin-top: 3px;
margin-bottom: 3px;
}
.inner-box {
border: 2px solid lightblue;
padding: 4px;
white-space: nowrap;
overflow: hidden;
}
.inner-box-v {
margin-top: 2px;
margin-bottom: 2px;
}
.inner-box-h {
margin-left: 2px;
margin-right: 2px;
}