https://github.com/xgqfrms/wcui

Web Components UI (@xgqfrms/wcui)
https://github.com/xgqfrms/wcui

javascript lit npm typescript ui wcui web-components xgqfrms

Last synced: 2 months ago
JSON representation

Web Components UI (@xgqfrms/wcui)

• Host: GitHub
• URL: https://github.com/xgqfrms/wcui
• Owner: xgqfrms
• License: mit
• Created: 2022-07-05T15:32:19.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-09T11:24:30.000Z (almost 4 years ago)
• Last Synced: 2025-11-23T18:15:46.913Z (7 months ago)
• Topics: javascript, lit, npm, typescript, ui, wcui, web-components, xgqfrms
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@xgqfrms/wcui
• Size: 134 KB
• Stars: 1
• Watchers: 0
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
![](https://img.shields.io/badge/webcomponents.org-published-blue.svg) [![](https://img.shields.io/badge/webcomponents.org-@xgqfrms/wcui-deepgreen.svg)](https://www.webcomponents.org/element/@xgqfrms/wcui)

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

# Web Components UI

> WCUI

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

## install

```sh

# 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

```html

  

    默认按钮

  

  

    成功按钮

  

  

    警告按钮

  

  

    危险按钮

  

 

```

```js

const callback = (type = '') => {

  console.log('button type', type);

  alert(`🎉 button type =${type}`);

}

window.callback = callback;

```

![](https://user-images.githubusercontent.com/7291672/177508468-07c709a8-edd3-4e25-8048-a3996a0c92e9.png)

## live demo

```html

  

  


    

    

      

        默认按钮

      

    

    

      

      

        成功按钮

      

    

    

    

      

        警告按钮

      

    

    

      

        危险按钮

      

    

  

```


## 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

```sh

# dev

$ npm run dev

# build

$ npm run build

```

> npm

```sh

# 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](https://allcontributors.org/docs/en/emoji-key)):

  

    
xgqfrms
💻 👀 🚧

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!