JSFiddle - React, Tailwind, and code Playground

by nuysoft

HTML

<script src="https://g.alicdn.com/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 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 class="content" style="text-align: right;">
  <div bx-name="components/colorpicker" data-placement="left" data-align="top" class="btn btn-default">位于左侧 + 顶部对齐</div>
  <div bx-name="components/colorpicker" data-placement="left" data-align="bottom" class="btn btn-default">位于左侧 + 底部对齐</div>
  <div bx-name="components/colorpicker" data-placement="left" data-align="" class="btn btn-default">位于左侧 + 垂直居中对齐</div>
</div>

CSS

body {
  padding: 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
      )
    })
  })
})