mirror of https://github.com/PaddiM8/kalker.git synced 2024-12-13 18:10:42 +01:00

History

bakk 910b5a425f kalk_web: Avoid automatic scrolling during input on phones		2021-05-28 19:08:15 +02:00
..
public	kalk_web: Avoid automatic scrolling during input on phones	2021-05-28 19:08:15 +02:00
src	kalk_web: Avoid automatic scrolling during input on phones	2021-05-28 19:08:15 +02:00
.gitignore	Moved from Rollup to Webpack in kalk_web	2021-01-02 17:20:00 +01:00
package-lock.json	kalk_web: Updated kalk	2021-05-27 21:39:56 +02:00
package.json	kalk_web: Updated kalk	2021-05-27 21:39:56 +02:00
preview.png	Updated README files to include the new libraries and how to use kalk-component	2021-01-04 20:56:12 +01:00
README.md	kalk_web autofocus prop	2021-01-05 15:09:08 +01:00
tsconfig.json	Moved from Rollup to Webpack in kalk_web	2021-01-02 17:20:00 +01:00
webpack.config.ts	Made kalk_web shadow dom element again, and started to use a polyfill to make it work in other browsers	2021-01-06 01:48:43 +01:00

README.md

Kalk Web Component

A web component built with Svelte that uses kalk (WebAssembly).

Installation & Setup

npm install --save @paddim8/kalk-component

Module

import { KalkCalculator, ConsoleLine } from "@paddim8/kalk-component"

If your bundler doesn't include all the files in the output folder, you may need to eg. modify your build script to copy them over manually. I am not aware of a better way.

Or only with HTML

<script type="text/javascript" src="some/path/bundle.js"></script>

Usage

<div class="kalk"> <!-- Apply css rules for position/size/font/etc. to this -->
    <kalk-calculator>
        <console-line>kalk</console-line>
        <console-line>
            <span class="hint">Type 'help' for instructions.</span>
        </console-line>
</kalk-calculator>
</div>

Customizing

The colours in the component can be changed by using these attributes.

<kalk-calculator
    hinttext="Type something..." 
    autofocus="true"
    identifiercolor="cornflowerblue"
    operatorcolor="darkorange"
    promptcolor="mediumseagreen"
    errorcolor="tomato"
    hintcolor="#9c9c9c"
    linkcolor="cornflowerblue"
    backgroundcolor="#424242" />