Mobiotics-dynamic-components-vue-testing NPM

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

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

sumit-kumar vue js mobiotics Swamy Shireesha vLive Alvin Ajay

core-js jquery library-sumit-kumar-dey moment node-sass sass-loader simple-vue-validator v-calendar v-tooltip vue vue-router vue-simple-tooltip

3.0.2

5 months ago

3.0.1

5 months ago

3.0.0

5 months ago