#Emu Calculator Components

Table of Contents

• EmuButton
• EmuInput
• EmuSlider

##Components

EmuButton

#####Install

npm install EmuButton from emu-calculator-components --save

#####Register as Component

import Vue from 'vue'
import EmuButton from 'EmuButton'

export default {
  name: 'App',

  components: {
    EmuButton
  }
}

#####Example

<template>
  <emu-button textColor=#0015FF" backgroundColor="FF0004" >{{ buttonText }}</emu-button>
</template>

<script>
export default {
  components: {
    EmuButton,
  },
  data: () => ({
    buttonText: 'Test Button',
  }),
}
</script>

#####Properties There is a few props that can be set for different effects.
The colors will generally be set globally but are able to be set manually if needed.

• textColor: Color of button text (Optional)
• backgroundColor: Color of button background (Optional)

<emu-button textColor=#0015FF" backgroundColor="FF0004" >Test Button</emu-button>

EmuInput

#####Install

npm install EmuInput from emu-calculator-components --save

#####Register as Component

import Vue from 'vue'
import EmuInput from 'EmuInput'

export default {
  name: 'App',

  components: {
    EmuInput
  }
}

#####Example

<template>
  <emu-input :is-currency="true" v-model="testValue"></emu-input>
</template>

<script>
export default {
  components: {
    EmuInput,
  },
  data: () => ({
    testValue: 0,
  }),
}
</script>

#####Properties There is a few props that can be set for different effects.
The colors will generally be set globally but are able to be set manually if needed.

• is-currency: If true then only numbers will be available. false allows all types. (optional, default is false)
• backgroundColor: Color of input background (Optional)
• TextColor: Color of input text (Optional)
• BorderColor: Color of input border (Optional)
• placeholder: Input placeholder (Optional)

When is-currency is set to true the following options are avaliable:

| Props | Description | Required | Type | Default | |-------------- |---------------------------------------------------------- |---------- |--------- |------------------- | | currencyType | Currency prefix | false | String | $ | | separator | Thousands separator symbol. (accepts space, . or ,) | false | String | , | | precision | Number of decimals | false | Number | 0 | | minus | Enable negative values | false | Boolean | false | | max | Maximum number allowed | false | Number | 9007199254740991 | | min | Minimum number allowed | false | Number | -9007199254740991 |

<emu-input textColor=#0015FF" backgroundColor="FF0004" id-currency="true" max="1000" precision="2"></emu-imput>

EmuSlider

#####Install

npm install EmuSlider from emu-calculator-components --save

#####Register as Component

import Vue from 'vue'
import EmuSlider from 'EmuSlider'

export default {
  name: 'App',

  components: {
    EmuSlider
  }
}

#####Example

<template>
  <emu-slider v-model="testValue" process-color="red" thumb-color="blue"></emu-slider>
</template>

<script>
export default {
  components: {
    EmuSlider,
  },
  data: () => ({
    testValue: 0,
  }),
}
</script>

#####Properties There is a few props that can be set for different effects. The colors will generally be set globally but are able to be set manually if needed.

• thumbColor: Color of thumb (Optional)

• processColor: Color of process (left side of thumb) (Optional)

• sliderColor: Color of slider (Optional)

• min: Minimum value of range - Default of 0 (Optional)

• max: Maximum value of range - Default of 100 (Optional)

<emu-slider v-model="testValue" slider-color="green" min="-200" max="200"></emu-slider>