@@include('./../../template/common/header.html', {
"title": "clipboard",
csslinks:['./../../static/css/detail.css']
})
<script src="./../../static/js/clipboard/clipboard.min.js"></script>
<div class="layui-iframe">
  @@include('./../../template/common/breadcrumb.html', {
  "title": "clipboard",
  subtitle:''
  })
  <div class="layui-fluid">
    <!-- clipboard1 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">constructor-id-node</span></div>
      <div class="layui-opr-block">
        <div id="btn" data-clipboard-text="1">
          <span class="normal-btn mr-10">复制</span>
        </div>
      </div>
    </div>
    <!-- clipboard2 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">constructor-button-nodelist</span></div>
      <div class="layui-opr-block">
        <button class="normal-btn mr-10" data-clipboard-text="1">复制</button>
        <button class="normal-btn mr-10" data-clipboard-text="2">复制</button>
        <button class="normal-btn mr-10" data-clipboard-text="3">复制</button>
      </div>
    </div>
    <!-- clipboard3 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">constructor-selector</span></div>
      <div class="layui-opr-block">
        <span class="normal-btn selector-constructor mr-10">复制</span>
      </div>
    </div>
    <!-- clipboard4 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">function-target</span></div>
      <div class="layui-opr-block">
        <button class="normal-btn target-btn">复制</button>
        <div class="target-text">this is copy text!</div>
      </div>
    </div>
    <!-- clipboard5 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">function-text</span></div>
      <div class="layui-opr-block">
        <button class="normal-btn text-btn">复制</button>
      </div>
    </div>

    <!-- clipboard6 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">function-target</span></div>
      <div class="layui-opr-block">
        <p>这就是你要复制的内容</p>
        <button class="normal-btn div-btn" data-clipboard-action="copy" data-clipboard-target="p">复制</button>
      </div>
    </div>

    <!-- clipboard7 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">function-target-input</span></div>
      <div class="layui-opr-block">
        <input id="foo" type="text" value="hello">
        <button class="normal-btn target-input-btn" data-clipboard-action="copy"
          data-clipboard-target="#foo">复制</button>
      </div>
    </div>

    <!-- clipboard8 -->
    <div class="layui-card detail-card">
      <div class="header"><span class="icon"></span><span class="title">function-textarea</span></div>
      <div class="layui-opr-block">
        <textarea id="bar">hello textarea</textarea>
        <button class="normal-btn target-textarea-btn" data-clipboard-action="copy"
          data-clipboard-target="#bar">复制</button>
      </div>
    </div>

  </div>
</div>

@@include('./../../template/common/footer.html', {
"jslinks": ['./../../static/js/clipboard/index.js']
})