Built in Elements & Components

Many of the built-in elements parallel a native HTML tag. Liberties are taken with naming elements and their methods, but most parallel the official specifications.

So this:

// Note that Image() excepts the most common attribute as its argument, src. However, the corresponding src() method is still available.
Image('domo.png')
    .caption("Caption")

Renders to this:

<img src="domo.png" alt="Caption"/>

The methods you can chain off of these elements will either be general like id(), or specific to that element like src() for example.

Components

Elements also allow the opportunity to abstract things like dropdowns to create what we call components (elements that incorporate HTML and CSS like spinners, stacks, views, etc., or abstract an element).

Dropdown

<select> and <option> tags are abstracted into the Dropdown() element.

Dropdown({
     '1': 'Item 1',
     '2': 'Item 2'
})

Result:

<select>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
</select>

You can even use the <optgroup> tag like so:

Dropdown({
     'Group 1': {
         '1': 'Item 1',
         '2': 'Item 2'
     },
     'Group 2': {
         '3': 'Item 3',
         '4': 'Item 4'
     }
})

Result:

<select>
    <optgroup label="Group 1">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="3">Item 3</option>
        <option value="4">Item 4</option>
    </optgroup>
</select>

Radio & Checkbox Groups

Groups of checkboxes/radios and labels are abstracted into the RadioGroup() and CheckBoxGroup() elements.

RadioGroup('radioGroup', {
    'yes': 'Yes',
    'no': 'No'
})

CheckBoxGroup({
    'this': 'This',
    'that': 'That'
})

Result:

<input type="radio" id="yes" name="radioGroup">
<label for="yes">Yes</label>

<input type="radio" id="no" name="radioGroup">
<label for="no">No</label>

<input type="checkbox" id="this" name="this">
<label for="this">This</label>

<input type="checkbox" id="that" name="that">
<label for="that">That</label></div>

TextEditor

The TextEditor() element abstracts the contenteditable attribute.

TextEditor([
    // Anything here is now editable
])

Spacers

Spacers simply take up empty space. Use the optional number argument to specify how much space they should take up.

Spacer

A Spacer() takes up vertical space.

Spacer(number = 1)

HSpacer

An HSpacer() takes up horizontal space.

HSpacer(number = 1)

Components

Spinner

Spinner() is a progress indicator component made using not just HTML, but also CSS. You can optionally specify a size (sets width and height) and a color for the primary part of the spinner. If no color is specified the accent color for your app is used.

Spinner('30px', 'dodgerblue')

Stacks

Stacks are useful automatic grid containers. They automatically set a grid based on the number of elements in the stack.

HStack

An HStack() stacks elements inside of it horizontally.

HStack([
    // ...
])

VStack

A VStack() stacks elements inside of it vertically.

VStack([
    // ...
])

FlexContent

A FlexContent() is similar to a VStack() except that it uses flex instead of grid. This means elements are not only stacked inline with each other evenly but the placement of this can be easily edited using flexbox methods.

FlexContent([
    // ...
])

GridStack

A GridStack() stacks elements inside of it in a grid. This means elements are stacked inline with each other evenly.

Optionally you can specify the minimum space each item should take up in the grid using the min argument (50% is the default).

Additionally, you can optionally specify if the grid should be fit or fill using the type argument (fill is the default).

Just like any other grid element, chain the gap() method to put a gap between the grid items.

GridStack([
    // ...
], min, type)

Views

ScrollView

A ScrollView() essentially abstracts this:

<div style="overflow: scroll;">
    <!-- -->
</div>

With ScrollView(), you either set a fixed height using the height() method or put it inside a fixed container. It has an optional argument after its elements: auto, which by default is true and sets if the scrollbar should be shown always or automatically when needed.

ScrollView([
    // ...
], auto: bool)