@sparrowend/ui
v1.3.1
Published
Easy Web UI
Downloads
26
Maintainers
Readme
✨ Features
- 🌈 Enterprise-class UI designed for web applications.
- 📦 High quality microlibraries out of the box.
- 🛡 Written in TypeScript with predictable static types.
- ⚙️ Whole package of design resources and development tools.
- 🐍 Don't stick to any framework
- 🆕 Support for Progressive Web Apps(PWA).
🖥 Environment Support
| IE / Edge | Firefox | Chrome | Safari | Electron | | --- | --- | --- | --- | --- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
📦 Install
npm i @sparrowend/ui
yarn add @sparrowend/ui
pnpm add @sparrowend/ui
🔨 Usage
jsx
import { Button } from '@sparrowend/ui'; const App = () => ( <> <Button type="primary">PRESS ME</Button> </> );
And import style manually:
import '@sparrowend/ui/dist/spui.css'; // or // import '@sparrowend/ui/es/button/style';
html
<html> <link href='dist/spui.css'></link> <script src="dist/spui.js"></script> or <script type="module"> import { Message } from 'dist/spui-es.js'; Message.error('the end'); </script> <sp-button>click me</sp-button> </html>
import map
<html> <link href='dist/spui.css'></link> <script type="importmap"> { "imports": { "sparrow-ui": "dist/spui-es.js" } } </script> <script type="module"> import { Message } from 'sparrow-ui'; Message.error('sucessful'); </script> </html>
node(compile ---> any)
- art-template
<!--layout.art--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>{{block 'title'}}My Site{{/block}}</title> <link href='dist/spui.css'></link> <script src="dist/spui.js"></script> {{block 'head'}} <link rel="stylesheet" href="main.css"> {{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html>
{{if user}} <h2>{{user.name}}</h2> <sp-button>Thanks!</sp-button> {{/if}}
ejs 等同
- art-template
⌨️ Development
Use Gitpod, a free online dev environment for GitHub.
Or clone locally:
$ git clone [email protected]:lianglei-git/sparrow-ui.git
$ cd sparrow-ui
$ npm install
$ npm run start
🤝 Contributing
My welcome all contributions. Please contact me at [email protected]