1.4.1 • Published 7 years ago
sg-react-components v1.4.1
sg-react-components
React components for SUGOS project.
Installation
$ npm install sg-react-components --saveDemo
Live demo is hosted on GitHub Pages.
Usage
'use strict'
import React from 'react'
import {
SgThemeStyle
} from 'sg-react-components'
const DOMINANT_COLOR = '#FFC533'
const ExampleComponent = React.createClass({
render () {
return (
<div>
<SgThemeStyle dominant={ DOMINANT_COLOR }/>
</div>
)
}
})Components
SgAlbum
Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| width | number | 300 | Width(px) of a image. | |
| imageList | array | [] | List of image src. | |
| thumbnailCol | number | 4 | Number of images per 1 row in the thumbnail. | |
| thumbnailSelectedColor | string | 'yellow' | Border color of selected image in the thumbnail. | |
| onChange | func | Called when update. Argument is index of imageList. |
SgBody
Props
| Name | Type | Default | Description |
|---|
SgButton
Props
| Name | Type | Default | Description |
|---|
SgHead
Props
| Name | Type | Default | Description |
|---|
SgHeader
Props
| Name | Type | Default | Description |
|---|
SgHeart
Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| width | number | 44 | ||
| height | number | 44 | ||
| heartRate | number | 60 | ||
| id | string |
SgHtml
Props
| Name | Type | Default | Description |
|---|
SgKinectFrame
Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| bodies | array | Body frame data from kinect | ||
| width | number | depthSpace.BOUND_WIDTH | Component width | |
| height | number | depthSpace.BOUND_HEIGHT | Component height | |
| frameWidth | number | 4 | Width of frames | |
| jointRadius | number | 3 | Radius of joint | |
| scale | number | 2 | Scale rate of canvas | |
| alt | string | 'NO BODY FOUND' | Alt message when no body found | |
| colorizer | func | colorHelper.uniqueColorizer('#CCCC33') | Colorizer function |
SgMain
Props
| Name | Type | Default | Description |
|---|
SgMicrophone
Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| width | number | 44 | ||
| height | number | 44 | ||
| on | bool | false |
SgPage
Props
| Name | Type | Default | Description |
|---|
SgSwitch
Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| width | number | Width(px) of a switch. | ||
| on | bool | The state of on/off. | ||
| onTap | func | Function on tap. | ||
| onTitle | string | |||
| offTitle | string | |||
| highlightColor | string | |||
| backgroundColor | string | |||
| borderColor | string | |||
| handleSize | number |
SgThemeStyle
Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| style | object | {} | ||
| dominant | string | ApStyle.DEFAULT_HIGHLIGHT_COLOR |
SgVideo
Props
| Name | Type | Default | Description | ||
|---|---|---|---|---|---|
| src | string | arrayOf | Video source URL | ||
| playerRef | func | function() {} | Register player |
License
This software is released under the Apache-2.0 License.
Links
1.4.1
7 years ago