enyo官方开发入门教程翻译一Layout之Drawers

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;

}