1.2.6 • Published 10 months 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
10 months ago
1.2.5
10 months ago
1.2.4
11 months ago
1.2.3
11 months ago
1.2.2
11 months ago
1.2.1
11 months ago
1.2.0
12 months ago
1.1.9
12 months ago
1.1.8
12 months ago
1.1.7
12 months ago
1.1.6
12 months ago
1.1.5
12 months ago
1.1.4
12 months ago
1.1.3
12 months ago
1.1.2
12 months ago
1.1.1
12 months ago
1.1.0
12 months ago
1.0.9
12 months ago
1.0.8
12 months ago
1.0.7
12 months ago
1.0.6
12 months ago
1.0.5
12 months ago
1.0.4
12 months ago
1.0.3
12 months ago
1.0.2
12 months ago
1.0.1
12 months ago
1.0.0
12 months ago