Panels
enyo.Panels kind用来满足常用的多种应用布局。使用enyo.Panels，control可以使用carousel（旋转木马，一组折叠的panels），在panels之间消失切换的卡片布局或 一个grid网格。
Behavior
任何一个enyo的control都可以放在enyo.Panels内部，方便起见我们把这些control称为panel。在enyo.Panels的一组panel中，只有一个是活动的。可以通过setIndex方法设置活动的panel。每次设置active panel真正的panel布局都会改变，所以新的active panel拥有最高的优先级。如果layout将所有的panel放在一个card stack中，设置active panel会显示active panel并隐藏其他的panel。
enyo.Panels在active状态时支持动画和拖曳。当active panel发生变化时会触发onTransitionStart和onTransitionFinish事件。将animate属性设置为false可以关闭active状态的panel动画。另外panel默认可以拖拽，可以将draggable属性设置为false改变这一默认行为。
例：
enyo.kind({
name: "App",
kind: "Panels",
fit: true,
components: [
{name: "MyStartPanel"},
{name: "MyMiddlePanel"},
{name: "MyLastPanel"}
]
});
Layout
enyo.Panels的布局由一个特殊的kind arrangerKind控制。现在panels已经有一些Arranger kind。
为了简化使用enyo.Panels时创建arranger kind的过程，使用插值策略渲染activte 设置的状态。这意味着只有处于活动状态的layout需要指定arrangerKind。更详细的信息请参考API。
一些编排策略结合Panel实例可以达到环绕的效果，这样在最后一个panel前进时会回到第一个panel，在第一个panel后退时会到最后一个panel。要达到这个效果，将enyo.Panels的arrangerKind属性指定值为LeftRightArranger, TopBottomArranger, SpiralArranger, 或 GridArranger，wrap值指定为true。
Responsive Design
Enyo.Panels结合CSS的布局可以自适应不同尺寸的屏幕。怎样改变布局由应用开发者决定，但是当panel的size发生改变时，布局应能做出正确响应。例：
enyo.kind({
name: "App",
kind: "Panels",
fit: true,
classes: "app-panels",
arrangerKind: "CollapsingArranger",
components: [
{name: "MyStartPanel"},
{name: "MyMiddlePanel"},
{name: "MyLastPanel"}
]
});
注意，在CollapsingArranger中最后一个panel总是占用可用空间。
CSS：
/* set the width and some basic styling for each panel */
.app-panels > * {
320px;
background-color: #EAEAEA;
box-shadow: -4px -4px 4px rgba(0,0,0,0.3);
}
/* on small devices, make each panel fit to the app width */
@media all and (max- 800px) {
.app-panels > * {
min- 100%;
max- 100%;
}
}
从技术上讲，第二个CSS语句块并不需要实现size效果。因为enyo.Panels的narrowFit属性（默认为true）在屏幕足够狭窄时默认截取800px以使每个panel的大小适应应用的大小。
但是CSS仍然提供了可用的方法使你能够自定义截断宽度。
我们来修改实例默认截取600px。将narrowFit属性设置为false（关闭默认的行为），应用自定义的CSS样式（“app-panels”）定义新的行为。
我么也可以重写静态方法Panels.isScreenNarrow()，将800改为600。框架本身并不使用这个方法，它只为应用能够轻易知道是否允许在小屏幕的环境中。（在enyojs.com的 Flickr sample app有一个如何在导航面板之间应用这个特性的有趣例子。）
定义一个kind：
enyo.kind({
name: "App",
kind: "enyo.Panels",
fit: true,
narrowFit: false,
classes: "app-panels",
arrangerKind: "CollapsingArranger",
components: [
{name: "MyStartPanel", content: "start"},
{name: "MyMiddlePanel", content: "middle"},
{name: "MyLastPanel", content: "last"}
],
statics: {
isScreenNarrow: function() {
return enyo.dom.getWindowWidth() <= 600;
}
}
});
CSS样式：
.app-panels > * {
320px;
background-color: #EAEAEA;
box-shadow: -4px -4px 4px rgba(0,0,0,0.3);
}
@media all and (max- 600px) {
.app-panels > * {
min- 100%;
max- 100%;
}
}
实现效果的截图没有放上来，可以参考原文https://github.com/enyojs/enyo/wiki/Panels，或到enyo开发包的解压目录lib\layout\panels下的examps和samples文件夹下查看更多示例。