SDK Elements

General Information

All basic elements have default base settings and then a collection of CSS classes, maintained by the elements settings, to adjust formatting and styling. The majority of settings will apply to each element and only specific settings that provide specialized styling based on the setting class will be displayed below.

Bar

Small and Tiny sizing the label and altLabel are hidden by default.

{type:'bar', color:'bg-blue-1', label:'14', size:'medium'}
{size:'xlarge | large | medium | small | tiny'}

Bar example code

Block

Generally non-mouse/touch interactive.

{type:'block', color:'bg-blue-1', label:'14'}
No Special Settings

Block example code

Button

{type:'button', color:'bg-blue-1', label:'14', altLabel:'Energy Level'}
{version:'round | round-right | round-left'}

Button example code

Cap

Label and altLabel will be hidden by default on the small, medium and tiny sizing.

{type:'cap', color:'bg-blue-1', version:'round-right', size:'medium'}
{version:'round | round-right | round-left'} {size:'xlarge | large | medium | small | tiny'}

Cap example code

Complex Button

These buttons are a parent container with child elements: Buttons, Blocks, Text, Caps & Child Complex Buttons.

Mouse/Touch events can be applied to the parent wrapper when passed through its settings definition or can be attached to individual elements. Nesting of Complex Buttons within complex buttons is perfectly acceptable.

{type:'complexButton', children:[{...}, {...}, {...}]}
{colors:['array', 'of', 'color', 'strings'}

Complex Button example code

Elbow

{type:'elbow', direction:'bottom-left', color:'bg-blue-1', label:'LCARS'}
{size:'base | small | medium | large'}
{version:'horizontal | vertical'}
{direction:'top-left | top-right | bottom-right| bottom-left'}

Endcap

The endcap comes with a default rounding and skew angle. Override by using the additional settings. The offset setting is utilized because the CSS transform skew will create white space between the child DOM object and the endcap wrapper.

{type:'endcap', version:'bottom-left', color:'bg-blue-1', label:'LCARS'}
{version:'top-left | top-right| bottom-right| bottom-left |'}
{skew:string | '15deg'} {offset:string | '15px'} {roundTop:string | '15px' | '15%'} {roundBottom:string | '15px' | '15%'}

HTML Tag

This is to generate non-LCARS based DOM elements, like input fields or non-LCARS based templates for data.

{type:'htmlTag', tag:'div', children:'<h2>Some Text</h2>'}

Img

{type:'img', src:'../folder-name/image.png'}

Oval

{type:'oval', color:'bg-blue-1', size:'small'}

SVG

{type:'svg', xml:'<svg>...</svg>'}

Text

{type:'text', color:'text-blue-1', text:'Some Text'}

Title

{type:'title', color:'bg-text-1', text:'Some Text'}
{size:'small | half'}

Semantic & Layout Elements

These elements are for layout purposes and mainly exist for more efficient CSS styling.

HTML Tag Based

• aside
• details
• footer
• header
• main
• nav
• section

{type:'aside', flex:'v', children:[{...},{...},{...}]}
{type:'header', flex:'h', children:[{...},{...},{...}]}
{type:'section', class:{someClass:true}, children:[{...},{...},{...}]}

Class Based

• column | .column
• content | .content
• row | .row
• wrapper | .wrapper

{type:'column', flex:'v', children:[{...},{...},{...}]}
{type:'row', flex:'h', children:[{...},{...},{...}]}
{type:'content', class:{someClass:true}, children:[{...},{...},{...}]}

Column and row elements have default styling applied for child spacing at 5px. Row elements by default have the flex setting enabled by default through its CSS class.