|
|
|
@@ -65,6 +65,9 @@ Run one of the following:
|
|
|
|
|
hot module replacement and logging facilities in all running instances
|
|
|
|
|
of tgui. In short, this means that you will instantly see changes in the
|
|
|
|
|
game as you code it. Very useful, highly recommended.
|
|
|
|
|
In order to use, you should start the game server first, connect to it so dreamseeker is
|
|
|
|
|
open, then start the dev server. You'll know if it's hooked correctly if data gets dumped
|
|
|
|
|
to the log when tgui windows are opened.
|
|
|
|
|
- `bin/tgui --dev --reload` - reload byond cache once.
|
|
|
|
|
- `bin/tgui --dev --debug` - run server with debug logging enabled.
|
|
|
|
|
- `bin/tgui --dev --no-hot` - disable hot module replacement (helps when
|
|
|
|
@@ -220,7 +223,6 @@ This way, `Button` can pull out the `className` generated by the `Box`.
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
`Box` units, like width, height and margins can be defined in two ways:
|
|
|
|
|
|
|
|
|
|
- By plain numbers (1 unit equals `0.5em`);
|
|
|
|
|
- In absolute measures, by providing a full unit string (e.g. `100px`).
|
|
|
|
|
|
|
|
|
@@ -239,6 +241,8 @@ Props:
|
|
|
|
|
- `height: number` - Box height.
|
|
|
|
|
- `minHeight: number` - Box minimum height.
|
|
|
|
|
- `maxHeight: number` - Box maximum height.
|
|
|
|
|
- `fontSize: number` - Font size.
|
|
|
|
|
- `fontFamily: string` - Font family.
|
|
|
|
|
- `lineHeight: number` - Directly affects the height of text lines.
|
|
|
|
|
Useful for adjusting button height.
|
|
|
|
|
- `inline: boolean` - Forces the `Box` to appear as an `inline-block`,
|
|
|
|
@@ -254,6 +258,7 @@ all available horizontal space.
|
|
|
|
|
- `opacity: number` - Opacity, from 0 to 1.
|
|
|
|
|
- `bold: boolean` - Make text bold.
|
|
|
|
|
- `italic: boolean` - Make text italic.
|
|
|
|
|
- `nowrap: boolean` - Stops text from wrapping.
|
|
|
|
|
- `textAlign: string` - Align text inside the box.
|
|
|
|
|
- `left` (default)
|
|
|
|
|
- `center`
|
|
|
|
@@ -293,11 +298,55 @@ over the button.
|
|
|
|
|
- `bottom` (default) - Show tooltip below the button.
|
|
|
|
|
- `left` - Show tooltip on the left of the button.
|
|
|
|
|
- `right` - Show tooltip on the right of the button.
|
|
|
|
|
- `ellipsis: boolean` - If button width is constrained, button text will
|
|
|
|
|
be truncated with an ellipsis. Be careful however, because this prop breaks
|
|
|
|
|
the baseline alignment.
|
|
|
|
|
- `title: string` - A native browser tooltip, which appears when hovering
|
|
|
|
|
over the button.
|
|
|
|
|
- `content/children: any` - Content to render inside the button.
|
|
|
|
|
- `onClick: function` - Called when element is clicked.
|
|
|
|
|
|
|
|
|
|
### `Button.Checkbox`
|
|
|
|
|
|
|
|
|
|
A ghetto checkbox, made entirely using existing Button API.
|
|
|
|
|
|
|
|
|
|
Props:
|
|
|
|
|
|
|
|
|
|
- See inherited props: [Button](#button)
|
|
|
|
|
- `checked: boolean` - Boolean value, which marks the checkbox as checked.
|
|
|
|
|
|
|
|
|
|
### `Button.Confirm`
|
|
|
|
|
|
|
|
|
|
A button with a an extra confirmation step, using native button component.
|
|
|
|
|
|
|
|
|
|
Props:
|
|
|
|
|
|
|
|
|
|
- See inherited props: [Button](#button)
|
|
|
|
|
- `confirmMessage: string` - Text to display after first click; defaults to "Confirm?"
|
|
|
|
|
- `confirmColor: string` - Color to display after first click; default to "bad"
|
|
|
|
|
|
|
|
|
|
### `Button.Input`
|
|
|
|
|
|
|
|
|
|
A button that turns into an input box after the first click. Turns back into a button after the user hits enter, defocuses, or hits escape. Enter and defocus commit, while escape cancels.
|
|
|
|
|
|
|
|
|
|
Props:
|
|
|
|
|
- See inherited props: [Box](#box)
|
|
|
|
|
- `fluid`: fill availible horizontal space
|
|
|
|
|
- `onCommit: (e, value) => void`: function that is called after the user defocuses the input or presses enter
|
|
|
|
|
- `currentValue: string`: default string to display when the input is shown
|
|
|
|
|
- `defaultValue: string`: default value emitted if the user leaves the box blank when hitting enter or defocusing. If left undefined, will cancel the change on a blank defocus/enter
|
|
|
|
|
|
|
|
|
|
### `Collapsible`
|
|
|
|
|
|
|
|
|
|
Displays contents when open, acts as a fluid button when closed. Click to toggle, closed by default.
|
|
|
|
|
|
|
|
|
|
Props:
|
|
|
|
|
- See inherited props: [Box](#box)
|
|
|
|
|
- `children: any` - What is collapsed when closed
|
|
|
|
|
- `title: string` - Text to display on the button for collapsing
|
|
|
|
|
- `color: string` - Color of the button; see [Button](#button)
|
|
|
|
|
- `buttons: any` - Buttons or other content to render inline with the button
|
|
|
|
|
|
|
|
|
|
### `ColorBox`
|
|
|
|
|
|
|
|
|
|
Displays a 1-character wide colored square. Can be used as a status indicator,
|
|
|
|
@@ -319,6 +368,21 @@ Props:
|
|
|
|
|
|
|
|
|
|
- See inherited props: [Box](#box)
|
|
|
|
|
|
|
|
|
|
### `Dropdown`
|
|
|
|
|
|
|
|
|
|
A simple dropdown box component. Lets the user select from a list of options and displays selected entry.
|
|
|
|
|
|
|
|
|
|
Props:
|
|
|
|
|
|
|
|
|
|
- See inherited props: [Box](#box)
|
|
|
|
|
- `options: string[]` - An array of strings which will be displayed in the dropdown when open
|
|
|
|
|
- `selected: string` - Currently selected entry
|
|
|
|
|
- `width: number` - Width of dropdown button and resulting menu
|
|
|
|
|
- `over: boolean` - dropdown renders over instead of below
|
|
|
|
|
- `color: string` - color of dropdown button
|
|
|
|
|
- `onClick: (e) => void` - Called when dropdown button is clicked
|
|
|
|
|
- `onSelected: (value) => void` - Called when a value is picked from the list, `value` is the value that was picked
|
|
|
|
|
|
|
|
|
|
### `Flex`
|
|
|
|
|
|
|
|
|
|
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
|
|
|
|
@@ -350,6 +414,10 @@ two flex items as far as possible from each other.
|
|
|
|
|
Props:
|
|
|
|
|
|
|
|
|
|
- See inherited props: [Box](#box)
|
|
|
|
|
- `spacing: number` - Spacing between flex items, in integer units
|
|
|
|
|
(1 unit - 0.5em). Does not directly relate to a flex css property
|
|
|
|
|
(adds a modifier class under the hood), and only integer numbers are
|
|
|
|
|
supported.
|
|
|
|
|
- `direction: string` - This establishes the main-axis, thus defining the
|
|
|
|
|
direction flex items are placed in the flex container.
|
|
|
|
|
- `row` (default) - left to right.
|
|
|
|
@@ -406,6 +474,7 @@ remaining space is distributed. It can be a length (e.g. `20%`, `5rem`, etc.),
|
|
|
|
|
an `auto` or `content` keyword.
|
|
|
|
|
- `align: string` - This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. See: [Flex](#flex).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### `Grid`
|
|
|
|
|
|
|
|
|
|
Helps you to divide horizontal space into two or more equal sections.
|
|
|
|
@@ -432,7 +501,7 @@ Props:
|
|
|
|
|
|
|
|
|
|
Props:
|
|
|
|
|
|
|
|
|
|
- See inherited props: [Table.Cell](#table-cell)
|
|
|
|
|
- See inherited props: [Table.Cell](#tablecell)
|
|
|
|
|
- `size: number` (default: 1) - Size of the column relative to other columns.
|
|
|
|
|
|
|
|
|
|
### `Icon`
|
|
|
|
@@ -445,7 +514,6 @@ Renders one of the FontAwesome icons of your choice.
|
|
|
|
|
|
|
|
|
|
To smoothen the transition from v4 to v5, we have added a v4 semantic to
|
|
|
|
|
transform names with `-o` suffixes to FA Regular icons. For example:
|
|
|
|
|
|
|
|
|
|
- `square` will get transformed to `fas square`
|
|
|
|
|
- `square-o` will get transformed to `far square`
|
|
|
|
|
|
|
|
|
@@ -470,7 +538,9 @@ Props:
|
|
|
|
|
|
|
|
|
|
- See inherited props: [Box](#box)
|
|
|
|
|
- `value: string` - Value of an input.
|
|
|
|
|
- `placeholder: string` - Text placed into Input box when value is otherwise nothing. Clears automatically when focused.
|
|
|
|
|
- `fluid: boolean` - Fill all available horizontal space.
|
|
|
|
|
- `selfClear: boolean` - Clear after hitting enter, as well as remain focused when this happens. Useful for things like chat inputs
|
|
|
|
|
- `onChange: (e, value) => void` - An event, which fires when you commit
|
|
|
|
|
the text by either unfocusing the input box, or by pressing the Enter key.
|
|
|
|
|
- `onInput: (e, value) => void` - An event, which fires on every keypress.
|
|
|
|
@@ -562,6 +632,9 @@ dragging the input.
|
|
|
|
|
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
|
|
|
|
|
to travel to adjust value by one `step`.
|
|
|
|
|
- `width: string|number` - Width of the element, in `Box` units or pixels.
|
|
|
|
|
- `height: string|numer` - Height of the element, in `Box` units or pixels.
|
|
|
|
|
- `lineHeight: string|number` - lineHeight of the element, in `Box` units or pixels.
|
|
|
|
|
- `fontSize: string|number` - fontSize of the element, in `Box` units or pixels.
|
|
|
|
|
- `format: value => value` - Format value using this function before
|
|
|
|
|
displaying it.
|
|
|
|
|
- `suppressFlicker: number` - A number in milliseconds, for which the input
|
|
|
|
@@ -738,6 +811,8 @@ Props:
|
|
|
|
|
|
|
|
|
|
- `vertical: boolean` - Use a vertical configuration, where tabs will appear
|
|
|
|
|
stacked on the left side of the container.
|
|
|
|
|
- `altSelection` - Whether the tab buttons select via standard select (color change) or by adding a white indicator to the selected tab.
|
|
|
|
|
Intended for usage on interfaces where tab color has relevance.
|
|
|
|
|
- `children: Tab[]` - This component only accepts tabs as its children.
|
|
|
|
|
|
|
|
|
|
### `Tabs.Tab`
|
|
|
|
|
Artur