Ui

Functions
local function	gap (space_between_items)
local function	margin (space_container)
local function	add (application, size)
local function	add_items (applications)
local function	get_item (id)
local function	style (classlist)
local function	next ()
local function	back ()

Detailed Description

Grid System

The grid system is very versatile, and adjusts itself with the resolution and can be used by nesting one grid inside another, the best of all is that in frameworks that limit you to thinking in 12 or 24 columns like bootstrap you must define how many columns yourself.

Example

local function init(std, data)
    std.ui.grid('4x8 full6x8 ultra8x8')
        :add_items(list_of_widgets)
end

Slide

also known as carousel, it has similar behavior to grid but with visual selection of items. but it only accepts one-dimensional grids such as 1x1 2x1 or 1x2 .

Example

std.ui.slide('6x1')
    :add_items(my_items)
    :apply()

Breakpoints

Todo

comming soon breakpoints

	1seg	SD 480	HD 720	FULL HD 1080	QUAD HD 1440
prefix		sd	hd	full	quad
width	>0px	>479px	>719px	>1079px	>1439px

Offset

To create blank columns, simply add an empty table {} to represent an empty node. You can also specify the size of these whitespace columns as needed.

std.ui.grid('3x2')
    :add({}, 2)
    :add(btn0)
    :add(btn1)
    :add(btn2)
    :add(btn3)
    :apply()

Node (UI)

You can add several different column types to your grid: classes, nodes, medias, offsets, entire applications and even another grid.

• media

  std.ui.grid('1x1'):add(std.media.video(1))

• class

  local btn = {
      draw=function(std, data)end
  }
  std.ui.grid('1x1'):add(btn)

• node

  local btn_node = std.node.load(btn)
  std.ui.grid('1x1'):add(node_btn)

• offset

  std.ui.grid('1x1'):add({})

• application

  local game = {
      meta={
         title='pong'
      },
      callbacks={
          init=function() end,
          loop=function() end,
          draw=function() end,
          exit=function() end
      }
  }
  std.ui.grid('1x1'):add(game)

• grid

  std.ui.grid('1x1')
       :add(std.ui.grid('1x1')
          :add(btn)
       )
      :apply()

• JSX

  <grid class="1x1"><node/></grid>

Style

there is a css style componetization style, you define the name of a class and define fixed attributes or you can pass functions.

Attributes

• pos_x
• pos_y
• width
• height

Example

std.ui.style('home')
    :height(300)
    :pos_y(function(std, node, parent)
        return parent.data.height - 300
    end)

std.ui.style('center')
    :pos_x(function(std, node, parent)
        return parent.data.width/2 - node.data.width/2
    end)

std.ui.grid('3x1')
    :style('center home')
    :add(item1)
    :add({})
    :add(item2)

Function Documentation

add()

local function add	(	application	,
		size	)

Parameters

[in,out]	application	new column
[in]	size	column width in blocks

add_items()

local function add_items

(

applications

)

Parameters

[in,out]

list

of application columns

back()

local function back

(

)

Precondition

avaliable only in the std.ui.slide

Example

std.ui.slide('1x6'):add_items(items):back():apply()

gap()

local function gap

(

space_between_items

)

get_item()

local function get_item

(

id

)

Parameters

[in]

id

item index

Returns

node

margin()

local function margin

(

space_container

)

next()

local function next

(

)

Precondition

avaliable only in the std.ui.slide

Example

std.ui.slide('6x1'):add_items(items):next(2):apply()

style()

local function style

(

classlist

)