<commit_before>var React = require('react');
var CodeExample = require('../../code-example/code-example.jsx');
var mui = require('mui');
var Router = require('react-router');
var ComponentDoc = require('../../component-doc.jsx');
var RouteHandler = Router.RouteHandler;
var Tabs = mui.Tabs;
var Tab= mui.Tab;

var TabsPage = React.createClass({
  
  mixins: [Router.Navigation, Router.State],

  render: function(){
    var code =  '<Tabs> \n' +
                '  <Tab label="Item One" > \n' +
                '    <div className="tab-template-container"> \n' +
                '      <h2 className="mui-font-style-headline">Tab One Template Example</h2> \n' +
                '      <p> \n' +
                '        This is an example of a tab template! \n' +
                '      </p> \n' +
                '      <p> \n' +
                '        You can put any sort of HTML or react component in here. \n' +
                '      </p> \n' +
                '    </div> \n' +
                '  </Tab> \n' +
                '  <Tab label="Item Two" > \n' +
                '    <div className="tab-template-container"> \n' +
                '      <h2 className="mui-font-style-headline">Tab Two Template Example</h2> \n' +
                '      <p> \n' +
                '        This is another example of a tab template! \n' +
                '      </p> \n' +
                '      <p> \n' +
                '        Fair warning - the next tab routes to home! \n' +
                '      </p> \n' +
                '    </div> \n' +
                '  </Tab> \n' +
                '  <Tab \n' +
                '    label="Item Three" \n' +
                '    route="home" \n' +
                '    onActive={this._onActive} /> \n' +
                '</Tabs> \n' +
                '\n' +
                '_onActive: function(tab){ \n' +
                '  this.transitionTo(tab.props.route); \n' +
                '}';

    var desc = 'Refs cannont be set on individual Tab components as cloneWithProps is being ' +
      'used to extend the individual tab components under the hood. However, ' +
      'refs can be passed to the Tabs container and to any element or component within the template. ' +
      'If you need to access a tab directly - you can do so with the first argument of onActive or ' +
      'by accessing the props.children array by passing refs to the Tabs container.';

         

    var componentInfo = [
      {
        name: 'Tabs Props',
        infoArray: [
          {
            name: 'tabWidth',
            type: 'number',
            header: 'optional',
            desc: 'Specifiy tabWidth to set each tab to a set number of pixels. Tab Width is set by default to an even distribution of the parent Tabs container. If tabWidth is set but the total width of all tabs is greater than the container, tabWidth will revert back to default'
          }
        ]
      },
      {
        name: 'Tabs Events',
        infoArray: [
          {
            name: 'onChange',
            type: 'function',
            header: 'optional',
            desc: 'Fired on touch or tap of a tab.'
          }
        ]
      },<commit_msg>Update docs for `Tabs.onChange` changes<commit_after>var React = require('react');
var CodeExample = require('../../code-example/code-example.jsx');
var mui = require('mui');
var Router = require('react-router');
var ComponentDoc = require('../../component-doc.jsx');
var RouteHandler = Router.RouteHandler;
var Tabs = mui.Tabs;
var Tab= mui.Tab;

var TabsPage = React.createClass({

  mixins: [Router.Navigation, Router.State],

  render: function(){
    var code =  '<Tabs> \n' +
                '  <Tab label="Item One" > \n' +
                '    <div className="tab-template-container"> \n' +
                '      <h2 className="mui-font-style-headline">Tab One Template Example</h2> \n' +
                '      <p> \n' +
                '        This is an example of a tab template! \n' +
                '      </p> \n' +
                '      <p> \n' +
                '        You can put any sort of HTML or react component in here. \n' +
                '      </p> \n' +
                '    </div> \n' +
                '  </Tab> \n' +
                '  <Tab label="Item Two" > \n' +
                '    <div className="tab-template-container"> \n' +
                '      <h2 className="mui-font-style-headline">Tab Two Template Example</h2> \n' +
                '      <p> \n' +
                '        This is another example of a tab template! \n' +
                '      </p> \n' +
                '      <p> \n' +
                '        Fair warning - the next tab routes to home! \n' +
                '      </p> \n' +
                '    </div> \n' +
                '  </Tab> \n' +
                '  <Tab \n' +
                '    label="Item Three" \n' +
                '    route="home" \n' +
                '    onActive={this._onActive} /> \n' +
                '</Tabs> \n' +
                '\n' +
                '_onActive: function(tab){ \n' +
                '  this.transitionTo(tab.props.route); \n' +
                '}';

    var desc = 'Refs cannont be set on individual Tab components as cloneWithProps is being ' +
      'used to extend the individual tab components under the hood. However, ' +
      'refs can be passed to the Tabs container and to any element or component within the template. ' +
      'If you need to access a tab directly - you can do so with the first argument of onActive or ' +
      'by accessing the props.children array by passing refs to the Tabs container.';



    var componentInfo = [
      {
        name: 'Tabs Props',
        infoArray: [
          {
            name: 'tabWidth',
            type: 'number',
            header: 'optional',
            desc: 'Specifiy tabWidth to set each tab to a set number of pixels. Tab Width is set by default to an even distribution of the parent Tabs container. If tabWidth is set but the total width of all tabs is greater than the container, tabWidth will revert back to default'
          }
        ]
      },
      {
        name: 'Tabs Events',
        infoArray: [
          {
            name: 'onChange',
            type: 'function(tabIndex, tab)',
            header: 'optional',
            desc: 'Fired on touch or tap of a tab.'
          }
        ]
      },
{'fraction_non_alphanumeric': 0.1255479023168441, 'fraction_numerical': 0.0012523481527864746, 'mean_word_length': 1.3662962962962963, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5929603', 'n_tokens_mistral': 1891, 'n_tokens_neox': 1807, 'n_words': 599}