-
Notifications
You must be signed in to change notification settings - Fork 2
Component Types
Ashley Muncaster edited this page Sep 1, 2024
·
11 revisions

A text label component.
| Name | Type | Description | Default |
|---|---|---|---|
| text | string |
The text displayed in the component. Can use markdown to style the text further. | "Sample Text" |
| Name | Type | Description | Default |
|---|---|---|---|
| align | string |
The alignment of the component (text alignment & content justification). See text-align & justify-content. | "center" |
| background | string |
The background of the component. See background. | "white" |
| border | string |
The border of the component. See border. | "4px solid black" |
| borderRadius | string |
The curving radius of the border of the component. See border-radius. | "10px" |
| color | UnityEngine.Color |
The color of the text displayed in the component. | Color.black |
| fontFamily | string |
The font family of the text displayed in the component. See font-family. Ensure appropriate font families are defined in the theme. | "sans-serif" |
| fontSize | string |
The size of the font of the text displayed in the component. See font-size. | "16px" |
| margin | string |
The margin outside of the component. See margin. | "10px 0px" |
| padding | string |
The padding inside of the component. See padding. | "10px" |
| width | string |
The width of the component. See width. | "auto" |

A text input component.
| Name | Type | Description | Default |
|---|---|---|---|
| event | string |
The name of the event raised by the component on sending text from the member. | "text" |
| persistent | bool |
If true, the text input remains persistent on the client to allow the member to send multiple events without having to refresh the state. | false |
| Name | Type | Description | Default |
|---|---|---|---|
| align | string |
The alignment of the component (text alignment & content justification). See text-align & justify-content. | "center" |
| background | string |
The background of the component. See background. | "white" |
| border | string |
The border of the component. See border. | "2px solid black" |
| borderRadius | string |
The curving radius of the border of the component. See border-radius. | "0px" |
| color | UnityEngine.Color |
The color of the text displayed in the component. | Color.black |
| fontFamily | string |
The font family of the text displayed in the component. See font-family. Ensure appropriate font families are defined in the theme. | "sans-serif" |
| fontSize | string |
The size of the font of the text displayed in the component. See font-size. | "30px" |
| margin | string |
The margin outside of the component. See margin. | "10px 0px" |
| padding | string |
The padding inside of the component. See padding. | "10px" |
| width | string |
The width of the component. See width. | "100%" |

A simple buzzer touch button component.
| Name | Type | Description | Default |
|---|---|---|---|
| event | string |
The name of the event raised by the component on pressing the buzzer. | "buzz" |
| label | string |
The text displayed in the component. | "BUZZ" |
| Name | Type | Description | Default |
|---|---|---|---|
| align | string |
The alignment of the component (text alignment & content justification). See text-align & justify-content. | "center" |
| background | string |
The background of the component. See background. | "white" |
| border | string |
The border of the component. See border. | "4px solid black" |
| color | UnityEngine.Color |
The color of the text displayed in the component. | Color.black |
| fontFamily | string |
The font family of the text displayed in the component. See font-family. Ensure appropriate font families are defined in the theme. | "" |
| fontSize | string |
The size of the font of the text displayed in the component. See font-size. | "70px" |
| height | string |
The height of the component. See height. | "300px" |
| radius | string |
The curving radius of the border of the component. See border-radius. | "70px" |
| shadow | string |
The shadow effect of the component. See box-shadow. | "5px 5px #000000" |
| hover | ParameterList |
The styling of the component when hovered over. | new ParameterList() |

A touch button component.
| Name | Type | Description | Default |
|---|---|---|---|
| event | string |
The name of the event raised by the component on pressing the button. | "buzz" |
| label | string |
The text displayed in the component. Can use markdown to style the text further. | "A: 42" |
| keys | string[] |
The set of keyboard keys that can be pressed as a keyboard shortcut to press this button. See KeyboardEvent.key for more information. | [] |
| value | string |
The value of the event raised by the component on pressing the button. | A |
| Name | Type | Description | Default |
|---|---|---|---|
| align | string |
The alignment of the component (text alignment & content justification). See text-align & justify-content. | "center" |
| background | string |
The background of the component. See background. | "white" |
| border | string |
The border of the component. See border. | "4px solid black" |
| borderRadius | string |
The curving radius of the border of the component. See border-radius. | "10px" |
| color | UnityEngine.Color |
The color of the text displayed in the component. | Color.black |
| fontFamily | string |
The font family of the text displayed in the component. See font-family. Ensure appropriate font families are defined in the theme. | "sans-serif" |
| fontSize | string |
The size of the font of the text displayed in the component. See font-size. | "16px" |
| margin | string |
The margin outside of the component. See margin. | "10px 0px" |
| padding | string |
The padding inside of the component. See padding. | "10px" |
| width | string |
The width of the component. See width. | "auto" |
| hover | ParameterList |
The styling of the component when hovered over. | new ParameterList() |

A component of multiple touch buttons offered as a set of choices.
| Name | Type | Description | Default |
|---|---|---|---|
| choices | List<ChoicesParameter>.Choice |
The set of choices displayed in the component. | new List<ChoicesParameter.Choice>() |
| event | string |
The name of the event raised by the component on submitting a choice. | "buzz" |
| multiSelect | bool |
If true, then the member will be able to select multiple choices, and a Submit button is added to the layout. | false |
| submit | ParameterList |
The properties for the submit button; used when multiSelect is set to true. | new ParameterList() |
| Name | Type | Description | Default |
|---|---|---|---|
| align | string |
The alignment of the component (text alignment & content justification). See text-align & justify-content. | "center" |
| background | string |
The background of the component. See background. | "white" |
| border | string |
The border of the component. See border. | "4px solid black" |
| borderRadius | string |
The curving radius of the border of the component. See border-radius. | "10px" |
| color | UnityEngine.Color |
The color of the text displayed in the component. | Color.black |
| fontFamily | string |
The font family of the text displayed in the component. See font-family. Ensure appropriate font families are defined in the theme. | "sans-serif" |
| fontSize | string |
The size of the font of the text displayed in the component. See font-size. | "16px" |
| grid | bool |
If true, will display the choices in a 2D grid instead of just a vertical stack. | false |
| gridColumns | int |
If grid is true, the number of columns for the grid of choices. | 2 |
| gridGap | string |
If grid is true, the gap between each of the choices in the grid. See grid-gap / gap. | "10px" |
| gridRowHeight | string |
If grid is true, the height of a row in the grid of choices. See grid-auto-rows. | "1fr" |
| margin | string |
The margin outside of the component. See margin. | "10px 0px" |
| padding | string |
The padding inside of the component. See padding. | "10px" |
| width | string |
The width of the component. See width. | "auto" |
| hover | ParameterList |
The styling of the component when hovered over. | new ParameterList() |
| Name | Type | Description | Default |
|---|---|---|---|
| label | string |
The text displayed in this choice. Can use markdown to style the text further. | "" |
| value | string |
The value of the event raised by the component on pressing this choice, or having this choice selected in a multiSelect submission. | "" |
| keys | string[] |
The set of keyboard keys that can be pressed as a keyboard shortcut to press this button. See KeyboardEvent.key for more information. | [] |
| style | ParameterList |
The style properties for this choice. | new ParameterList() |
| Name | Type | Description | Default |
|---|---|---|---|
| align | string |
The alignment of the component (text alignment & content justification). See text-align & justify-content. | "center" |
| background | string |
The background of the component. See background. | "white" |
| border | string |
The border of the component. See border. | "4px solid black" |
| borderRadius | string |
The curving radius of the border of the component. See border-radius. | "10px" |
| color | UnityEngine.Color |
The color of the text displayed in the component. | Color.black |
| fontFamily | string |
The font family of the text displayed in the component. See font-family. Ensure appropriate font families are defined in the theme. | "sans-serif" |
| fontSize | string |
The size of the font of the text displayed in the component. See font-size. | "16px" |
| margin | string |
The margin outside of the component. See margin. | "10px 0px" |
| padding | string |
The padding inside of the component. See padding. | "10px" |
| width | string |
The width of the component. See width. | "auto" |
| hover | ParameterList |
The styling of the component when hovered over. | new ParameterList() |

A numerical input component with slider.
| Name | Type | Description | Default |
|---|---|---|---|
| event | string |
The name of the event raised by the component on sending a number input from the member. | "buzz" |
| max | int |
The maximum value of the slider and number input. | 100 |
| min | int |
The minimum value of the slider and number input. | 0 |
| step | int |
The step increment of the slide and number input. | 1 |
| Name | Type | Description | Default |
|---|---|---|---|
| align | string |
The alignment of the component (text alignment & content justification). See text-align & justify-content. | "center" |
| background | string |
The background of the component. See background. | "white" |
| border | string |
The border of the component. See border. | "2px solid black" |
| borderRadius | string |
The curving radius of the border of the component. See border-radius. | "0px" |
| color | UnityEngine.Color |
The color of the text displayed in the component. | Color.black |
| fontFamily | string |
The font family of the text displayed in the component. See font-family. Ensure appropriate font families are defined in the theme. | "sans-serif" |
| fontSize | string |
The size of the font of the text displayed in the component. See font-size. | "30px" |
| margin | string |
The margin outside of the component. See margin. | "10px 0px" |
| padding | string |
The padding inside of the component. See padding. | "10px" |
| width | string |
The width of the component. See width. | "100%" |

A component of multiple touch buttons offered as a set of choices that need to be sorted or ordered in some way. Basically the same as Choices, but the interface works slightly differently.