mobiotics-dynamic-components-vue

``bash


Install (recommended)

npm i mobiotics-dynamic-components-vue

`


Setup in vue

`bash
import { MButton, MCheckbox, MToggle, MSearchPopup, MFilterPopup, MDateRangeFilterPopup, MDropdown, MTextbox, MTextarea, MAccordion, Mlabel, MPagination, MToolTip, MFooter, MChip, MPageHeader } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

MButton

`bash
import { MButton } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
------------------ | --------- | ---------------------------- | -----------------------
1. mButtonProperty | Object | { textColor: '#fff', | Style properties
| | bgColor: '#0978fc', | like color, height,
| | btnWidth: '133', | width etc. will be
| | btnHeight: '26', | passed using this prop
| | borderColor: '#0978fc', |
| | hoverColor: '#fff', |
| | hoverTxtColor: '#0978fc', |
| | fntSize: '12', |
| | fontWeight: 700 |
| | } |
| | |
2. rounded | Boolean | false | The button should have
| | | rounded corners or not (60px)

`bash


Callback

on-btn-click

Code Format

Start Button

`

MTextarea

`bash
import { MTextarea } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mTextareaProperty | Object | { bgColor: '#fff', | Style properties
| | borderColor: '#A9A9A9', | like color, background
| | textColor: '#A9A9A9', | color etc. will be
| | fontSize: '12', | passed using this prop
| | hoverBorderColor: '#409aff' |
| | } |
| | |
2. placeholder | String | '' | Value should be provided
| | | if you need placeholder
| | |
3. textareaInput | String | '' | Value should be provided if
| | | you need some default value
| | | in textarea
| | |
`bash

Callback

on-change-input

Code Format

`

MDropdown

`bash
import { MDropdown } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mSelectProperty | Object | { bgColor: '#fff', | Style properties
| | borderColor: '#D4DAE4', | like color, background
| | textColor:'#576175', | color etc. will be
| | fontSize: '12', | passed using this prop
| | unselectedBgColor: '#fff', |
| | height: '25', |
| | width: '149', |
| | borderRadius: '6', |
| | selectBgColor: '#0978FC', |
| | } |
| | |
2. placeholder | String | '' | Value should be provided
| | | if you need placeholder
| | |
3. itemList | Array | [ { name: 'Content1', id: 1 }, | Array Value should be provided
| | { name: 'Content2', id: 2 } | for populating the dropdown
| | ] | option values
| | |
4. selected | Number | null | Default number value should be
| | | provided if some option needs to
| | | be selected
| | |
`bash

Callback

on-item-selected, on-item-reset

Code Format

@on-item-selected="dropdownSelection = $event"
@on-item-reset="dropdownSelection = $event"
:itemList="itemList"
:placeholder="placeholderDropdown"
:mSelectProperty="mSelectProperty" />

`

MTextbox

`bash
import { MTextbox } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mInputProperty | Object | { bgColor: '#fff', | Style properties
| | borderColor: '#A9A9A9', | like color, background
| | textColor: '#A9A9A9', | color etc. will be
| | fontSize: '12', | passed using this prop
| | hoverBorderColor: '#409aff', |
| | width: '200', |
| | height: '20' |
| | } |
| | |
2. placeholder | String | '' | Value should be provided
| | | if you need placeholder
| | |
3. textboxInput | String | '' | Value should be provided if
| | | you need some default value
| | | in textarea
| | |
`bash

Callback

on-change-value

Code Format

`

MToggle

`bash
import { MToggle } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mToggleProperty | Object | { bgChecked: '#0978fc', | Style properties
| | toggleColor: '#fff', | like color, background
| | bgUnchecked: '#ccc' | color etc. will be
| | } | passed using this prop
| | |
2. toggleCheckBox | Boolean | true | Value should be provided
| | | according to active or inactive
| | | state, by default true i.e. | | | active
| | |
3. leftLabel | Boolean, | false | Value provided will be
| String | | displayed on left side of
| | | Toggle
| | |
4. rightLabel | Boolean, | false | Value provided will be
| String | | displayed on right side of
| | | Toggle
| | |
`bash

Callback

changetoggle

Code Format

@changetoggle="changetoggle()"
:ToggleCheckBox="getStatusChecked()"
:leftLabel="getStatusLabel()" />

`

MCheckbox

`bash
import { MCheckbox } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mCheckProperty | Object | { bgChecked: '#E75540', | Style properties
| | borderColor: '#7F8797', | like color, background
| | bgUnchecked: '#fff' | color etc. will be
| | } | passed using this prop
| | |
2. valueCheck | String, | '' | Value should be provided
| Boolean | | to bind the 'value' with
| | | the input checkbox
| | |
3. checked | String, | false | Default Value should be
| Boolean, | | provided to get the checked
| Array | | or unchecked state of checkbox
| | |
`bash

Callback

checkClick

Code Format

@checkClick="getCheckValue($event)" />

`

MAccordion

`bash
import { MAccordion } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mAccordionProperty | Object | { bgColor: '#b7b7b7', | Style properties
| | bgButtonColor: '#DFE1E6', | like color, background
| | textColor: '#A9A9A9' | color etc. will be
| | } | passed using this prop|
| | |
2. showContent | Boolean | false | This is to provide that
| | | the accordion will be in
| | | open or closed state
| | |
3. heading | String | 'Heading' | Heading of Accordion
| | |
| | |
| | |
4. infoTip | String, | false | If tooltip required
| Boolean | | give the title for the
| | | tooltip
| | |
`bash

Callback

change-state

Code Format

// Give the data that you want to dispaly in accordion

`

ADMIN

`bash
Sumit, Shivani, Srikanth
email: sumit.kumar@mobiotics.com
mobile: 9742943216
skype: live:computer.sumit91_1

`

`

MTextbox

`bash
import { MTextbox } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mInputProperty | Object | { bgColor: '#fff', | Style properties
| | borderColor: '#A9A9A9', | like color, background
| | textColor: '#A9A9A9', | color etc. will be
| | fontSize: '12', | passed using this prop
| | hoverBorderColor: '#409aff', |
| | width: '200', |
| | height: '20' |
| | } |
| | |
2. placeholder | String | '' | Value should be provided
| | | if you need placeholder
| | |
3. textboxInput | String | '' | Value should be provided if
| | | you need some default value
| | | in textarea
| | |
`bash

Callback

on-change-value

Code Format

`

MToggle

`bash
import { MToggle } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mToggleProperty | Object | { bgChecked: '#0978fc', | Style properties
| | toggleColor: '#fff', | like color, background
| | bgUnchecked: '#ccc' | color etc. will be
| | } | passed using this prop
| | |
2. toggleCheckBox | Boolean | true | Value should be provided
| | | according to active or inactive
| | | state, by default true i.e. | | | active
| | |
3. leftLabel | Boolean, | false | Value provided will be
| String | | displayed on left side of
| | | Toggle
| | |
4. rightLabel | Boolean, | false | Value provided will be
| String | | displayed on right side of
| | | Toggle
| | |
`bash

Callback

changetoggle

Code Format

@changetoggle="changetoggle()"
:ToggleCheckBox="getStatusChecked()"
:leftLabel="getStatusLabel()" />

`

MCheckbox

`bash
import { MCheckbox } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`

Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mCheckProperty | Object | { bgChecked: '#E75540', | Style properties
| | borderColor: '#7F8797', | like color, background
| | bgUnchecked: '#fff' | color etc. will be
| | } | passed using this prop
| | |
2. valueCheck | String, | '' | Value should be provided
| Boolean | | to bind the 'value' with
| | | the input checkbox
| | |
3. checked | String, | false | Default Value should be
| Boolean, | | provided to get the checked
| Array | | or unchecked state of checkbox
| | |
`bash

Callback

checkClick

Code Format

@checkClick="getCheckValue($event)" />

`

MAccordion

`bash
import { MAccordion } from 'mobiotics-dynamic-components-vue';

import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';

`




$3


See Configuration Reference
Props Name | Type | Default | Description
--------------------- | --------- | ------------------------------- | -----------------------
1. mAccordionProperty | Object | { bgColor: '#b7b7b7', | Style properties
| | bgButtonColor: '#DFE1E6', | like color, background
| | textColor: '#A9A9A9' | color etc. will be
| | } | passed using this prop|
| | |
2. showContent | Boolean | false | This is to provide that
| | | the accordion will be in
| | | open or closed state
| | |
3. heading | String | 'Heading' | Heading of Accordion
| | |
| | |
| | |
4. infoTip | String, | false | If tooltip required
| Boolean | | give the title for the
| | | tooltip
| | |
`bash

Callback

change-state

Code Format

// Give the data that you want to dispaly in accordion

`

ADMIN

`bash
Sumit, Shivani, Srikanth
email: sumit.kumar@mobiotics.com
mobile: 9742943216
skype: live:computer.sumit91_1

``

>>>>>>> 68bf856f01e2a3258517337db70346a01248cfd6