Tabs用法，如何做内容切换功能

更新日期: 2017-10-30

Tabs可以用于在一个页面中做切换，大家在JD/TB购物的时候，商品详情页中经常能看到这种效果，商品介绍、规格与包装、售后保障等内容，可以切换看，但其实内容是在一个页面中，并没有跳转到另外的页面。

编辑界面

Add / Edit Items，用于新增或编辑Tab，在新增/编辑界面中，有3个选项：
- Tab Title，当前Tab的标题，用于识别和点击切换
- Icon，给Title前面增加小图标icon的，可以找和当前tab主题相符的icon来丰富视觉元素
- Tab Content，编辑当前Tab中要展示的内容
Design，有2种样式：
- 传统(Classic)，整个Tabs带有外边框
- 简约(Clean)，Tabs的内容区域没有外边框，只在title部分有边框
Layout，有横排(Horizontal)和竖排(Vertical)两种方式，指的是Title部分的样子布局，Horizontal是默认的，相对用的人更多
Justify Tabs，只有选择 Horizontal 时候才会有这个选项，若选Yes，则Tab Title的区域会根据其所在Column的宽度进行自动调整
Background Color，设置Tab的背景颜色
Inactive Color，非激活状态的颜色，也就是不是当前展示的Tab的Title区域的背景颜色
Border Color，线框颜色
Element Visibility，默认不修改，此选项和适配移动端有关系，可参考《设置移动端适配》
CSS Class / CSS ID，默认不需填写内容，需要针对此内容进行单独的样式调整时才考虑使用这2个选项