0.0.6 • Published 2 years ago
poem-ui v0.0.6
poem-ui
Simple and customizable React UI components.
Some components use third-party plug-ins to improve the interaction. You can remove third-party plugins, or compatible with them.
Demos
https://xizon.github.io/poem-ui/public/
Components List
Here is a table of the components and their status.
Usage
To start using the components, please follow these steps:
1. Install package
npm i poem-ui
https://www.npmjs.com/package/poem-ui
2. Now you can start using components like so:
❤️ Recommend ❤️ Use modularized (supports ES modules tree shaking by default for JS part):
You can manually import the stylesheet as needed.
import React from 'react';
import { Button, ButtonGroup } from 'poem-ui/Button';
//import common styles (CSS reset library)
import 'poem-ui/UtilsReset/styles.css';
//import component styles
import 'poem-ui/Button/styles.css';
function Example() {
return <Button border="thin" spacing="bottom" background="primary" corners="pill" size="medium" id="app-btn-1" href="#" data-title="button" onClick={(e) => {e.preventDefault(); alert( e.target.id );} }>Click me to view ID!</Button>
}
function Example2() {
return <>
<ButtonGroup spacing="bottom">
<Button border="thin" background="primary transparent" corners="pill" size="small" href="https://google.com">Group</Button>
<Button border="thin" background="primary transparent" corners="pill" size="small" href="#">Group</Button>
<Button border="thin" background="primary transparent" corners="pill" size="small" href="#">Group</Button>
</ButtonGroup>
</>;
}
Or
import React from 'react';
import { Button } from 'poem-ui';
//import common styles (CSS reset library)
import 'poem-ui/UtilsReset/styles.css';
//import component styles
import 'poem-ui/Button/styles.css';
function Example() {
return <Button border="thin" spacing="bottom" background="primary" corners="pill" size="medium" id="app-btn-1" href="#" data-title="button" onClick={(e) => {e.preventDefault(); alert( e.target.id );} }>Click me to view ID!</Button>
}
And, you could also use:
// from Button
const { Button, ButtonGroup } = require('poem-ui/Button');
// from all components
const { Button, Tooltip } = require('poem-ui');
Licensing
Licensed under the MIT.