qiktonjwyoaclofrtcwa v1.0.0

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

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