Skip to content

A simple and easy to use reactive UI library for Roblox. [Open Source]

License

Notifications You must be signed in to change notification settings

creepersaur/Quark

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Quark

A simple and easy to use reactive UI library for Roblox.

It's great for making UI quickly and easily. Still in development, bugs may occur. Especially useful in Stories/Storybooks, with UI Labs. Feel free to make a Github Issue on it for bugs/improvements.

Installation

You can get Quark from the Roblox Creator Store. It's adviced to put the Quark module in ReplicatedStorage.

If you want the latest code update, just clone this repository. If you cloned this repo, you can use Rojo (or another linker) to build the place file (or use it without building).

If you want a more "stable" release, download the Quark.rbxm file from the Releases. (Releases are more stable.)

Documentation

Check out the Docs for more info. It also serves as a tutorial for beginners.

  1. Getting Started
  2. Reactivity
  3. Animations
  4. StyleSheets
  5. Stories

Examples

Examples for stories are given in the examples folder. For smaller examples and info, check Documentation above.

New:

local New = Quark.New

New "Frame" {
	-- Set properties
    Parent = script.parent,
    Size = UDim2.fromOffset(100, 100),
    BackgroundColor3 = Color3.new(1,0,0),

	-- Set children
    children = {
        New "TextButton" {
            Size = UDim2.fromOffset(75, 30)
        }
    }
}
-- EVENTS
{
	-- Events are function callbacks
	MouseEnter = function(self, ...)
		
	end,
}

States:

local State = Quark.State
local Counter = State(0) -- initialize

Counter( Counter() + 1 ) -- increment
print(Counter()) -- print counter value