0.0.6 • Published 2 years ago

poem-ui v0.0.6

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

poem-ui

npm version license

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.

WEB ELEMENTSFORMSINTERACTIONLAYOUTNAVIGATION
AccordionInputInfinite ScrollGridCascading DropDown List
Accordion SliderPassword InputImage Perspective HoverGalleryDropdown Menu
Back To TopMerge InputMousewheel InteractionMultilevel Dropdown Menu
ButtonTag InputParallaxNavigation
CardTextareaScroll Reveal
Content PlaceholderSelectSticky Elements
CounterCustom Select
Hybrid Content SliderCheckbox
Image ShapesRadio
LightboxMulti Select
List BulletedSingle Select
Modal DialogDate
PaginationNumber
Periodical ScrollSwitch
Progress BarDynamic Fields
RatingFile
Seamless Scrolling ElementFile Field
Show More Less
Slideshow
Table
Table Grid
Table Sorter
Tabs
Tabs Animated
Timeline
Toaster
Tooltip

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.