Skip to content
An ECMAScript 6 library for building rich user interfaces.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
README.md
widget list.txt

README.md

Tamarack

An easy to use JavaScript library that can create, modify, and style HTML entirely through ECMAScript 6 classes, with no boilerplate HTML or CSS needed. It is designed to be used in Electron apps, but works well for browser apps as well.

Architecture

Most of Tamarack is a collection of widgets that provide a wrapper around html elements, such as tk.Button, which wraps around <button> or tk.Image, which wraps around <img>. All of these widgets inherit from tk.Widget, which provides them with basic functionality such as making the element full-screen or adding the widget to another widget. In addition, there are also composite widgets, such as tk.Notebook and tk.Dialog, that represent multiple html elements in one single class, cutting down the need for massive amounts of boilerplate code for simple tasks.

Examples

Add progress bars:

var view = new tk.View("Progress Demo", { padding: "1rem" });
view.add(new tk.Progress(10), new tk.Progress(25), new tk.Progress(50), new tk.Progress(100));

Progress Bars

Create a button that makes the video fullscreen when clicked:

var doc = new tkDocument();
var btnFullscreen = new tkButton("Go Fullscreen");
btnFullscreen.on("click", function() { 
   video.makeFullScreen();
});
doc.add(btnFullscreen);

Create a two page notebook:

var doc = new tkDocument();
var notebook = new tkNotebook();

var page1 = new tkNotebookPage("Page 1", "page1");
page1.content.addElement(say("Hello"));

var page2 = new tkNotebookPage("Page 2", "page2");
page2.content.addElement(say("World!"));

notebook.addPages(page1,page2);
doc.add(notebook);

Notebook

Show a yes/no dialog:

var doc = new tkDocument("Dialog Demo");
doc.padding = "1rem";

var dialogButton = new tkButton("Show Dialog");
doc.add(dialogButton);

dialogButton.on("click", function() {
	tkDialog.show("Welcome to tamarack! Do you like this demo?", "Some Dialog", [tkDialogResult.YES, tkDialogResult.NO], (dialogResult) => {
		if (dialogResult == tkDialogResult.YES)
			tkDialog.show("Thanks!");
		else
			tkDialog.show("Well then...");
	});
});

Dialog

Set the background from a color dialog:

var doc = new tkDocument();
var dlgColor = new tkColorDialog();

dlgColor.show((dialogResult) => {
    if (dialogResult == tkDialogResult.OK)
        doc.setBackgroundColor(dlgColor.color.getHslaString());
});

Color Dialog

You can’t perform that action at this time.