Tabs

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个选项

注意下面的效果示意：

• 动图中的示例是用Tabs实现的效果，分别是Classic、Clean及Classic+Vertical的3种效果
• 本身看到的示意效果我也是使用Tabs这个元素插入到文章中的，Design设置选项选择的是Classic
• 并且是在Tab的编辑过程中通过插入Image Frame 来展示图片的

适用：Avada5.2.2