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 |
-
npm i svelte-calculator
-
// in .js file where you want to use this component import Calculator from "svelte-calculator";
-
// 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"} />