Props
| Prop |
About |
Default Value |
Format |
| Sound |
Key Sounds |
true |
Boolean |
| animation |
Boolean Value to Enable and Disable Default Animation |
true |
Boolean |
| size |
Size of Calculator |
"100" |
Any Size out of [ "50" , "75" , "90" , "95" , "100" , "105" , "110" , "125" , "150" ] |
| normalKeyColor |
Background Color of Normal Numeric Keys of Calculator |
rgba( 243 , 244 , 246 ) |
ColorName or rgb or rgba or Hex |
| operatorKeyColor |
Background Color of Operator Keys of Calculator |
rgba( 229 , 231 , 235 ) |
ColorName or rgb or rgba or Hex |
| Class |
Classes to add to the Calculator Component |
NA |
ClassName (String) |
| calculatorBackground |
Background Color of Calculator |
#ffffff |
ColorName or rgb or rgba or Hex |
| inputBackground |
Background Color of Screen of Calculator |
rgba( 229 , 231 , 235 ) |
ColorName or rgb or rgba or Hex |
Steps To Use thus Plugin:
1. Install
npm i svelte-calculator
2. Import
// in .js file where you want to use this component
import Calculator from "svelte-calculator";
4. Usage
// in the same.js file where you want to use this component outside <script></script> tag
<Calculator
size={"200"}
normalKeyColor="white"
operatorKeyColor="orange"
Class={"calculatorClass"}
animation={true}
calculatorBackground={"rgba(0,0,0,0.1)"}
inputBackground={"#DDE5B6"}
/>
+ Developed with ❤️ by Arshdeep Singh
