2.5.7 • Published 9 months ago

mobiotics-dynamic-components-vue v2.5.7

Weekly downloads
323
License
ISC
Repository
github
Last release
9 months ago

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 NameTypeDefaultDescription
1. mButtonPropertyObject{ 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. roundedBooleanfalseThe 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 NameTypeDefaultDescription
1. mTextareaPropertyObject{ bgColor: '#fff',Style properties
borderColor: '#A9A9A9',like color, background
textColor: '#A9A9A9',color etc. will be
fontSize: '12',passed using this prop
hoverBorderColor: '#409aff'
}
2. placeholderString''Value should be provided
if you need placeholder
3. textareaInputString''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 NameTypeDefaultDescription
1. mSelectPropertyObject{ 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. placeholderString''Value should be provided
if you need placeholder
3. itemListArray[ { name: 'Content1', id: 1 },Array Value should be provided
{ name: 'Content2', id: 2 }for populating the dropdown
]option values
4. selectedNumbernullDefault 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 NameTypeDefaultDescription
1. mInputPropertyObject{ 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. placeholderString''Value should be provided
if you need placeholder
3. textboxInputString''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 NameTypeDefaultDescription
1. mTogglePropertyObject{ bgChecked: '#0978fc',Style properties
toggleColor: '#fff',like color, background
bgUnchecked: '#ccc'color etc. will be
}passed using this prop
2. toggleCheckBoxBooleantrueValue should be provided
according to active or inactive
state, by default true i.e.active
3. leftLabelBoolean,falseValue provided will be
Stringdisplayed on left side of
Toggle
4. rightLabelBoolean,falseValue provided will be
Stringdisplayed 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 NameTypeDefaultDescription
1. mCheckPropertyObject{ bgChecked: '#E75540',Style properties
borderColor: '#7F8797',like color, background
bgUnchecked: '#fff'color etc. will be
}passed using this prop
2. valueCheckString,''Value should be provided
Booleanto bind the 'value' with
the input checkbox
3. checkedString,falseDefault Value should be
Boolean,provided to get the checked
Arrayor 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 NameTypeDefaultDescription
1. mAccordionPropertyObject{ bgColor: '#b7b7b7',Style properties
bgButtonColor: '#DFE1E6',like color, background
textColor: '#A9A9A9'color etc. will be
}passed using this prop
2. showContentBooleanfalseThis is to provide that
the accordion will be in
open or closed state
3. headingString'Heading'Heading of Accordion
4. infoTipString,falseIf tooltip required
Booleangive 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  
2.5.6

9 months ago

2.5.7

9 months ago

2.5.5

12 months ago

2.5.2

1 year ago

2.5.4

1 year ago

2.5.3

1 year ago

2.4.9

2 years ago

2.5.0

1 year ago

2.5.1

1 year ago

2.4.8

2 years ago

2.4.7

2 years ago

2.4.3

2 years ago

2.4.5

2 years ago

2.4.4

2 years ago

2.4.6

2 years ago

2.4.2

3 years ago

2.4.1

3 years ago

2.4.0

3 years ago

2.3.9

3 years ago

2.3.8

3 years ago

2.3.7

3 years ago

2.3.6

3 years ago

2.3.4

3 years ago

2.3.5

3 years ago

2.3.2

3 years ago

2.3.3

3 years ago

2.3.1

3 years ago

2.3.0

3 years ago

2.2.7

3 years ago

2.2.9

3 years ago

2.2.8

3 years ago

2.2.6

3 years ago

2.2.5

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.4

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.9

3 years ago

2.1.8

3 years ago

2.1.7

3 years ago

2.1.6

3 years ago

2.1.5

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

1.8.9

3 years ago

1.8.8

3 years ago

1.8.7

3 years ago

1.8.6

3 years ago

1.8.5

3 years ago

1.8.4

3 years ago

1.8.3

3 years ago

1.8.2

3 years ago

1.8.1

3 years ago

1.8.0

3 years ago

1.7.9

3 years ago

1.7.8

3 years ago

1.7.7

3 years ago

1.7.6

3 years ago

1.7.5

3 years ago

1.7.4

3 years ago

1.7.3

4 years ago

1.7.2

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.9

4 years ago

1.6.8

4 years ago

1.6.7

4 years ago

1.6.6

4 years ago

1.6.5

4 years ago

1.6.4

4 years ago

1.6.3

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.9

4 years ago

1.5.8

4 years ago

1.5.7

4 years ago

1.5.6

4 years ago

1.5.5

4 years ago

1.5.4

4 years ago

1.5.3

4 years ago

1.5.2

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.9

4 years ago

1.4.8

4 years ago

1.4.6

4 years ago

1.4.5

4 years ago

1.4.4

4 years ago

1.4.3

4 years ago

1.4.2

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.9

4 years ago

1.3.8

4 years ago

1.3.7

4 years ago

1.3.6

4 years ago

1.3.5

4 years ago

1.3.4

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.9

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.9

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago