API Docs for:
Show:

BricksUI.BuTabs

Extends Ember.View
Defined in: packages/bricksui-thirdpart/lib/bu-tabs.js:5
Module: bricksui-thirdpart
Parent Module: bricksui

Summary

tabs 组件基本用法

一个tab-pane代表一个tab页签 bu-tabs-panes 需要有一个contentBinding 属性,用来生成所有的tab标签页, bu-tabs-panes与bu-tabs是配套使用的,bu-tabs生成tab组件页签头,bu-tabs-panes生成内容, 所以两者需要有一个关联,这就是items-id.

<div class="bs-example">
{{bu-tabs id="tabs1" contentBinding="tabsMeta" default="Foo"}}
{{bu-tabs-panes items-id="tabs1" contentBinding="tabsMeta"}}
</div>
  • bu-tas需要配置一个id属性
  • bu-tabs-panes根据content生成各个内容标签
  • items-id 必须要跟bu-tabs的id挂钩
  • default可以设置tab组件的默认标签页
  • justified 设定tab组件是否宽度自适应

配置项如下:

SomeController = Ember.Controller.extend({
   tabsMeta: Ember.A([
           Ember.Object.create({ title: 'Foo', template: 'tabs/foo-tabpane', controller: 'ShowcaseComponentsTabsFoo'}),
           Ember.Object.create({ title: 'Bar', template: 'tabs/bar-tabpane'})
   ]);
});

template 指定tab内容页的模板
controller 可以指定tabs标签页的控制器

tabs 组件与路由相结合

定义路由:

    this.resource('user', function() {
     this.route('general');
     this.route('privacy');
     return this.route('activities');
   });

在对应的user的template里面

{{bs-tabs contentBinding="tabsMeta"}}
{{outlet}}

控制器

App.UserController = Ember.Controller.extend({
 tabsMeta: [
   Ember.Object.create({title: 'General', linkTo: 'user.general'}),
   Ember.Object.create({title: 'Privacy', linkTo: 'user.privacy'}),
   Ember.Object.create({title: 'Activities', linkTo: 'user.activities'})
 ]
});

然后定义各个tab页签对应的模板

Item Index