/command-ui-components

Primary LanguageJavaScriptMIT LicenseMIT

Command-UI-Components consists a bunch of UI tools for visualisation on large screens. It is my personal UI component package. Due to limited testing, it is not recommended for producton use at this very early stage, however comments and discussions are welcomed.

Installation

Command-UI-Components is available as an npm package.

npm install --save command-ui-components

API Documentation

1. CircularProgress

Config Options

Name Type Default Description
type String || [Number] solid Accept string solid or an array of numbers representing dashed lines. i.e. [20, 2]
size Number 0 Size of the conatiner
from Number 0 Progress value starts from
to Number 1 Progress value ends to
width Number 2 Arc line width
lineCap String butt One of butt, round, square
color String || Object black Progress color, for gradient colors, pass in an object of colour stops and corresponding colour names. Minimum three colour stops for gradient. i.e. {0: 'red', 0.5: 'green', 1: 'blue'}
backgroundColor String transparent Background colour
animateDuration Number 0 Animate duration in milliseconds

2. OdometerBoard

Config Options

Name Type Default Description
classes Object Useful to extend the style applied to components
data Array [{name: '行驶总里程(公里)',value: 485512,},...] Name and value of every board
data.name String 行驶总里程(公里) Name of every board
data.value Number 485512 Value of every board

CSS API

You can override all the class names injected by Command-UI-Components thanks to the classes property. This property accepts the following keys:

  • root
  • container
  • name
  • value

3. ButtonGroup

Name Type Default Required Description
isMultiple Boolean false N Support multiple select
buttons Array Y An array of buttons
buttons.name String Y Button name
buttons.id String N Button id. Equal to name if omitted. Locally unique
buttons.isActive Boolean false N Should button selected
buttonAll Object {} N Button 'select all'. If configured to true, it opens multiple select feature, even though isMultiple is configured to false
buttonAll.name String Y Button name
buttonAll.id String N Button id. Equal to name if omitted. Locally unique
buttonAll.isActive Boolean false N Should button selected
onClick Function N Accept two arguments: clicked button object and all selected button list

4. AppBar

Name Type Default Required Description
classes Object N Css overwrite
classes.menuList string N Overwrite MenuList styles
caption Object Y AppBar caption
position String relative N relative: Document flow AppBar component. absolute: AppBar is absolute positioned
city String N City name
navs Array N Navigation buttons
navs.name String Y Navigation button name
navs.id String navs.name N Navigation button id, default equal to button name
navs.isActive Boolean false N Whether button is highlighted
navs.navs Array N Sub navigation button list
onClick Function N Gives a list of arguments. The last argument is the actual navigation button that has been clicked, the previous represents the parent navigation button and so on

5.Table

Name Type Default Required Description
classes Object N Useful to extend the style applied to components
columns Array [] Y Column value
columns.label String/React dom Y Display
columns.prop String Y Correspond to key of data
data Array [] Y Every cloumns.prop value
isPaginate Boolean false Y true: Scroll table. false: Paginate table
rowsPerPage Number 5 Y Row number every page
selectRowIndex Number N The row of index. If you want to add click style or hover style, you can config this prop and also need to config onRowClick
onRowClick Function N Accept two arguments: clicked row data and clicked row index

6.Lessen

Name Type Default Required Description
classes Object N Useful to extend the style applied to components
children Node N The content of the component
data Array Y Every lessen data
data.name String Y Tab name
data.id String Y Unique id
data.classes String N Css api. Useful to override lessen style
data.isShowLessen Boolean N Initial lessen display
takeSpace Boolean true Y Whether tabs take up space in dom