mobiotics-dynamic-components-vue v2.5.7
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
9 months ago
9 months ago
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago