mobiotics-dynamic-graph-vue v1.6.6

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';

## 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';

## Callback
on-change-input

## Code Format
<MTextarea :mTextareaProperty="mTextareaProperty" :placeholder="'Description'" @on-change-input="textareaInput=$event" />

MDropdown

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

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

## 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

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

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

## Callback
on-change-value

## Code Format
<MTextbox  :mInputProperty="mInputProperty" :placeholder="'First Name'" @on-change-value="textboxInput=$event" />

MToggle

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

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

## Callback
changetoggle

## Code Format
<MToggle 
  @changetoggle="changetoggle()" 
  :ToggleCheckBox="getStatusChecked()" 
  :leftLabel="getStatusLabel()" />

MCheckbox

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

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

## Callback
checkClick

## Code Format
<MCheckbox  :mCheckProperty="mCheckProperty" :valueCheck="selectedValue" :checked="selectedIds"
@checkClick="getCheckValue($event)" />

MAccordion

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

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

## Callback
change-state

## Code Format
<MAccordion :heading="'Table'" :showContent="showContent" @change-state="showContent=$event">
// Give the data that you want to dispaly in accordion
</MAccordion>

ADMIN

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';

## Callback
on-change-value

## Code Format
<MTextbox  :mInputProperty="mInputProperty" :placeholder="'First Name'" @on-change-value="textboxInput=$event" />

MToggle

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

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

## Callback
changetoggle

## Code Format
<MToggle 
  @changetoggle="changetoggle()" 
  :ToggleCheckBox="getStatusChecked()" 
  :leftLabel="getStatusLabel()" />

MCheckbox

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

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

## Callback
checkClick

## Code Format
<MCheckbox  :mCheckProperty="mCheckProperty" :valueCheck="selectedValue" :checked="selectedIds"
@checkClick="getCheckValue($event)" />

MAccordion

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 --------------------- | --------- | ------------------------------- | ----------------------- 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 | | |

## Callback
change-state

## Code Format
<MAccordion :heading="'Table'" :showContent="showContent" @change-state="showContent=$event">
// Give the data that you want to dispaly in accordion
</MAccordion>

ADMIN

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

68bf856f01e2a3258517337db70346a01248cfd6