mobiotics-dynamic-components-vue

2,794
vue js sumit-kumar mobiotics visweswara shireesha vlive alvin ajay
Install
npm install mobiotics-dynamic-components-vue
Latest Version:2.5.10
Vue:2
License:ISC
Last Updated:Oct 13, 2025
Links: npm
Maintainer: sumitkumardey91

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

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

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

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

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

## 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';
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, Alvin Ajay
email: sumit.kumar@mobiotics.com
mobile: 9742943216
skype: live:computer.sumit91_1

Related Packages

fy-form-render3

测试环境版本新的更新

10,811
js vue
use-on-demand

按需使用的代码工具仓库。

5,487
js use-on-demand
metaflow-js

EntityFramework for Metaflow

2,894 0
js utils
wuk-common-vite
2,456
js vue
paul-utils-js

这是一个js工具代码库

2,296
js vue

Version History

Version Released Vue License
2.5.10 ^2.6.11 ISC
2.5.9 ^2.6.11 ISC
2.5.8 ^2.6.11 ISC
2.5.7 ^2.6.11 ISC
2.5.6 ^2.6.11 ISC