Usage examples

For more examples, you can click here to play online demo, or click here to see the source code of components usage.

Button

Online examples

import React from 'react';
import { Button } from 'light-ui';

// ....
render() {
  return (
  	<Button
    	theme="material" // material, flat, ghost, default material
    	color="dark" // dark, green, blue, red, gray, default green
    	value="button example"
	    disabled={this.props.disabled}
    />
  )
}

Min Info Card

Online examples

import React from 'react';
import { InfoCard, CardGroup } from 'light-ui';

// single info card
render() {
  return (
  	<InfoCard
    	theme="material" // material, flat, ghost, default material
    	mainText="Material Theme"
    	subText="info card example"
    />
  )
}

// info card with intro tipso
render() {
  return (
  	<InfoCard
    	mainText="Material Theme"
    	subText="2017"
    	style={{ textAlign: 'left' }}
    	tipso={{
    		text: 'This is material theme'
    	}}
    />
  )
}

// multiply info cards in group (in one line)
render() {
  return (
  	<CardGroup>
    	<InfoCard
    		mainText="Card Group 1"
    		subText="2017"
    		style={{ textAlign: 'left' }}
    		tipso={{
    			text: 'This card is in group'
    		}}
    	/>
    	<InfoCard
    		mainText="Card Group 2"
    		subText="2017"
    		style={{ textAlign: 'left' }}
    	/>
    </CardGroup>
  )
}

// multiply info cards in group (in multiply lines)
render() {
  return (
  	<CardGroup>
    	<CardGroup>
    		<InfoCard
    			mainText="Card Group 1"
    			subText="2017"
    			tipso={{
    				text: 'This card is in group'
    			}}
    		/>
    		<InfoCard
    			mainText="Card Group 2"
    			subText="2017"
    			style={{ textAlign: 'left' }}
    		/>
    		<InfoCard
                mainText="Card Group 3"
                subText="2017"
            />
    	</CardGroup>
    	<CardGroup>
    		<InfoCard
                mainText="Card Group 4"
                subText="2017"
    		/>
    		<InfoCard
                mainText="Card Group 5"
                subText="2017"
    		/>
    	</CardGroup>
    </CardGroup>
  )
}

Tipso

Online examples

import React from 'react';
import { Tipso, Button } from 'light-ui';

// ...
render() {
  return (
  	<Tipso
    	tipsoContent={(
    		<div style={{
    			width: '95px',
    			textAlign: 'center'
    		}}>
    			This is an example
    		</div>
  		)}>
            <Button
              value="hover to show"
            />
	</Tipso>
  )
}

// you can render tipso to any components
// and use any DOM your like to show in tipso
render() {
  return (
  	<Tipso
    	tipsoContent={(<span>tipso example</span>)}
    	trigger="focus" // hover, click, focus, default hover
    >
    	<input placeholder="your need to focus to show tipso" />
    </Tipso>
  )
}

Switcher

Online examples

import {} from 'light-ui';

// ...
render() {
  return (
  	<Switcher onChange={this.onChange} checked={props.checked} />
  )
}