In this tutorial, we'll learn procs and syntax sugar provided by Karkas and build a layout with them. We'll start with basic rectangles, then play around with vertical and horizontal stacks, and build a form by composing those stacks. Finally, we'll create a layout that can show different content while preserving the basic page structure.
See the complete code of the tutorial app in the Karkas repo: https://github.com/moigagoo/karkas/tree/develop/tutorial.
You'll need to install Sauer package to set up and compile the tutorial app:
$ nimble install -y sauer
Create a new Karax project:
$ mkdir tutorial $ cd tutorial $ nimble init # create a "binary" package ... $ sauer init
src/tutorial/pages/index.nimin your favorite editor. It should look like this:
import karax/[karaxdsl, kdom, vdom] import kraut/context import ../pages import ../state proc render*(context: Context): VNode = currentPage = Page.index document.title = "index" buildHtml(tdiv): h1: text "index"
Build the app:
$ sauer make
Run a local web server and open the app in your browser:
$ sauer serve --browse