@H_403_0@这一章将设计一个选项卡组件，选项卡组件在手持设备上用的比较多，下面是一个示意图：
<p style="text-align: center">
@H_403_0@
选项卡组成
@H_403_0@在具体实现之前，想像一下目标组件是如何使用的，对于设计会有莫大的帮助。通过观察，可以将选项卡组件分为容器部分和子项部分，正如下面的 XML 结构所展示的。首页"/>
@H_403_0@现在我们把目光切换到选项卡组件的子项部分，来看看子项部分是如何分解的。通过示意图，你可以发现子项部分可以分解为子项容器以及包含一个图标和一个文本的子级部分。
结构图
@H_403_0@由于该组件比较简单，所以可以将三种子组件放置在同一层级。但请注意，我们还有四个图标组件，可以创建一个子级用于容纳它们。下面给出我们的组件结构图： @H_403_0@Tabbar/ ├── Tabbar ├── TabItem └── Icon/ ├── About ├── Home ├── Logs └── Setting @H_403_0@图标的实现
@H_403_0@我们从最简单的开始，先看四个图标组件，图标组件主要通过封装 SVG 文本来实现，由于图标文本较长，所以这里仅截取每个图标文本的一段。Box="0 0 1024 1024">
`
},Home: {
xml: `
@H_403_0@请注意，这些图标位于虚拟目录 /icon 之下，也就是你要像下面这样导入：
$_("icon").imports({--这里包含了四个图标组件--});
});
@H_403_0@下面来实现图标组件 Icon，这里的图标组件与上面是不同的，它会根据输入的图标类型实例化不同的图标。这样设计可以复用部分相同的代码，避免冗余。
});
子项的实现
@H_403_0@按从内到外的原则，接下来实现选项卡组件的子项 TabItem。对于此组件，需要在组件的映射项中做一次异名的属性映射，把 id 属性值映射给内部的图标组件的 icon 属性。icon" } },xml: `
`,opts) {
sys.label.text(opts.label);
function select() {
sys.tabitem.addClass("#primary");
}
function unselect() {
sys.tabitem.removeClass("#primary");
}
return { select: select,unselect: unselect };
}
}
@H_403_0@此组件提供了用于选项切换时选中与非选中状态之间切换的接口。以供选项卡容器使用。
@H_403_0@