# Tabbar Embed 模式

- order: 2

Embed 模式下，内容区是单独的 bundle 。

---

```js
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Tabbar from 'nuke-tabbar';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      activeKey: { key: 'tab1' }
    };
  }

  renderContent = pageText => {
    return (
      <View style={[styles.tabContent]}>
        <Text style={styles.tabText}>{pageText}</Text>
      </View>
    );
  };
  renderItem = (key, isActive) => {
    return (
      <View style={[styles.item, isActive ? styles.itemActive : {}]}>
        <Text style={[styles.itemText, isActive ? styles.itemTextActive : {}]}>
          {key}
        </Text>
      </View>
    );
  };
  render() {
    return (
      <Tabbar itemStyle={{ height: 88 }} activeKey={this.state.activeKey}>
        <Tabbar.Item
          tabKey="tab1"
          render={this.renderItem.bind(this, 'View')}
          src="qap:///basic.js"
        />
        <Tabbar.Item
          tabKey="tab2"
          render={this.renderItem.bind(this, 'Button')}
          src="https://h5.m.taobao.com/qn/mobile/weex-tpl.html?_wx_tpl=https://g.alicdn.com/nuke/button/1.0.5/basic.js"
        />
      </Tabbar>
    );
  }
};
const styles = {
  tabContent: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabText: {
    fontSize: 40
  },
  item: {
    height: 88,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  itemActive: {
    backgroundColor: '#ff6600'
  },
  itemText: {
    fontSize: 24,
    color: '#333333'
  },
  itemTextActive: {
    color: '#ffffff'
  }
};
render(<App />);
```