i2ui

i2ui

Intuitively Understantable User Interface

Glossary

• Usage
• TagCloud
• I2Number

Usage

Installation:

npm install i2ui

TagCloud

Live Demo

import { TagCloud } from 'i2ui';
...
<TagCloud
    fromStyle={{
        fontSize: 10,
        color: 'LightSkyBlue',
        backgroundColor: 'DarkBlue',
        margin: 5,
        padding: '1px 2px',
        borderRadius: 3,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'LightSkyBlue',
    }}
    toStyle={{
        fontSize: 40,
        color: 'DarkBlue',
        backgroundColor: 'LightSkyBlue',
        margin: 10,
        padding: '2px 8px',
        borderRadius: 10,
        borderWidth: 3,
        borderStyle: 'solid',
        borderColor: 'DarkBlue',
    }}
    order="middle"
    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 },
    ]}
/>

Name	Required	Type	Description
options	true	array	Tags data
fromStyle	true	object	Tag's style with lower rate
toStyle	true	object	Tag's style with highest rate
order	false	string	Tag's order: none(default), desc, middle, asc, edge
className	false	string	Container's class name
style	false	object	Container's style

I2Number

Live Demo

import { I2Number } from 'i2ui';
...
<I2Number
    value={1234567.89}
    fromStyle={{ fontSize: '1em', opacity: 0.6 }}
    toStyle={{ fontSize: '4em', opacity: 1 }}
    decimalDigits={2}
/>

Name	Required	Type	Description
value	true	number	Value
fromStyle	false	object	Part of number's style with lower significance
toStyle	false	object	Part of number's style with highest significance
basicMaxValue	false	number	Max value to empasize. Used in set of numbers to be basic. Actually, this is the max mumber from the set.
verticalAlign	false	string	Vertical align: top, center, bottom(default)
decimalDigits	false	number	Number of decimal digits. Default is 0
grouplDigits	false	number	Number of group digits. Default is 3
groupSeparator	false	string	Separates groups of digits
decimalSeparator	false	string	Separates decimal part
className	false	string	Container's class name
style	false	object	Container's style