The source code

    /**
     * @ignore
     * Box
     * @author yiminghe@gmail.com
     */
    KISSY.add('component/base/box', function () {

        /**
         * Box extension class.Represent a dom element.
         * @class KISSY.Component.Extension.Box
         * @private
         */
        function Box() {

            /**
             * @event beforeVisibleChange
             * fired before visible is changed,
             * can return false to prevent this change
             * @param {KISSY.Event.CustomEventObject} e
             * @param {Boolean} e.prevVal current component 's visible value
             * @param {Boolean} e.prevVal visible value to be changed
             */

            /**
             * @event afterVisibleChange
             * fired after visible is changed
             * @param {KISSY.Event.CustomEventObject} e
             * @param {Boolean} e.prevVal current component 's previous visible value
             * @param {Boolean} e.prevVal current component 's visible value
             */

            /**
             * @event show
             * fired after current component shows
             * @param {KISSY.Event.CustomEventObject} e
             */

            /**
             * @event hide
             * fired after current component hides
             * @param {KISSY.Event.CustomEventObject} e
             */
        }

        Box.ATTRS =
        {
            /**
             * component's html content. Note: content and srcNode can not be set both!
             * @type {String|KISSY.NodeList}
             * @property content
             */
            /**
             * component's html content. Note: content and srcNode can not be set both!
             * @cfg {String|KISSY.NodeList} content
             */
            /**
             * @ignore
             */
            content: {
                view: 1
            },

            /**
             * component's width
             * @type {Number|String}
             * @property width
             */
            /**
             * component's width
             * @cfg {Number|String} width
             */
            /**
             * @ignore
             */
            width: {
                view: 1
            },

            /**
             * component's height
             * @type {Number|String}
             * @property height
             */
            /**
             * component's height
             * @cfg {Number|String} height
             */
            /**
             * @ignore
             */
            height: {
                view: 1
            },

            /**
             * css class of component's root element
             * @cfg {String} elCls
             */
            /**
             * @ignore
             */
            elCls: {
                view: 1
            },

            /**
             * name-value pair css style of component's root element
             * @cfg {Object} elStyle
             */
            /**
             * @ignore
             */
            elStyle: {
                view: 1
            },

            /**
             * name-value pair attribute of component's root element
             * @cfg {Object} elAttrs
             */
            /**
             * @ignore
             */
            elAttrs: {
                view: 1
            },

            /**
             * archor element where component insert before
             * @cfg {KISSY.NodeList} elBefore
             */
            /**
             * @ignore
             */
            elBefore: {
                // better named to renderBefore, too late !
                view: 1
            },

            /**
             * root element of current component
             * @type {KISSY.NodeList}
             * @readonly
             * @property el
             */
            /**
             * @ignore
             */
            el: {
                view: 1
            },

            /**
             * archor element where component append to
             * @cfg {KISSY.NodeList} render
             */
            /**
             * @ignore
             */
            render: {
                view: 1
            },

            /**
             * component's visibleMode,use css "display" or "visibility" to show this component
             * @cfg {String} visibleMode
             */
            /**
             * @ignore
             */
            visibleMode: {
                view: 1
            },

            /**
             * whether this component is visible after created.
             *
             * will add css class {prefix}{component}-hidden
             * or {prefix}{component}-shown to component's root el.
             *
             * @cfg {Boolean} visible
             */
            /**
             * whether this component is visible.
             *
             * will add css class {prefix}{component}-hidden
             * or {prefix}{component}-shown to component's root el.
             *
             * @type {Boolean}
             * @property visible
             */
            /**
             * @ignore
             */
            visible: {
                value: true,
                view: 1
            },

            /**
             * kissy node or css selector to find the first match node
             *
             * parsed for configuration values,
             * passed to component's HTML_PARSER definition
             * @cfg {KISSY.NodeList|String} srcNode
             *
             */
            /**
             * @ignore
             */
            srcNode: {
                view: 1
            }
        };

        Box.prototype =
        {

            _onSetVisible: function (v) {
                // do not fire event at render phrase
                if (this.get('rendered')) {
                    this.fire(v ? "show" : "hide");
                }
            },

            /**
             * show component
             * @chainable
             */
            show: function () {
                var self = this;
                self.render();
                self.set("visible", true);
                return self;
            },

            /**
             * hide component
             * @chainable
             */
            hide: function () {
                var self = this;
                self.set("visible", false);
                return self;
            }
        };

        return Box;
    });