Intuitively Understantable User Interface
Usage
Installation:
npm install i2ui
TagCloud
import { TagCloud } from 'i2ui';
<TagCloud options={[ { text: "Paris", rate: 2420069 }, { text: "Marseille", rate: 855393 }, { text: "Lyon", rate: 500715
}, { text: "Toulon", rate: 163760 }, { text: "Dunkirk", rate: 89882 }, { text: "Cambrai", rate: 32852 }, { text:
"Mallemort", rate: 5298 } ]} fromStyle={{ fontSize: '1em', margin: 5 }} toStyle={{ fontSize: '3em', margin: 10 }}
order="middle" />
Name | Required | Description |
---|
options | Yes | Tag data |
fromStyle | Yes | Style for tag with lower rate |
toStyle | Yes | Style for tag with highest rate |
order | No | Order of tags Values: none (default), desc , middle , asc , edge |
className | No | Container's class name |
style | No | Container's style |
TagCloud Live Demo
I2Number
import { I2Number } from 'i2ui';
<I2Number value={1234567.89} fromStyle={{ fontSize: '1em' }} toStyle={{ fontSize: '3em' }} />
Name | Required | Description |
---|
value | Yes | Value |
fromStyle | No | Style for part of number with lower significance |
toStyle | No | Style for part of number with highest significance |
fractionDigits | No | Number of digits on fraction part of number. Default is 2 |
basicMaxValue | No | Max number to empasize. Used in set of numbers to be basic. Ussually this is the max mumber from the set. |
align | No | Order of tags Values: none (default), desc , middle , asc , edge |
className | No | Container's class name |
style | No | Container's style |
I2Number Live Demo