JSFiddle - React, Tailwind, and code Playground

by nuysoft

HTML

<script src="//g-assets.daily.taobao.net/thx/brix-release/require-config-css.js"></script>
<div>
  <div bx-name="components/colorpicker" class="btn btn-default">ColorPicker</div>
  <input bx-name="components/colorpicker" placeholder="ColorPicker">
  <div bx-name="components/colorpicker" data-color="#ff6600" class="btn btn-default">设置初始值</div>
  <div bx-name="components/colorpicker" data-min="true" class="btn btn-default">精简模式</div>
</div>
<div>
  <div bx-name="components/colorpicker" class="btn btn-default">默认：位于下方 + 左侧对齐</div>
  <div bx-name="components/colorpicker" data-align="right" class="btn btn-default">位于下方 + 右对齐</div>
  <div bx-name="components/colorpicker" data-align="" class="btn btn-default">位于下方 + 水平居中对齐</div>
</div>
<div>
<div>
  <div bx-name="components/colorpicker" data-placement="left" data-align="top"    class="btn btn-default right-top"   > 位于左侧 + 顶部对齐     </div>
  <div bx-name="components/colorpicker" data-placement="left" data-align="middle"  class="btn btn-default right-middle"> 位于左侧 + 水平居中对齐 </div>
  <div bx-name="components/colorpicker" data-placement="left" data-align="bottom" class="btn btn-default right-bottom"> 位于左侧 + 底部对齐     </div>
</div>
  <div bx-name="components/colorpicker" data-placement="right" data-align="top" class="btn btn-default">位于右侧 + 顶部对齐</div>
  <div bx-name="components/colorpicker" data-placement="right" data-align="bottom" class="btn btn-default">位于右侧 + 底部对齐</div>
  <div bx-name="components/colorpicker" data-placement="right" data-align="" class="btn btn-default">位于右侧 + 垂直居中对齐</div>
</div>
<div>
  <div bx-name="components/colorpicker" data-placement="top" data-align="left" class="btn btn-default">位于上方 + 左侧对齐</div>
  <div bx-name="components/colorpicker" data-placement="top" data-align="right" class="btn btn-default">位于上方 + 右侧对齐</div>
  <div bx-name="components/colorpicker" data-placement="top" data-align="" class="btn btn-default">位于上方 + 水平居中对齐</div>
</div>
<div style="text-align: right;">
  <div...

CSS

body {
  padding: 10px;
}

body [bx-name="components/colorpicker"] {
  margin-right: 10px;
  margin-bottom: 20px;
}

.right-top    { position: absolute; right: 10px; top: 10px;    }
.right-middle { position: absolute; right: 10px; top: 50%;     }
.right-bottom { position: absolute; right: 10px; bottom: 10px; }

JavaScript

require(['brix/loader'], function(Loader) {
  Loader.boot(function() {
    var instances = Loader.query('components/colorpicker')
    instances.on('change.colorpicker', function(event, extra) {
      // event.preventDefault()
      console.log(event.type, event.namespace, extra)
    })
  })
})