-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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).
<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>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>The TextEditor() element abstracts the contenteditable attribute.
TextEditor([
// Anything here is now editable
])Spacers simply take up empty space. Use the optional number argument to specify how much space they should take up.
A Spacer() takes up vertical space.
Spacer(number = 1)An HSpacer() takes up horizontal space.
HSpacer(number = 1)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 are useful automatic grid containers. They automatically set a grid based on the number of elements in the stack.
An HStack() stacks elements inside of it horizontally.
HStack([
// ...
])A VStack() stacks elements inside of it vertically.
VStack([
// ...
])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([
// ...
])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)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)