index.html



<!-- Quarkd 属于移动端UI组件库，请将窗口调整到 H5 模式 -->
<!-- Quarkd 属于移动端UI组件库，请将窗口调整到 H5 模式 -->
<!-- Quarkd 属于移动端UI组件库，请将窗口调整到 H5 模式 -->

<!-- 官方文档：https://vanilla-quarkd.hellobike.com/#/zh-CN/component/button -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Quarkd + Vanilla JS</title>
  </head>
  <body>
    <h1>欢迎使用 Quarkd！(遇到问题请添加微信：yhy20200619edit)</h1>

    <quark-button type="primary">按钮示例（2 秒后变为 disabled）</quark-button>

  </body>

  <script type="module">
    import 'quarkd/lib/button'
  </script>
  <script type="module">
    const el = document.querySelector('quark-button')

    setTimeout(() => {
      el.disabled = true // 等价于：el.removeAttribute('disabled')
    }, 2000)

  </script>


  <script>
    /**
     * 使用方式一：npm 包
     * npm i quarkd
      <script type="module">
        import 'quarkd/lib/button'
      <\/script>


    /**
     * 使用方式二：CDN
     *
     * 当然，你也可以通过CDN直接使用Quarkd (Also, you can use cdn as)
      <script src="https://fastly.jsdelivr.net/npm/quarkd@latest/umd/index.js"><\/script>


    /**
     * 组件属性修改方法：
     *
     * 所有组件关于属性的获取和设置均类似写法：

    方式1：
    * comp.props // 获取
    * comp.props = newProps

    方式2：
    * // 原生属性操作
    * comp.setAttribute('props',newProps)
    * comp.removeAttribute('props')
    *
    *
  </script>
</html>