Mobiotics Dynamic Graph Vue
mobiotics-dynamic-components-vue
## Install (recommended)
npm i mobiotics-dynamic-components-vue
Setup in vue
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
import { MButton } from 'mobiotics-dynamic-components-vue';
import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';
| Props Name | Type | Default | Description |
|---|
-
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 | | | } | | | | -
rounded | Boolean | false | The button should have
| | | rounded corners or not (60px)
## Callback
on-btn-click
## Code Format
<MButton :mButtonProperty="mButtonProperty" :rounded="true/false" @on-btn-click="doSomething">
Start Button
</MButton>
MTextarea
import { MTextarea } from 'mobiotics-dynamic-components-vue';
import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';
| Props Name | Type | Default | Description |
|---|
-
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' | | | } | | | | -
placeholder | String | ‘’ | Value should be provided
| | | if you need placeholder | | | -
textareaInput | String | ‘’ | Value should be provided if
| | | you need some default value | | | in textarea | | |
Callback
on-change-input
Code Format
<MTextarea :mTextareaProperty=“mTextareaProperty” :placeholder=“‘Description’” @on-change-input=“textareaInput=$event” />
## 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 |
|---|
-
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', | | | } | | | | -
placeholder | String | ‘’ | Value should be provided
| | | if you need placeholder | | | -
itemList | Array | [ { name: ‘Content1’, id: 1 }, | Array Value should be provided
| | { name: 'Content2', id: 2 } | for populating the dropdown | | ] | option values | | | -
selected | Number | null | Default number value should be
| | | provided if some option needs to | | | be selected | | |
Callback
on-item-selected, on-item-reset
Code Format
<MDropdown @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 |
|---|
-
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' | | | } | | | | -
placeholder | String | ‘’ | Value should be provided
| | | if you need placeholder | | | -
textboxInput | String | ‘’ | Value should be provided if
| | | you need some default value | | | in textarea | | |
Callback
on-change-value
Code Format
<MTextbox :mInputProperty=“mInputProperty” :placeholder=“‘First Name’” @on-change-value=“textboxInput=$event” />
## 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 |
|---|
-
mToggleProperty | Object | { bgChecked: ‘#0978fc’, | Style properties
| | toggleColor: '#fff', | like color, background | | bgUnchecked: '#ccc' | color etc. will be | | } | passed using this prop | | | -
toggleCheckBox | Boolean | true | Value should be provided
| | | according to active or inactive | | | state, by default true i.e. | | | active | | | -
leftLabel | Boolean, | false | Value provided will be
| String | | displayed on left side of | | | Toggle | | | -
rightLabel | Boolean, | false | Value provided will be
| String | | displayed on right side of | | | Toggle | | |
Callback
changetoggle
Code Format
<MToggle @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 |
|---|
-
mCheckProperty | Object | { bgChecked: ‘#E75540’, | Style properties
| | borderColor: '#7F8797', | like color, background | | bgUnchecked: '#fff' | color etc. will be | | } | passed using this prop | | | -
valueCheck | String, | ‘’ | Value should be provided
| Boolean | | to bind the 'value' with | | | the input checkbox | | | -
checked | String, | false | Default Value should be
| Boolean, | | provided to get the checked | Array | | or unchecked state of checkbox | | |
Callback
checkClick
Code Format
<MCheckbox :mCheckProperty=“mCheckProperty” :valueCheck=“selectedValue” :checked=“selectedIds” @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 |
|---|
-
mAccordionProperty | Object | { bgColor: ‘#b7b7b7’, | Style properties
| | bgButtonColor: '#DFE1E6', | like color, background | | textColor: '#A9A9A9' | color etc. will be | | } | passed using this prop| | | | -
showContent | Boolean | false | This is to provide that
| | | the accordion will be in | | | open or closed state | | | -
heading | String | ‘Heading’ | Heading of Accordion
| | | | | | | | | -
infoTip | String, | false | If tooltip required
| Boolean | | give the title for the | | | tooltip | | |
Callback
change-state
Code Format
<MAccordion :heading=“‘Table’” :showContent=“showContent” @change-state=“showContent=$event”> // 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 |
|---|
-
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' | | | } | | | | -
placeholder | String | ‘’ | Value should be provided
| | | if you need placeholder | | | -
textboxInput | String | ‘’ | Value should be provided if
| | | you need some default value | | | in textarea | | |
Callback
on-change-value
Code Format
<MTextbox :mInputProperty=“mInputProperty” :placeholder=“‘First Name’” @on-change-value=“textboxInput=$event” />
## 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 |
|---|
-
mToggleProperty | Object | { bgChecked: ‘#0978fc’, | Style properties
| | toggleColor: '#fff', | like color, background | | bgUnchecked: '#ccc' | color etc. will be | | } | passed using this prop | | | -
toggleCheckBox | Boolean | true | Value should be provided
| | | according to active or inactive | | | state, by default true i.e. | | | active | | | -
leftLabel | Boolean, | false | Value provided will be
| String | | displayed on left side of | | | Toggle | | | -
rightLabel | Boolean, | false | Value provided will be
| String | | displayed on right side of | | | Toggle | | |
Callback
changetoggle
Code Format
<MToggle @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 |
|---|
-
mCheckProperty | Object | { bgChecked: ‘#E75540’, | Style properties
| | borderColor: '#7F8797', | like color, background | | bgUnchecked: '#fff' | color etc. will be | | } | passed using this prop | | | -
valueCheck | String, | ‘’ | Value should be provided
| Boolean | | to bind the 'value' with | | | the input checkbox | | | -
checked | String, | false | Default Value should be
| Boolean, | | provided to get the checked | Array | | or unchecked state of checkbox | | |
Callback
checkClick
Code Format
<MCheckbox :mCheckProperty=“mCheckProperty” :valueCheck=“selectedValue” :checked=“selectedIds” @checkClick=“getCheckValue($event)” />
## MAccordion
```bash
import { MAccordion } from 'mobiotics-dynamic-components-vue';
import 'mobiotics-dynamic-components-vue/dist/mobiotics_dynamic_components_vue.css';
Customize configuration
See Configuration Reference Props Name | Type | Default | Description --------------------- | --------- | ------------------------------- | -----------------------
-
mAccordionProperty | Object | { bgColor: ‘#b7b7b7’, | Style properties
| | bgButtonColor: '#DFE1E6', | like color, background | | textColor: '#A9A9A9' | color etc. will be | | } | passed using this prop| | | | -
showContent | Boolean | false | This is to provide that
| | | the accordion will be in | | | open or closed state | | | -
heading | String | ‘Heading’ | Heading of Accordion
| | | | | | | | | -
infoTip | String, | false | If tooltip required
| Boolean | | give the title for the | | | tooltip | | |
Callback
change-state
Code Format
<MAccordion :heading=“‘Table’” :showContent=“showContent” @change-state=“showContent=$event”> // 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
Download Details:
Author: sumitkumardey91
Source Code: https://github.com/sumitkumardey91/vue-sumit
#vue #vuejs #javascript
