rettangoli-ui

[!WARNING] This library is still in experimental mode. Expect API and UI breaking changes to happen without prior announcement.

Rettangoli is a UI library with following characteristics

it uses flexbox
implemented in web components
designed to be used for UI editors such as rettangoli-editor

Component	Component	Description
`<rtgl-view>`	View	Building block to build layouts
`<rtgl-button>`	Button	Buttons
`<rtgl-text>`	Text	Text
`<rtgl-image>`	Image	Image
`<rtgl-svg>`	SVG	SVG
`<rtgl-form>`	Form	Forms

rtgl-view

The rtgl-view component offers a variety of attributes for extensive customization. Below are detailed tables for each attribute category.

Attribute	Meaning	Values
`w`	Width	custom
`h`	Height	custom
`wh`	Width and Height	custom
`d`	Direction	`h`, `v`
`ah`	Align Horizontal	`s`, `c`, `e`
`av`	Align Vertical	`s`, `c`, `e`
`as`	Align Self	`sch`, `s`, `c`, `e`
`f`	Flex	`1`, `0`
`fw`	Flex Wrap	`w`
`g`	Flex Gap	`xs`, `s`, `m`, `l`, `xl`
`gh`	Flex Gap Horizontal	`xs`, `s`, `m`, `l`, `xl`
`gv`	Flex Gap Vertical	`xs`, `s`, `m`, `l`, `xl`
`m`	Margin	`xs`, `s`, `m`, `l`, `xl`
`mh`	Margin Horizontal	`xs`, `s`, `m`, `l`, `xl`
`mv`	Margin Vertical	`xs`, `s`, `m`, `l`, `xl`
`mt`	Margin Top	`xs`, `s`, `m`, `l`, `xl`
`mr`	Margin Right	`xs`, `s`, `m`, `l`, `xl`
`mb`	Margin Bottom	`xs`, `s`, `m`, `l`, `xl`
`ml`	Margin Left	`xs`, `s`, `m`, `l`, `xl`
`p`	Padding	`xs`, `s`, `m`, `l`, `xl`
`ph`	Padding Horizontal	`xs`, `s`, `m`, `l`, `xl`
`pv`	Padding Vertical	`xs`, `s`, `m`, `l`, `xl`
`pt`	Padding Top	`xs`, `s`, `m`, `l`, `xl`
`pr`	Padding Right	`xs`, `s`, `m`, `l`, `xl`
`pb`	Padding Bottom	`xs`, `s`, `m`, `l`, `xl`
`pl`	Padding Left	`xs`, `s`, `m`, `l`, `xl`
`bgc`	Background Color	`p`, `pc`, `s`, `sc`, `e`, `ec`, `su` , `sucl`, `suc`, `such`
`h-bgc`	Hover Background Color	`p`, `pc`, `s`, `sc`, `e`, `ec`, `su` , `sucl`, `suc`, `such`
`br`	Border Radius	`xs`, `s`, `m`, `l`, `xl`, `f`
`bw`	Border Width	`xs`, `s`, `m`, `l`, `xl`
`bc`	Border Color	`p`, `pc`, `s`, `sc`, `e`, `ec`, `su`, `sucl`, `suc`, `such`
`h-cur`	Hover Cursor	`p`

Dimensions

Attributes

Attribute	Meaning	Description
`w`	Width
`h`	Heigh
`wh`	Width and Height	Will set both width and height

Values

Values can bet set to any number. Can postfix the unit, otherwise it will default to px

Examples

Sets width and height to 120px

<rtgl-view wh="120"></rtgl-view>
<rtgl-view wh="120px"></rtgl-view>
<rgtl-view w="120" h="120"></rtgl-view>
<rgtl-view w="120px" h="120px"></rtgl-view>

Can also use other units

<rtgl-view width="100vw" height="100vh"></rtgl-view>

Direction

Attributes

Attribute	Meaning	Description
`d`	Direction	Children items will be oredred horizotannly or vertically

Values

Value	Meaning
`v`	Vertical
`h`	Horizontal

Alignment

Attributes

Attribute	Meaning	Description
`ah`	Align Horizontal	Horizontally align child items
`av`	Align Vertical	Vertically align child items
`as`	Align Self	How to align self

Values

Value	Meaning	Default
	none	Yes
`s`	start
`c`	center
`e`	end

Only available for Align Self

Value	Meaning	Default
`sch`	Stretch

Examples

<rtgl-view ah="c"></rtgl-view>
<rtgl-view ah="e"></rtgl-view>
<rtgl-view av="c"></rtgl-view>
<rtgl-view av="e"></rtgl-view>

Flex

Attribute

Attribute	Meaning	Description
`flex`	Flex	Flex grow and shirink

Values

Value	Meaning
`0`	0
`1`	1
`none`	none

Examples

<rtgl-view flex="1"></rtgl-view>
<rtgl-view flex="2"></rtgl-view>
<rtgl-view flex="3"></rtgl-view>

Flex Wrap

Attributes

Attribute	Meaning	Description
`fw`	Flex Wrap	Flex wrap or no wrap

Values

Value	Meaning
`w`	wrap

Examples

<rtgl-view fw="w"></rtgl-view>

Flex Gap

Attributes

Attribute	Meaning	Description
`g`	Flex Gap	Flex Gap both horizontal and vertical
`gh`	Flex Gap Horizontal	Flex Gap Horizontal
`gv`	Flex Gap Vertical	Flex Gap Vertical

Values

Value	Meaning
`xs`	Extra small
`s`	Small
`m`	Medium
`l`	Large
`xl`	Extra large

Examples

<rtgl-view g="m"></rtgl-view>
<rtgl-view gh="m" gv="m"></rtgl-view>

Margin

Attributes

Attribute	Meaning	Description
`m`	Margin	Sets margin in all 4 directions
`mh`	Margin Horizontal	Sets left and right margin
`mv`	Margin Vertical	Sets top and bottom margin
`mt`	Margin Top
`ml`	Margin Left
`mb`	Margin Bottom
`mr`	Margin Right

Values

Value	Meaning
`xs`	Extra small
`s`	Small
`m`	Medium
`l`	Large
`xl`	Extra large

Examples

<rtgl-view m="m"></rtgl-view>
<rtgl-view mh="m" mv="m"></rtgl-view>
<rtgl-view mt="m" mr="m" mb="m" ml="m"></rtgl-view>

Padding

Attributes

Attribute	Meaning	Description
`p`	Padding	Sets padding in all 4 directions
`ph`	Padding Horizontal	Sets left and right padding
`pv`	Padding Vertical	Sets top and bottom padding
`pt`	Padding Top
`pl`	Padding Left
`pb`	Padding Bottom
`pr`	Padding Right

Values

Value	Meaning
`xs`	Extra small
`s`	Small
`m`	Medium
`l`	Large
`xl`	Extra large

Examples

<rtgl-view p="m"></rtgl-view>
<rtgl-view ph="m" pv="m"></rtgl-view>
<rtgl-view pt="m" pr="m" pb="m" pl="m"></rtgl-view>

Background Color

Attributes

Attribute	Meaning	Description
`bgc`	Background Color	Background Color
`h-bgc`	Hover Background Color	Background Color

Values

Value	Meaning
`p`	primary
`pc`	primary-container
`s`	secondary
`sc`	secondary container
`e`	error
`ec`	error-container
`su`	surface
`sucl`	surface container low
`suc`	surface container
`such`	suface container high

Examples

TODO

Border Radius

Attributes

Attribute	Meaning	Description
`br`	Border Radius	Border Radius

Values

Value	Meaning
`xs`	Extra small
`s`	Small
`m`	Medium
`l`	Large
`xl`	Extra large
`f`	Full

Examples

TODO

Border Width

Attributes

Attribute	Meaning	Description
`bw`	Border Width	Border Width

Values

Value	Meaning
`xs`	Extra small
`s`	Small
`m`	Medium
`l`	Large
`xl`	Extra large

Examples

TODO

Border Color

Attributes

Attribute	Meaning	Description
`bc`	Border Color	Border Color

Values

Value	Meaning
`p`	primary
`pc`	primary-container
`s`	secondary
`sc`	secondary container
`e`	error
`ec`	error-container
`s`	surface
`scl`	surface container low
`sc`	surface container
`sch`	suface container high

Examples

TODO

Hover Cursor

Attributes

Attribute	Meaning	Description
`h-cur`	Hover Cursor	Hover Cursor

Values

Value	Meaning
`p`	Pointer

Examples

TODO

rtgl-button

The rtgl-button provides basic styling for buttons

Attribute	Meaning	Values
`t`	Type	`p`, `pl`, `ps`, `s`, `sl`, `ss`, `e`, `el`
`f`	Flex	`1`, `0`
`as`	Align Self	`sch`, `s`, `c`, `e`
`m`	Margin	`xs`, `s`, `m`, `l`, `xl`
`mh`	Margin Horizontal	`xs`, `s`, `m`, `l`, `xl`
`mv`	Margin Vertical	`xs`, `s`, `m`, `l`, `xl`
`mt`	Margin Top	`xs`, `s`, `m`, `l`, `xl`
`mr`	Margin Right	`xs`, `s`, `m`, `l`, `xl`
`mb`	Margin Bottom	`xs`, `s`, `m`, `l`, `xl`
`ml`	Margin Left	`xs`, `s`, `m`, `l`, `xl`

Type

Attributes

Attribute	Meaning	Description
`t`	Type	Provides type combinations for different sizes and color styles

Values

Value	Meaning
`p`	Primary
`pl`	Primary Large
`ps`	Primary Small
`s`	Secondary
`sl`	Secondary Large
`ss`	Secondary Small
`e`	Error
`el`	Error Large
`es`	Error Small

rtgl-text

The rtgl-text provides text in standard sizes and colors

Attribute	Meaning	Values
`s`	Size	`dm`, `hm`, `tl`, `tm`, `ts`, `bl`, `bm`, `bs`, `ll`, `lm`
`c`	Color	`on-p`, `on-pc`, `on-s` , `on-sc`, `on-su`, `on-suv`, `i-on-s`, `on-e`, `on-ec`
`f`	Flex	`1`, `0`
`as`	Align Self	`sch`, `s`, `c`, `e`
`m`	Margin	`xs`, `s`, `m`, `l`, `xl`
`mh`	Margin Horizontal	`xs`, `s`, `m`, `l`, `xl`
`mv`	Margin Vertical	`xs`, `s`, `m`, `l`, `xl`
`mt`	Margin Top	`xs`, `s`, `m`, `l`, `xl`
`mr`	Margin Right	`xs`, `s`, `m`, `l`, `xl`
`mb`	Margin Bottom	`xs`, `s`, `m`, `l`, `xl`
`ml`	Margin Left	`xs`, `s`, `m`, `l`, `xl`
`h-cur`	Hover Cursor	`p`

Size

Attributes

Attribute	Meaning	Description
`s`	Size	Text sizes

Values

Value	Meaning
`dm`	Display Medium
`hm`	Headline Medium
`tl`	Title Large
`tm`	Title Medium
`ts`	Title Small
`bl`	Body Large
`bm`	Body Medium
`bs`	Body Small
`ll`	Label Large
`lm`	Label Medium

Examples

TODO

Color

Attributes

Attribute	Meaning	Description
`c`	Color	Text color

Values

Value	Meaning
`on-p`	On Primary
`on-pc`	On Primary Container
`on-s`	On Secondary
`on-sc`	On Secondary Container
`on-su`	On Surface
`on-suv`	on Surface Variant
`i-on-s`	Inverse on surface
`on-e`	On Error
`on-ec`	On Error Container

Examples

TODO

rtgl-image

Displays images

Attribute	Meaning	Values
`w`	Width	custom
`h`	Height	custom
`wh`	Width and Height	custom
`src`	Source	custom
`of`	Object Fit	`cov`, `con`
`f`	Flex	`1`, `0`
`as`	Align Self	`sch`, `s`, `c`, `e`
`m`	Margin	`xs`, `s`, `m`, `l`, `xl`
`mh`	Margin Horizontal	`xs`, `s`, `m`, `l`, `xl`
`mv`	Margin Vertical	`xs`, `s`, `m`, `l`, `xl`
`mt`	Margin Top	`xs`, `s`, `m`, `l`, `xl`
`mr`	Margin Right	`xs`, `s`, `m`, `l`, `xl`
`mb`	Margin Bottom	`xs`, `s`, `m`, `l`, `xl`
`ml`	Margin Left	`xs`, `s`, `m`, `l`, `xl`
`h-cur`	Hover Cursor	`p`
`br`	Border Radius	`xs`, `s`, `m`, `l`, `xl`, `f`

Source

Attributes

Attribute	Meaning	Description
`src`	Source	Same as standard `<img src="">`

Values

Should be a url to a remote or local image

Examples

TODO

Object Fit

Attributes

Attribute	Meaning	Description
`of`	Object Fit

Values

Value	Meaning
`cov`	Cover
`con`	Contain

Examples

TODO

rtgl-svg

Attribute	Meaning	Values
`w`	Width	custom
`h`	Height	custom
`wh`	Width and Height	custom
`svg`	SVG	custom
`f`	Flex	`1`, `0`
`m`	Margin	`xs`, `s`, `m`, `l`, `xl`
`as`	Align Self	`sch`, `s`, `c`, `e`
`mh`	Margin Horizontal	`xs`, `s`, `m`, `l`, `xl`
`mv`	Margin Vertical	`xs`, `s`, `m`, `l`, `xl`
`mt`	Margin Top	`xs`, `s`, `m`, `l`, `xl`
`mr`	Margin Right	`xs`, `s`, `m`, `l`, `xl`
`mb`	Margin Bottom	`xs`, `s`, `m`, `l`, `xl`
`ml`	Margin Left	`xs`, `s`, `m`, `l`, `xl`
`h-cur`	Hover Cursor	`p`

SVG

Attributes

Attribute	Meaning	Description
`svg`	SVG

Values

Name of the svg All names must be registered with global window variable:

window.rtglSvgs = {
    'svgName1': '<svg>...</svg>',
    'svgName2': '<svg>...</svg>'
}

Examples

<rtgl-svg svg="svgName1"></rtgl-svg>

rtgl-form

TODO