JSFiddle - React, Tailwind, and code Playground

by wu fawzi

HTML

<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<link rel="stylesheet" href="http://114.215.169.170:8080/dist/ccms-components.css">
<script src="http://114.215.169.170:8080/dist/ccms-components.js"></script>
<div ng-controller="TabsetCtrl as tabset">
	<tabset active="tabset.activeIndex">

		<tab index="0" title="google">
			<dl>
				<dt>查询的结果共 0 条</dt>
				<dd style="margin-left: 0;">根据您的搜索提示为您推荐 <a href="javascript:;">百度一下>></a></dd>
			</dl>
		</tab>

		<tab index="1" title="facebook" on-select="tabset.select(tab)">
			<dl>
				<dt>404</dt>
				<dd style="margin-left: 0;">not a found</dd>
			</dl>
		</tab>

		<tab index="2" title="youtube">
			<div ng-controller="TestCtrl as test">
				<input type="text" ng-model="test.name">
        <input type="button" value="showName" ng-mousedown="test.alertMe();">
			</div>
		</tab>

    </tabset>
</div>

SCSS

body {
  padding: 10px;
  background: #fff;
}

JavaScript

angular
.module('app', ['ccms.components'])
.controller('TabsetCtrl', function() {
  this.name = 'test';
  this.activeIndex = 0;
  
  this.select = function(tab) {
  	console.log(tab);
  }
})
.controller('TestCtrl', function() {
  this.name = 'test';
  this.alertMe = function() {
    alert(this.name);
  }
});