README.md

Web Components UI

WCUI

https://www.webcomponents.org/element/@xgqfrms/wcui

install

# Web Components UI
$ npm i -S @xgqfrms/wcui

https://www.npmjs.com/package/@xgqfrms/wcui

lit version

https://www.npmjs.com/package/lit-wcui

usage

<!-- step1. import wcui -->
<script src="../dist/wcui/index.min.js"></script>

<!-- step2. use wcui-??? -->

<!-- wcui-toast -->
<wcui-toast content="this is one custom `Toast` components"></wcui-toast>

<!-- wcui-button -->
<wcui-button></wcui-button>
<wcui-button type="primary">
  <span slot="text">
    默认按钮
  </span>
</wcui-button>
<wcui-button type="success">
  <span slot="text" onclick="callback('success')">
    成功按钮
  </span>
</wcui-button>
<wcui-button type="warning" callback="callback">
  <span slot="text">
    警告按钮
  </span>
</wcui-button>
<wcui-button type="danger" callback="callback">
  <span slot="text">
    危险按钮
  </span>
</wcui-button>

 <!-- wcui-time-formatter -->
<wcui-time-formatter id="time"
  hour="numeric"
  minute="numeric"
  second="numeric">
</wcui-time-formatter>

const callback = (type = '') => {
  console.log('button type', type);
  alert(`🎉 button type =${type}`);
}

window.callback = callback;

live demo

  <!-- wcui-button -->
  <div class="box">
    <wcui-button></wcui-button>
    <wcui-button type="primary">
      <span slot="text">
        默认按钮
      </span>
    </wcui-button>
    <wcui-button type="success">
      <!-- onclick -->
      <span slot="text" onclick="callback('success')">
        成功按钮
      </span>
    </wcui-button>
    <!-- callback -->
    <wcui-button type="warning" callback="callback">
      <span slot="text">
        警告按钮
      </span>
    </wcui-button>
    <wcui-button type="danger" callback="callback">
      <span slot="text">
        危险按钮
      </span>
    </wcui-button>
  </div>

wcui components table

name	props	type	default
wcui-toast	content	string	''
wcui-button	type	'primary'/'success'/'warning'/'danger'	'primary'
wcui-time-formatter	datetime / year / month / day/ hour / minute / second / time-zone-nam	string	Date.now()
-	-	-	-
-	-	-	-
-	-	-	-

dev

github

# dev
$ npm run dev

# build
$ npm run build

npm

# publish
$ npm publish
# $ npm publish --access=public

https://github.com/xgqfrms/wcui

refs

https://developer.mozilla.org/en-US/docs/Web/Web_Components/

https://javascript.info/custom-elements

https://rollupjs.org/

Contributors ✨

Thanks goes to these wonderful people (emoji key):

xgqfrms 💻 👀 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!