JSFiddle - React, Tailwind, and code Playground

by tangbc

HTML

<script src="https://tangbc.github.io/sugar/dist/sugar.min.js"></script>
<div id="radio-box-phone"></div>
<hr/>
<div id="radio-box-job"></div>

CSS

ul {
  padding: 0;
}
li {
  margin-right: 10px;
  display: inline-block;
  list-style-type: none;
}

JavaScript

var RadioComponent = Sugar.Component.extend({
	init: function (config) {
  	this.Super('init', config, {
    	'view' : `
				<h2>Q: {{ title }}</h2>
				<h2>A: {{ selected }}</h2>
				<ul>
					<li v-for="item in items">
						<label>
							<input type="radio" v-bind:value="item.value"  v-model="selected">
							{{ item.value }}
						</label>
					</li>
				</ul>
			`,
			// MVVM 数据模型
			'model': {
      	'title'   : config.title,
				'items'   : config.items,
				'selected': config.selected
			}
    });
	}
});

// 用 RadioComponent 创建一个 phoneQA 的组件实例
var phoneQA = Sugar.core.create('phone', RadioComponent, {
	'target'  : document.querySelector('#radio-box-phone'),
 	'title'   : 'What cell phone do you use ? ',
	'selected': 'iPhone',
	'items'   : [
		{'value': 'iPhone'},
		{'value': 'XiaoMi'},
		{'value': 'Meizux'},
		{'value': 'HuaWei'},
    {'value': 'Others'}
	]
});
// 用 RadioComponent 创建一个 jobQA 的组件实例
var jobQA = Sugar.core.create('job', RadioComponent, {
	'target'  : document.querySelector('#radio-box-job'),
  'title'   : 'What\'s your job ? ',
	'selected': 'Programmer',
	'items'   : [
		{'value': 'Doctor'},
		{'value': 'Programmer'},
		{'value': 'Teacher'},
		{'value': 'Student'},
    {'value': 'Others'}
	]
});