Components

Components

This section describes the different available components.

Component List

Each component has:

• id: a unique identifier
• name: the name of the component, useful for navigating the hierarchy
• class: Bootstrap classes used to format the document

Root

• The root contains properties related to the window’s width and height
• 3 Checkboxes
  • is a craft
• Can be used on the map
• Can be drag&dropped onto another sheet
• ID of the avatar component

Layout

1. Row: designed to contain multiple columns and organize them automatically
2. Column: child of a row. It has the size property (1–12) that defines its relative width
3. Container: can contain and organize its child components, either horizontally or vertically, depending on the layout property

Form

Form containers are used to create character sheets with editable fields.

1. Label: displays text
2. NumberInput: numeric-only input field
3. TextInput: editable field for entering text
4. Textarea: multi-line text area (non-editable)
5. Checkbox: a checkable box
6. Choice: a dropdown list to select an element from several options

Container

Containers allow grouping multiple views.

1. Repeater: dynamically adds views. Perfect for managing inventories or skill lists
2. Tab: manages multiple tabs to better organize a character sheet

Special

1. Icon: displays an icon
2. Avatar: inserts an image into the character sheet
3. Color: allows selecting a color

Component Tutorials

1. Build character sheets with Bootstrap
2. Use lists
3. Use tabs
4. Use repeaters
5. Create buttons
6. Show or hide components
7. Configure the avatar properly