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.
Command-UI-Components is available as an npm package.
npm install --save command-ui-components
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 |
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 |
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
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 |
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 |
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 |
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 |