core
v0.0.1arrow_drop_downv0.0.1
STATUS
Processing
DOWNLOADS
6
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
N/A
1 contributor
Like
Install core as a package?
Copied
npm i @bit/totalsoft_components.ts_react_components.core
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout
chevron_left
chevron_right
Properties
Name | Type | Default value |
---|---|---|
active | number | -1 |
collapses (required) | {"title":"string","content":"node"}[] | |
title | string | |
onClick | function | |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeNoBackground" |
size | "small" | "medium" | |
fontSize | "inherit" | "default" | "small" | "large" | "small" |
options | array | [] |
loadOptions | function | |
value | object | array | number | string | bool | null |
onChange (required) | function | |
onMenuOpen | function | |
isMultiSelection | bool | false |
isClearable | bool | false |
isSearchable | bool | false |
disabled | bool | false |
simpleValue | bool | false |
label | string | " " |
valueKey | string | "id" |
labelKey | string | "name" |
error | bool | false |
createdLabel | string | |
creatable | ? | false |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeWithBackground" |
size | "small" | "medium" | |
fontSize | "inherit" | "default" | "small" | "large" | "small" |
title | string | |
path | string | |
color | "primary" | "info" | "success" | "warning" | "danger" | "rose" | "theme" | "themeNoBackground" | "themeWithBackground" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "white" | "simple" | "transparent" | |
round | bool | |
children | node | |
fullWidth | bool | |
disabled | bool | |
customClass | string | |
wd | bool | |
justIcon | bool | |
right | bool | |
size | "sm" | "lg" | "xs" | |
tooltip | string | |
title | string | |
onClick | function | |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeNoBackground" |
size | "small" | "medium" | "small" |
fontSize | "inherit" | "default" | "small" | "large" | "small" |
className | string | |
color | "primary" | "info" | "success" | "warning" | "danger" | "rose" | 'primary' |
children | node | |
title | string | |
actions | array | |
chart (required) | object | |
title | node | |
text | node | |
StatIcon | function | |
statIconColor | "warning" | "primary" | "danger" | "success" | "info" | "rose" | "gray" | "gray" |
chartColor | "orange" | "green" | "red" | "blue" | "purple" | "rose" | "white" | "purple" |
statLink | object | |
statText | node | |
hover | bool | false |
underChart | node | |
options (required) | object | |
type (required) | string | |
labels | array | |
dataInfo (required) | object | |
displayDataLabels (required) | bool | |
chartColor (required) | string | |
title | string | |
text | string | |
StatIcon | object | |
statText | string | |
hover | bool | |
borderWidth | number | |
underChart | object | |
labels | array | |
dataInfo | object | |
underChart | object | |
chartColor | string | |
title | string | |
text | string | |
StatIcon | object | |
statText | string | |
hover | bool | |
displayDataLabels | bool | true |
options | object | |
labels | array | |
dataInfo | object | |
underChart | object | |
chartColor | string | |
title | string | |
text | string | |
StatIcon | object | |
statText | string | |
hover | bool | |
displayDataLabels | bool | true |
borderWidth | number | 1 |
options | object | |
dataInfo | object | |
displayDataLabels | bool | |
chartColor | string | |
options | object | |
id (required) | string | |
open | bool | |
title | string | |
buttonColor | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "white" | "simple" | "transparent" | "primary" |
buttonSize | "sm" | "lg" | "xs" | "sm" |
textContent | string | |
content | node | |
onYes | function | |
onClose | function | |
showActions | bool | false |
maxWidth | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false | "md" |
fullWidth | bool | true |
color | "primary" | "warning" | "danger" | "success" | "info" | "rose" | "gray" | "gray" |
value | any | null |
onChange | function | () => { } |
dateFormat | string | "DD-MM-YYYY" |
timeFormat | string | "HH:mm" |
label | string | "Date Time" |
disabled | bool | false |
variant | "dialog" | "inline" | "static" | "inline" |
views | "date" | "year" | "month" | "hours" | "minutes"[] | ["date"] |
autoOk | bool | true |
disablePast | bool | |
disableFuture | bool | |
disableToolbar | bool | true |
allowKeyboardControl | bool | |
ampm | bool | false |
showTime | bool | |
error | bool | |
helperText | string | |
clearable | bool | |
title | string | |
onClick | function | |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeNoBackground" |
size | "small" | "medium" | "small" |
fontSize | "inherit" | "default" | "small" | "large" | "default" |
id (required) | string | |
open | bool | |
title | string | |
onClose | function | |
content | element | |
actions | element | |
title | string | |
onClick | function | |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeNoBackground" |
size | "small" | "medium" | "small" |
fontSize | "inherit" | "default" | "small" | "large" | "default" |
title | string | |
onClick | function | |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeNoBackground" |
size | "small" | "medium" | "small" |
fontSize | "inherit" | "default" | "small" | "large" | "small" |
controlType | 'INT' | 'NUM' | 'STR' | 'CLST' | 'VCLST' | 'BOOL' | "STR" |
onChange | function | |
loadOptions | function | |
value | any | |
DefaultComp | node | |
defaultCompProps | any | |
title | string | |
onClick | function | |
editMode | bool | true |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeNoBackground" |
size | "small" | "medium" | "small" |
fontSize | "inherit" | "default" | "small" | "large" | "default" |
text (required) | string | |
minLength | number | 2000 |
lines | number | 4 |
onPaper | bool | false |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "defaultNoBackground" |
size | "small" | "medium" | "medium" |
customClass | string | |
disabled | bool | |
tooltip | string | |
icon (required) | object | |
iconColor | "orange" | "green" | "red" | "blue" | "purple" | "rose" | "theme" | "theme" |
title | node | "" |
category | node | |
content | node | |
footer | node | |
plain | bool | |
customCardContentClass | string | |
customCardClass | string | |
icon (required) | object | |
iconColor | "orange" | "green" | "red" | "blue" | "purple" | "rose" | "theme" | "theme" |
title | node | |
category | node | |
content | node | |
footer | node | |
plain | bool | |
customCardContentClass | string | |
header | node | |
expanded | bool | |
canExpand | bool | |
defaultExpanded | bool | |
onToggle | function | |
className | string | |
children | node | |
image | string | |
color | "primary" | "info" | "success" | "warning" | "danger" | "rose" | |
imageSize | 's' | 'm' | 'l' | 's' |
active | number | 0 |
tabs (required) | {"tabButton":"string","tabIcon":"object","tabContent":"node"}[] | |
color | "primary" | "warning" | "danger" | "success" | "info" | "rose" | "primary" |
direction | string | |
horizontal | {"tabsGrid":"object","contentGrid":"object"} | |
alignCenter | bool | |
onChange (required) | function | |
actions | array | [] |
title | string | |
totalCount (required) | number | |
pageSize (required) | number | |
page (required) | number | |
onChangeRowsPerPage | function | |
onChangePage | function | |
onRefresh | function | () => { } |
loading | bool | |
rowsPerPageOptions | array | |
count (required) | number | |
onChangePage (required) | function | |
page (required) | number | |
rowsPerPage (required) | number | |
active | array | -1 |
collapses (required) | {"title":"string","content":"node"}[] | |
customCardClasses | string | |
customCardTitleClasses | string | |
plainCard | bool | |
cardTitle | node | |
cardSubtitle | node | |
content | node | |
titleAlign | "right" | "left" | "center" | |
contentAlign | "right" | "left" | "center" | |
subtitleAlign | "right" | "left" | "center" | |
title | string | |
onClick | function | |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeWithBackground" |
size | "small" | "medium" | |
fontSize | "inherit" | "default" | "small" | "large" | "small" |
label | string | |
value | any | |
onChange | function | |
fullWidth | bool | |
min | number | |
max | number | |
step | number | |
error | bool | |
helperText | string | |
required | bool | |
decimalScale | number | |
disabled | bool | |
showSliderLimits | bool | |
Icon (required) | function | |
iconColor | "orange" | "green" | "red" | "blue" | "purple" | "purple" |
title | node | |
description | node | |
Small | node | |
StatIcon | function | |
statIconColor | "warning" | "primary" | "danger" | "success" | "info" | "rose" | "gray" | "gray" |
statLink | object | |
statText | node | |
label | string | |
value | any | |
required | bool | |
editable | bool | true |
error | any | |
onChange | function | |
maskable | bool | |
helperText | string | |
timeFormat | string | |
disabled | bool | |
tooltip | string | |
variant | 'inherit' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'inherit' |
color | 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error' | |
align | 'inherit' | 'left' | 'center' | 'right' | 'justify' | |
title | string | |
onClick | function | |
disabled | bool | |
children | node | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeWithBackground" |
size | "small" | "medium" | "small" |
fontSize | "inherit" | "default" | "small" | "large" | "default" |
title | string | |
onClick | function | |
disabled | bool | |
color | "primary" | "info" | "theme" | "themeNoBackground" | "themeWithBackground" | "success" | "warning" | "danger" | "rose" | "white" | "simple" | "defaultNoBackground" | "primaryNoBackground" | "infoNoBackground" | "successNoBackground" | "warningNoBackground" | "dangerNoBackground" | "roseNoBackground" | "themeWithBackground" |
size | "small" | "medium" | "small" |
fontSize | "inherit" | "default" | "small" | "large" | "default" |