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. Show or hide components
6. Configure the avatar properly