Tuval Framework

Installation

Tuval Framework is available as an npx package and you can create a development envoriment one command. Make sure docker is running before you start the installation.

npm:

npx create-tuval

You can also install TF libraries separately.

TF Core

TF Core is available as an npm package.

npm:

npm install @tuval/core

TF CG

TF Core Graphics is available as an npm package.

npm:

npm install @tuval/cg

TF Graphics

TF Graphics is available as an npm package.

npm:

npm install @tuval/graphics

TF Forms

TF Forms is available as an npm package.

npm:

npm install @tuval/forms

Getting started with Tuval Framework

Here is an example slice of a basic view in Tuval Framework. You can use playground for create your view.

// MARK : Main Frame of Form
    VStack({ alignment: cTop })(

        // MARK: Top Bar
        HStack({alignment:cLeading})(
            UIImage(logo).width(50).height(50),
            Text('Procetra').foregroundColor(Color.white).fontSize(20)
            .fontWeight('bold')
        ).background('rgb(208, 63, 64)').height(70),

        // MARK: Filter bar
        HStack().background('#212932').height(60),

        // MARK: Content
        HStack({ alignment: cLeading })(

            // Main Menu
            VStack({ alignment: cTop })(
                ...ForEach(menuModel)((item, index) =>
                    // MARK: Menu item
                    item.title == 'sep' ?
                        VStack().height(1).background(Color.white)
                        :
                        VStack({ spacing: 10 })(
                            Icon(item.icon).size(30),
                            Text(item.title)
                        ).height(70).foregroundColor({ default: Color.white, hover: Color.black })
                            .marginTop('10px')
                            .onClick(() => setSelectedIndex(index))
                            .background({ default: selectedIndex == index ?
                            Color.green : '', hover: '#eee' }).cursor('pointer')
                )

            ).background('#212932').width(80),

            // MARK: Sub menu
            VStack({ alignment: cTop })(
                ...ForEach(menuModel[selectedIndex].subMenu)((item, index) =>
                    // MARK: Menu item
                        VStack({ spacing: 10 })(
                            Icon(item.icon).size(30),
                            Text(item.title)
                        ).height(70).foregroundColor({ default: Color.white, hover: Color.black })
                            .marginTop('10px')
                            .onClick(() => setSelectedIndex(index))
                            .background({  hover: '#eee' }).cursor('pointer')
                )
            ).background('#52565b').width()
                .initial({ width: 0 }).animate({ width: 80 })
                .shadow('inset 24px 0 20px -20px #373b40')
                .visible(Array.isArray(menuModel[selectedIndex].subMenu)),

        )
    )

For starter app, you can visit developer repo.

Questions

For how-to questions that don't involve making changes to the code base, please use Stack Overflow instead of GitHub issues. Use the "tuvalframework" tag on Stack Overflow to make it easier for the community to find your question. You can send a mail to info@tuvalframework.com.