DESKERA-UI-LIBRARY
deskera-ui-library is a set of React components, so understanding how React fits into web development is important.
Installing
Install the package in your project directory with:
// with npm
npm install deskera-ui-library
// with yarn
yarn add deskera-ui-library
List of components
showAlert
Alert box
Props
| Property | Type | Required | Value |
|---|
| title | String | true | empty |
| message | String | | |
| className | String | | |
Event
| Event | Arguments | Description |
|---|
| onClick | | Emitted when clicked on button |
Example
import { showAlert } from "deskera-ui-library";
showAlert("Updated successfully")
DKButton
Use button
Props
| Property | Type | Required | Value |
|---|
| title | String | true | empty |
| icon | String | | |
| className | String | | |
| style | String |
| isReverse | Boolean | |
Event
| Event | Arguments | Description |
|---|
| onClick | | Emitted when clicked on button |
Example
import { DKButton } from "deskera-ui-library";
//simple button
<DKButton title="Try Now" className="text-white"/>
//button with icon
<DKButton title="Try Now" className="text-white" icon={`image_path`} />
DKCheckMark
Use Checkbox
Props
| Property | Type | Required | Value |
|---|
| title | String | true | empty |
| color | String | | |
| className | String | | |
| isSelected | Boolean | |
Event
| Event | Arguments | Description |
|---|
| onClick | | Emitted when clicked on check/uncheck |
Example
import { DKCheckMark } from "deskera-ui-library";
<DKCheckMark title="Try Now" isSelected = {`true`} className="text-black"/>
DKContactIcon
Contact Icon
Props
| Property | Type | Required | Value |
|---|
| title | String | true | empty |
| className | String | | |
Example
import { DKContactIcon } from "deskera-ui-library";
<DKContactIcon title="Contact" />
DKHeader
Header Text
Props
| Property | Type | Required | Value |
|---|
| text | String | true | |
| className | String | | |
Example
import { DKHeader } from "deskera-ui-library";
<DKHeader text="Heading title" />
DKIcon
Icon
Props
| Property | Type | Required | Value |
|---|
| src | String | true | |
| className | String |
| style | String |
Event
| Event | Arguments | Description |
|---|
| onClick | | Emitted when clicked on check/uncheck |
Example
import { DKIcon } from "deskera-ui-library";
<DKIcon src={`icon_path`} />
DKLabel
Label
Props
| Property | Type | Required | Value |
|---|
| text | String | true | |
| className | String |
| style | String |
Example
import { DKLabel } from "deskera-ui-library";
<DKLabel text="Enter your phone no" />
DKLine
Line
Props
| Property | Type | Required | Value |
|---|
| className | String |
| style | String |
Example
import { DKLine } from "deskera-ui-library";
<DKLine className="mt-m"/>
DKListPicker
List picker
Props
| Property | Type | Required | Value |
|---|
| title | String | true | - |
| className | String |
| style | String |
| data | Object |
| buttonTitle | String |
| needIcon | String |
Event
| Event | Arguments | Description |
|---|
| onSelect | | Emitted when select an option |
| onClose | | Emitted when click on close button |
| buttonOnClick | | Emitted when click on button |
Example
import { DKListPicker } from "deskera-ui-library";
<DKListPicker title="List Title" data={["Option1", "Option2", "Option3"]} onSelect={(index, value)=>{}} />;
DKSectionHeader
Section of header
Props
| Property | Type | Required | Value |
|---|
| text | String | true | |
| className | String |
| style | String |
Example
import { DKSectionHeader } from "deskera-ui-library";
<DKSectionHeader text="Header Title" />
DKSpaceH
Space Horizontal
Props
| Property | Type | Required | Value |
|---|
| value | Integer | true | 10 |
Example
import { DKSpaceH } from "deskera-ui-library";
<DKSpaceH value="10" />
DKSpaceV
Space Horizontal
Props
| Property | Type | Required | Value |
|---|
| value | Integer | true | 10 |
Example
import { DKSpaceV } from "deskera-ui-library";
<DKSpaceV value="10" />
DKSpinner
Spinner
Props
| Property | Type | Required | Value |
|---|
| title | String | - | - |
| className | String | - | - |
Example
import { DKSpinner } from "deskera-ui-library";
//only spinner
<DKSpinner />
//spinner with title
<DKSpinner title="Loading" />
DKStatus
Status
Props
| Property | Type | Required | Value |
|---|
| title | String | true | - |
| className | String | - | - |
| color | String | - | - |
Example
import { DKStatus } from "deskera-ui-library";
<DKStatus title="Pending" color="bg-red"/>
DKSubLabel
Sub label
Props
| Property | Type | Required | Value |
|---|
| text | String | true | - |
| className | String | - | - |
Example
import { DKSubLabel } from "deskera-ui-library";
<DKSubLabel text="List of items"/>
DKTable
Table
Props
Event
| Event | Arguments | Description |
|---|
| onRowClick | | Emitted when click on row |
| onAction | | Emitted when click on action |
| onColumnShift | | Emitted when column change |
| onSort | | Emitted when click on sort |
Example
import { DKTable } from "deskera-ui-library";
<DKTable header="[{ title: "Name", width: 14.2, ... }]" values="["James",...]"/>
DKTextarea
Text area
Props
| Property | Type | Required | Value |
|---|
| placeHolder | String | - | - |
| value | any | - | - |
| className | String | - | - |
| isEditable | Boolean | - | - |
| isUpperCase | Boolean | - | - |
| type | Text/Number/Static/Password | - | - |
Event
| Event | Arguments | Description |
|---|
| onChange | | Emitted when text change |
| onClick | | Emitted when click on |
Example
import { DKTextarea } from "deskera-ui-library";
<DKTextarea type="Text" placeHolder="Message" value="" onChange={(value) => {}}/>
DKTextField
Text Field
Props
| Property | Type | Required | Value |
|---|
| placeHolder | String | - | - |
| value | any | - | - |
| className | String | - | - |
| isEditable | Boolean | - | - |
| isUpperCase | Boolean | - | - |
| type | Text/Number/Static/Password | - | - |
Event
| Event | Arguments | Description |
|---|
| onChange | | Emitted when text change |
| onClick | | Emitted when click on |
Example
import { DKTextField } from "deskera-ui-library";
<DKTextField type="Text" placeHolder="Message" value="" onChange={(value) => {}}/>
Input
Input Field
Props
| Property | Type | Required | Value |
|---|
| needHeader | Boolean | - | - |
| name | String | - | - |
| placeholder | String | - | - |
| value | String | - | - |
| className | String | - | - |
| required | Boolean | - | - |
| disabled | Boolean | - | - |
| invalid | Boolean | - | - |
| pattern | String | - | - |
| style | String | - | - |
| type | Text/Number/Static/Password | - | - |
Event
| Event | Arguments | Description |
|---|
| onChange | | Emitted when text change |
Example
import { Input } from "deskera-ui-library";
<Input name="fullName" value="" onChange={(value) => {}}/>
Toggle
Toggle
Props
| Property | Type | Required | Value |
|---|
| isOn | Boolean | - | - |
| className | String | - | - |
Event
| Event | Arguments | Description |
|---|
| onChange | | Emitted when click on button |
Example
import { Toggle } from "deskera-ui-library";
<Toggle isOn={`true`}/>
DKDataGrid
Data Grid
Props
| Property | Type | Required | Value |
|---|
| columns | {key, name, type, width, options} | - | - |
| rows | {key: value} | - | - |
| title | String | - | - |
Event
| Event | Arguments | Description |
|---|
| onRowUpdate | rowIndex, rowData, columnKey | Emitted when change of row |
| onColumnUpdate | columnIndex, columnData | Emitted when change of coloumn |
| onRowAdd | rowData | Emitted when change of add row |
| onColumnAdd | columnData | Emitted when change of add column |
| onColumnDelete | columnIndex, columnData | Emitted when column delete |
| onColumnShift | newIndex, oldIndex | Emitted when column shift |
| onFilter | query: {} | Emitted when on search |
Example
import { DKDataGrid } from "deskera-ui-library";
<DKDataGrid columns=[{ key: "name", name: "Name", type: "Text", width: 10.2}, ....] rows=[{name: "Zahir Rout"},...]/>
DKCalendar
Calendar
Props
| Property | Type | Required | Value |
|---|
| selectedDate | Date | - | - |
| month | number | - | - |
| year | number | - | - |
| selectedDate | String[] | - | - |
| isDateRange | Boolean | - | - |
| selectedStartDate | Date | - | - |
| selectedEndDate | Date | - | - |
Event
| Event | Arguments | Description |
|---|
| onSelectDateRange | | Emitted when data range |
Example
import { DKCalendar } from "deskera-ui-library";
<DKCalendar selectedDate={value} onSelectDate={(date) => {}} />
showLoader
Show loader
Props
| Property | Type | Required | Value |
|---|
| title | String | - | - |
Example
import { showLoader } from "deskera-ui-library";
showLoader("Loading...")
removeLoader
Remove loader
Example
import { removeLoader } from "deskera-ui-library";
removeLoader()
showToast
Show toast
Props
| Property | Type | Required | Value |
|---|
| message | String | - | - |
| type | default,success,failure,warning | - | - |
| direction | top,bottom | - | - |
Example
import { showToast } from "deskera-ui-library";
showToast("Please enter valid email", "failure", "top")
DataEntryPopup
Data Entry Popup
Props
| Property | Type | Required | Value |
|---|
| formElements | Array | - | - |
Event
| Event | Arguments | Description |
|---|
| onCancel | | Emitted when click on cancel button |
| onSubmit | | Emitted when click on submit button |
Example
import { DataEntryPopup } from "deskera-ui-library";
<DataEntryPopup formElements=[{name: "Email", floatLabel: false, required: true, type: 'email', value: "", requestKey: "email"}, ...], />
DKSelectBox
Select Box
Props
| Property | Type | Required | Value |
|---|
| name | String | true | - |
| value | any | - | - |
| options | any | - | - |
| description | String | - | - |
| className | String | - | - |
| invalid | Boolean | - | - |
| required | Boolean | - | - |
Event
| Event | Arguments | Description |
|---|
| onSelect | | Emitted when it selected |
Example
import { DKSelectBox } from "deskera-ui-library";
<DKSelectBox name="Please select" options=["val1", "val2", ...] value=""/>
FormPopup
Form Popup
Props
| Property | Type | Required | Value |
|---|
| formElements | Object | true | - |
Event
| Event | Arguments | Description |
|---|
| onCancel | | Emitted when click on cancel button |
| onSubmit | | Emitted when click on submit button |
Example
import { FormPopup } from "deskera-ui-library";
<FormPopup formElements=[{name: "Email", floatLabel: false, required: true, type: 'email', value: "", requestKey: "email"}, ...]/>
Border
// Border
.border-none
.border-s
.border-m
.border-red
.border-green
.border-orange
.border-blue
// Border Radius
.border-radius-s
.border-radius-m
.border-radius-r
.border-radius-l
.border-radius-xxl
.border-radius-none
Colors
// Background color
.bg-menu
.bg-dark-gray
.bg-gray
.bg-gray1
.bg-gray2
.bg-gray3
.bg-gray4
.bg-gray5
.bg-line
.bg-line-2
.bg-red
.bg-yellow
.bg-green
.bg-white
.bg-blue
.bg-orange
.bg-transparent
.bg-whats-app
.bg-telegram
.bg-india-shield
.bg-deskera
.bg-erp
.bg-crm
.bg-people
.bg-aio
.bg-deskera-secondary
.bg-erp-secondary
.bg-crm-secondary
.bg-people-secondary
.bg-aio-secondary
.bg-chip-gray
.bg-chip-green
.bg-chip-blue
.bg-chip-red
.bg-chip-orange
// Text color
.text-gray
.text-dark-gray
.text-white
.text-royalblue
.text-green
.text-orange
.text-blue
.text-red
.text-cut
.text-line-through
Common
.main-holder
.app-font-family
.transparent-background
.transparent-background-light
.popup-window
// Position
.position-absolute
.position-relative
// Display
.border-box
.display-block
.display-none
.circle
// Responsive
.display-only-web
.display-only-mobile
.scroll-y-only-web
.listPickerBG
.listPickerBG:hover
::-webkit-scrollbar
.hide-scroll-bar
// Responsive MR, ML
.pr-r-only-web
.ml-l-only-web
.main-holder-p-horizontal
.main-holder-p-vertical
.blur
.unselectable
Cursor
.cursor-hand
.cursor-move
.cursor-col-resize
DataGrid
.data-grid-right-border
.data-grid-bottom-border
.data-grid-top-border
.data-grid-header
.data-grid-header:hover
.data-grid-selected-bg
.data-grid-badge-color-1
.data-grid-badge-color-2
.data-grid-badge-color-3
.data-grid-badge-color-4
.data-grid-badge-color-5
.data-grid-badge-color-6
.data-grid-badge-color-7
.data-grid-badge-color-8
.data-grid-badge-color-9
.data-grid-badge-color-10
.data-grid-filter-arrow
Flex
.row
.row-reverse
.column
.row-responsive
.flex-wrap
.flex-1
.justify-content-around
.justify-content-center
.justify-content-start
.justify-content-end
.justify-content-between
.align-items-center
.align-items-baseline
.align-items-start
.align-items-end
.align-items-stretch
.align-self-center
.align-self-start
.align-self-end
.justify-self-center
.justify-self-start
.justify-self-end
Font
.fs-r
.fs-xs
.fs-s
.fs-m
.fs-l
.fs-xl
.fs-xl-2
.fs-xxl
.fs-xxxl
// Font weight
.fw-l
.fw-r
.fw-m
.fw-b
.fw-h
// Text alignment
.text-wrap-none
.text-wrap
.text-trailing
.text-align-left
.text-align-center
.text-align-right
.text-align-justify
Icon
.ic-r
.ic-xs
.ic-xs-2
.ic-s
.ic-s-2
.ic-m
.ic-r-2
.ic-r-3
.ic-l
.ic-xl
.ic-contact-r
Zindex
.z-index-1
.z-index-2
.z-index-3
.z-index-4
.z-index-5
.z-index-6
Text Field
.textField
.textField:focus
.textField-warning
.textField-invalid
.TextFieldFilter
.TextFieldFilterError
.textarea-resize
.textarea-resize
Sizes
.screen-width
.screen-height
.parent-width
.parent-height
.parent-size
.width-auto
.width-80
.width-90
Shadow
.shadow-s
.shadow-m
.shadow-l
.shadow-red-m
Padding
// Padding - r
.p-r
.p-h-r
.p-v-r
.pl-r
.pr-r
.pt-r
.pb-r
// Padding - xs
.p-xs
.p-h-xs
.p-v-xs
.pl-xs
.pr-xs
.pt-xs
.pb-xs
// Padding - s
.p-s
.p-h-s
.p-v-s
.pl-s
.pr-s
.pt-s
.pb-s
// Padding - m
.p-m
.p-h-m
.p-v-m
.pl-m
.pr-m
.pt-m
.pb-m
// Padding - l
.p-l
.p-h-l
.p-v-l
.pl-l
.pr-l
.pt-l
.pb-l
// Padding - xl
.p-xl
.p-h-xl
.p-v-xl
.pl-xl
.pr-xl
.pt-xl
.pb-xl
// Padding - xxl
.p-xxl
.p-h-xxl
.p-v-xxl
.pl-xxl
.pr-xxl
.pt-xxl
.pb-xxl
Margin
// Margin - r
.m-r
.m-h-r
.m-v-r
.ml-r
.mr-r
.mt-r
.mb-r
// Margin - xs
.m-xs
.m-h-xs
.m-v-xs
.ml-xs
.mr-xs
.mt-xs
.mb-xs
// Margin - s
.m-s
.m-h-s
.m-v-s
.ml-s
.mr-s
.mt-s
.mb-s
// Margin - m
.m-m
.m-h-m
.m-v-m
.ml-m
.mr-m
.mt-m
.mb-m
//Margin - l
.m-l
.m-h-l
.m-v-l
.ml-l
.mr-l
.mt-l
.mb-l
// Margin - xl
.m-xl
.m-h-xl
.m-v-xl
.ml-xl
.mr-xl
.mt-xl
.mb-xl
// Margin - xxl
.m-xxl
.m-h-xxl
.m-v-xxl
.ml-xxl
.mr-xxl
.mt-xxl
.mb-xxl