Components API

APIs of light-ui components. Check here to see online examples.

Button Group

Buttons, including Button, IconButton and FloatingActionButton, are all the extension of BaseButton Component.

Button

Normal button, can has left or right icon with text.

Button.propTypes = {
  value: PropTypes.string,
  onClick: PropTypes.func,
  color: PropTypes.string, // green, red, blue, dark, gray
  style: PropTypes.object, // custom inline style to overwrite
  className: PropTypes.string, // custom css module className to overwrite style
  theme: PropTypes.string, // material, flat, ghost
  disabled: PropTypes.bool,
  // send a icon DOM node, or a class string meaning a font-awesome icon
  leftIcon: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.element,
    PropTypes.string
  ]),
  rightIcon: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.element,
    PropTypes.string
  ])
};

IconButton

Similar with Button, but can only has icon, and much more smaller and light.

IconButton.propTypes = {
  icon: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.string
  ]),
  className: PropTypes.string,
  onClick: PropTypes.func,
  disabled: PropTypes.bool,
  theme: PropTypes.string // material, flat, ghost
};

FloatingActionButton

Google floating action button style

FloatingActionButton.propTypes = {
  style: PropTypes.object,
  onClick: PropTypes.func,
  className: PropTypes.string,
  icon: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.element,
    PropTypes.string
  ])
};

---

Input

Input.propTypes = {
  disabled: PropTypes.bool,
  required: PropTypes.bool, // whether check input value is validate or not
  value: PropTypes.string,
  style: PropTypes.object, // html inline style
  className: PropTypes.string, // custom className to overwrite
  id: PropTypes.string, // DOM id if you need
  placeholder: PropTypes.string,
  type: PropTypes.string, // HTML5 input type, used to set input check func
  theme: PropTypes.string, // material, flat, borderless
  subTheme: PropTypes.string,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  onKeyUp: PropTypes.func,
  onFocus: PropTypes.func,
  onKeyDown: PropTypes.func,
};

InputGroup

Combined Input & Tipso Components.

InputGroup is special, which combined by Input Component (Main Input) and Tipso Component. Tipso Component accept any component to render in it.

InputGroup.propTypes = {
  inputClassName: PropTypes.string, // used to overwrite Input style
  wrapperClassName: PropTypes.string, // used to overwrite Tipso style
  wrapperStyle: PropTypes.object, // inline style to overwrite Tipso,
  children: PropTypes.element // component will be rendered in Tipso
  // ...
  // another props is same as Input Component, will send to Main Input
};

// InputGroup usage example
import { InputGroup } from 'light-ui';

render() {
  return (
  	<InputGroup
		value={value}
		disabled={disabled}
		placeholder="input group with intro"
		onChange={this.onChange} >
    	// this DOM will be rendered in Tipso
		<div style={{ fontSize: '12px' }}>
			This is an intro of input.
		</div>
	</InputGroup>
  )
}

Selector Group

Has tow style of Selector component: Selector and SelectorV2.

Selector

Traditional selector component, using raw HTML <select/> DOM

Selector.propTypes = {
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  theme: PropTypes.string, // material, flat
  className: PropTypes.string,
  onChange: PropTypes.func,
  options: PropTypes.array,
  disabled: PropTypes.bool
};

SelectorV2

Custom selector component

SelectorV2.propTypes = {
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  theme: PropTypes.string, // material, flat
  className: PropTypes.string,
  onChange: PropTypes.func,
  options: PropTypes.array,
  disabled: PropTypes.bool,
  color: PropTypes.string, // green, blue, white
};

Textarea

Textarea.propTypes = {
  value: PropTypes.string,
  placeholder: PropTypes.string,
  onChange: PropTypes.func,
  onKeyDown: PropTypes.func,
  disabled: PropTypes.bool,
};

---

Loading

Loading.propTypes = {
  className: PropTypes.string,
  theme: PropTypes.string, // rotate, bounce
  loading: PropTypes.bool,
  closeAble: PropTypes.bool, // weather can be close or not
  onClose: PropTypes.func, // close callback
  style: PropTypes.object,
};

PortalModal

Check here to see more detail about Portal

PortalModal.propTypes = {
  closeOnEsc: PropTypes.bool,
  showModal: PropTypes.bool,
  closeOnOutsideClick: PropTypes.bool,
  onClose: PropTypes.func,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.array
  ])
};

---

ShortMessage Group

Has two components, wrote in react and raw javascript.

ShortMessage

Wrote in react.

import { ShortMessage } from 'light-ui';

ShortMessage.propTypes = {
  onClose: PropTypes.func, // close callback
  expire: PropTypes.number, // expire time, default 2000 ms
  text: PropTypes.string // message text
};

ShortMessage

Wrote in raw javascript.

import { ShortMessage } from 'light-ui/raw';

const Message = new ShortMessage(3000); // set 3s as expire time.

Message.remove(); // remove exist message
Message.show('This is SMS');

---

Tipso

Tipso is the extension of BaseTipso Component. It accept a children to render as Tipso trigger, and you can use hover, click or focus as trigger func.

Tipso.propTypes = {
  trigger: PropTypes.string, // hover, click or focus
  wrapperStyle: PropTypes.object,
  children: PropTypes.element,
  tipsoContent: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.node
  ]),
  className: PropTypes.string, // className to overwrite Tipso wrapper
  theme: PropTypes.string, // light or dark
  position: PropTypes.string, // top or bottom
  show: PropTypes.bool // show tipso in default
};

// Tipso example

// render a dark theme Tipso under the Button, only click can show this Tipso
render() {
  return (
  	<Tipso
		theme="dark"
    	position="bottom"
		trigger="click"
		tipsoContent={(
			<div className={styles['tipso-content']}>
    			This is an example
    		</div>
		)}>
			<Button value="hover to show" />
	</Tipso>
  )
}

---

InfoCard

InfoCard.propTypes = {
  mainText: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  subText: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  mainTextStyle: PropTypes.string,
  subTextStyle: PropTypes.string,
  className: PropTypes.string,
  icon: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.element,
    PropTypes.string
  ]),
  tipso: PropTypes.object, // an object config to render tipso in InfoCard
  style: PropTypes.object,
  theme: PropTypes.string // material, flat or ghost
};

CardGroup

You can render multiply InfoCard in CardGroup. Also, you can render any amount of CardGroup in CardGroup itself.

CardGroup.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.node,
    PropTypes.array
  ]),
  className: PropTypes.string,
  theme: PropTypes.string, // material, flat or ghost
  style: PropTypes.object,
};

---

Label

Label likes Button, but it can only has left icon, and much more smaller than Button

Label.propTypes = {
  text: PropTypes.string,
  clickable: PropTypes.bool,
  onClick: PropTypes.func,
  className: PropTypes.string,
  theme: PropTypes.string,
  icon: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.string
  ])
};

Switcher

Switcher.propTypes = {
  color: PropTypes.string, // green, blue or gray
  checked: PropTypes.bool,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  size: PropTypes.string, // normal or mini
  version: PropTypes.string // UI version, support "v1", "v2" or "v3", default "v1"
};

Slider

Support single value slider and Range selector.

Slider.propTypes = {
  className: PropTypes.string,
  // support custom tip DOM,
  // or you can only format the value.
  tipFormatter: PropTypes.func,
  min: PropTypes.number,
  max: PropTypes.number,
  // if you pass value as a single number, Slider will be a single selector
  // or pass it a array to support range select.
  value: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.array
  ]),
  minRange: PropTypes.number,
  color: PropTypes.string,
  onChange: PropTypes.func
};