Mobiotics Dynamic Graph Vue

Mobiotics Dynamic Graph Vue

mobiotics-dynamic-components-vue .Mobiotics dynamic graph vue

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

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

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

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

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

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


## ADMIN 

```bash 
Sumit, Shivani, Srikanth
email: [email protected]
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';
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

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

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

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


## ADMIN 

```bash 
Sumit, Shivani, Srikanth
email: [email protected]
mobile: 9742943216
skype: live:computer.sumit91_1  

68bf856f01e2a3258517337db70346a01248cfd6

Download Details:

Author: sumitkumardey91

Source Code: https://github.com/sumitkumardey91/vue-sumit

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.