1.2.6 • Published 2 years ago
idm-ipex-ui v1.2.6
IDM-IPEX-UI
JMSOFT IDM IPEX UI Components Libary
NodeJS Version v16.20.0
React v18.2.0
package v.1.2.0 standard Document - npm
Layout Components
- Container
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node |
- Wrapper
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node |
- Group
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| required | title | string | ||
| optional | margin | string | ||
| optional | groupCount | 'two', 'three' |
- GroupRow
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| optional | width | string, number | ||
| optional | padding | string | ||
| optional | justify | 'right', 'center', 'left', 'space-between' | ||
| optional | gap | 'top', 'right', 'left', 'bottom' | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | flexWrap | boolean |
- GroupColumn
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| optional | width | string | ||
| optional | height | string | ||
| optional | align | 'left', 'center', 'right', 'space-between' | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | gap | 'right', 'left', 'top', 'bottom' | ||
| optional | flexWrap | boolean |
- GroupButton
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| optional | width | number, '100%', 'auto' | ||
| optional | justify | 'right', 'center', 'left' |
- GroupTextLine
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| optional | align | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | fontSize | 'small', 'large' | ||
| optional | fontBold | boolean | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |
- Div
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| optional | display | string | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | width | string | ||
| optional | height | string | ||
| optional | column | boolean | ||
| optional | align | 'right', 'center', 'left', 'flex-end', 'flex-start' | ||
| optional | justify | 'right', 'center', 'left', 'space-between' | ||
| optional | background | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | border | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | radius | number | ||
| optional | position | 'absolute', 'relative', 'fixed' | ||
| optional | top | number | ||
| optional | right | number | ||
| optional | left | number | ||
| optional | bottom | number |
- Modal
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| required | open | boolean | ||
| optional | width | string | ||
| optional | height | string | ||
| optional | onClose | (val: boolean) => void |
- Loading
| props | type | desc | ||
|---|---|---|---|---|
| required | open | boolean |
Image Components
- Logo
| props | type | desc | ||
|---|---|---|---|---|
| required | width | number | ||
| required | src | string | ||
| optional | margin | string | ||
| optional | padding | string | ||
| optional | onClick | () => void |
Text Components
- Subject
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| optional | width | number | ||
| optional | align | 'right', 'center', 'left' | ||
| optional | icon | node | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |
- TextSingle
| props | type | desc | ||
|---|---|---|---|---|
| required | text | string | ||
| optional | width | number | ||
| optional | height | string | ||
| optional | align | 'right', 'center', 'left' | ||
| optional | justify | 'flex-start', 'center', 'flex-end' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | fontBold | boolean | ||
| optional | fontSize | 'small', 'large' | ||
| optional | backgroundColor | string | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | gap | 'right', 'top', 'bottom', 'left' | ||
| optional | onClick | (val: string) => void |
- TextDouble
| props | type | desc | ||
|---|---|---|---|---|
| required | textUpper | string | ||
| required | textLower | string | ||
| optional | width | number | ||
| optional | height | string | ||
| optional | align | 'right', 'center', 'left' | ||
| optional | justify | 'flex-start', 'center', 'flex-end' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | fontBold | boolean | ||
| optional | fontSize | 'small', 'large' | ||
| optional | backgroundColor | string | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | gap | 'right', 'top', 'bottom', 'left' | ||
| optional | onClick | (val: { textUpper: string, textLower: string }) => void |
- TextColorIconBox
| props | type | desc | ||
|---|---|---|---|---|
| required | text | string | ||
| required | boxColor | string | ||
| optional | width | number | ||
| optional | align | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | fontBold | boolean | ||
| optional | fontSize | 'small', 'large' | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | gap | 'right', top', 'bottom', 'left' | ||
| optional | onClick | (val: string) => void |
Button Components
- Button
| props | type | desc | ||
|---|---|---|---|---|
| required | text | string | ||
| required | onClick | () => void | ||
| optional | icon | 'add', 'remove', 'modify', 'search', 'delete', 'excel', 'listen', 'apply', 'download' | ||
| optional | width | string | ||
| optional | margin | string | ||
| optional | padding | string | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | size | 'small', 'large' | ||
| optional | gap | 'right', 'top', 'bottom', 'left' | ||
| optional | disabled | boolean |
Input Components
- InputText
| props | type | desc | ||
|---|---|---|---|---|
| required | value | string | ||
| required | type | 'text', 'password', 'number' | ||
| optional | width | 'small', 'medium', 'large', 'full', 'modal' | ||
| optional | title | string | ||
| optional | titleWidth | 'small', 'medium', 'large' | ||
| optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | titleCover | boolean | ||
| optional | titleAlign | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | placeholder | string | ||
| optional | disabled | string | ||
| optional | gap | 'right', 'top', 'bottom', 'left' |
- InputSelect
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | OptionTag | |
| required | value | any | ||
| required | items | { text: string; value: any; disalbed?: boolean; checked?: boolean }[] | ||
| required | onChange | (val: string) => void | ||
| optional | width | 'small', 'medium', 'large', 'full', 'modal' | ||
| optional | title | string | ||
| optional | titleWidth | 'small', 'medium', 'large' | ||
| optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | titleCover | boolean | ||
| optional | titleAlign | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | disabled | string | ||
| optional | gap | 'right', 'top', 'bottom', 'left' |
- InputDate
| props | type | desc | ||
|---|---|---|---|---|
| required | value | string | ||
| required | onChange | (val: string) => void | ||
| required | type | 'date', 'datetime-local' | ||
| optional | width | 'small', 'medium', 'large', 'full', 'modal' | ||
| optional | title | string | ||
| optional | titleWidth | 'small', 'medium', 'large' | ||
| optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | titleCover | boolean | ||
| optional | titleAlign | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | disabled | string | ||
| optional | gap | 'right', 'top', 'bottom', 'left' |
- InputTextarea
| props | type | desc | ||
|---|---|---|---|---|
| required | value | string | ||
| required | row | number | ||
| required | onChange | (val: string) => void | ||
| optional | width | 'small', 'medium', 'large', 'full', 'modal' | ||
| optional | title | string | ||
| optional | titleWidth | 'small', 'medium', 'large' | ||
| optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | titleCover | boolean | ||
| optional | titleAlign | 'right', 'center', 'left' | ||
| optional | titleSelectValue | string | ||
| optional | titleSelectItems | { text: string; value: any; disabled?: boolean; checked?: boolean }[] | ||
| optional | titleSelectOnChange | (val: string) => void | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | disabled | string | ||
| optional | placeholder | string | ||
| optional | gap | 'right', 'top', 'bottom', 'left' |
- InputCheck
| props | type | desc | ||
|---|---|---|---|---|
| required | value | { text: string; value: any; disabled?: boolean; checked?: boolean; }[] | ||
| required | onChange | (val: { text: string; value: any; disabled?: boolean; checked?: boolean; }[]) => void | ||
| optional | width | 'full', 'modal' | ||
| optional | title | string | ||
| optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | titleCover | boolean | ||
| optional | titleAlign | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | flexWrap | boolean | ||
| optional | gap | 'right', 'top', 'bottom', 'left' |
- InputRadio
| props | type | desc | ||
|---|---|---|---|---|
| required | value | any | ||
| required | items | { text: string; value: any; disabled?: boolean; checked?: boolean; }[] | ||
| required | onChange | (val: any) => void | ||
| optional | width | 'small', 'medium', 'large', 'full', 'modal' | ||
| optional | title | string | ||
| optional | titleWidth | 'small', 'medium', 'large' | ||
| optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | titleCover | boolean | ||
| optional | titleAlign | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | gap | 'right', 'top', 'bottom', 'left' |
- InputButton
| props | type | desc | ||
|---|---|---|---|---|
| required | text | string | ||
| required | onClick | () => void | ||
| optional | type | 'text', 'password', 'number' | ||
| optional | width | 'small', 'medium', 'large', 'full', 'modal' | ||
| optional | title | string | ||
| optional | titleWidth | 'small', 'medium', 'large' | ||
| optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' | ||
| optional | titleCover | boolean | ||
| optional | titleAlign | 'right', 'center', 'left' | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | disabled | boolean | ||
| optional | icon | 'add', 'remove', 'modify', 'search', 'delete', 'excel' | ||
| optional | gap | 'right', 'top', 'bottom', 'left' | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |
- InputUpload
| props | type | desc | ||
|---|---|---|---|---|
| required | onChange | (val: File) => void | ||
| required | value | File, null | ||
| optional | padding | string | ||
| optional | margin | string | ||
| optional | placeholder | string |
Table Components
- Table
| props | type | desc | ||
|---|---|---|---|---|
| required | children | node | ||
| optional | width | number | ||
| optional | gap | 'right', 'top', 'bottom', 'left' | ||
| optional | pagination | boolean | pagination | |
| optional | paginationAllData | Array＜T> | pagination | |
| optional | paginationSize | 5, 10 | pagination | |
| optional | paginationCurrentPageData | (val: any) => void | pagination |
- Thead
| props | type | desc | ||
|---|---|---|---|---|
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |
- TheadTr
| props | type | desc | ||
|---|---|---|---|---|
| - | - | - | - |
- Th
| props | type | desc | ||
|---|---|---|---|---|
| optional | width | string |
- Tbody
| props | type | desc | ||
|---|---|---|---|---|
| - | - | - | - |
- TbodyTr
| props | type | desc | ||
|---|---|---|---|---|
| optional | pointer | boolean | ||
| optional | onClick | () => void |
- Td
| props | type | desc | ||
|---|---|---|---|---|
| optional | width | string | ||
| optional | padding | number | ||
| optional | align | 'left', 'right' |
Chart Components
- Charts
| props | type | desc | ||
|---|---|---|---|---|
| required | labels | string[] | labels.length == datasets.length | |
| required | datasets | { name: string; data: number[] }[] | labels.length == datasets.length | |
| optional | title | string | ||
| optional | gap | 'right', 'top', 'bottom', 'left' |
List Components
- TransitionList
| props | type | desc | ||
|---|---|---|---|---|
| required | transitionAllData | Array＜T＞ | ||
| required | transitionCheckValueData | (val: string[]) => void | ||
| optional | gap | 'right', 'top', 'bottom', 'left' | ||
| optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |
Copyright 2023. JMSOFT All rights reserved.
1.2.6
2 years ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago