cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2025-12-11 10:43:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

TGUI 4.3

Browse Source
This commit is contained in:
Chompstation Bot
2021-06-18 04:23:03 +00:00
committed by Darlantan
parent 5f76f2e855
commit 331e5230d6
332 changed files with 23458 additions and 9666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
tgui/docs/component-reference.md
View File

@@ -28,6 +28,7 @@ Make sure to add new items to this list if you document new components.
- [`Grid`](#grid)
- [`Grid.Column`](#gridcolumn)
- [`Icon`](#icon)
- [`Icon.Stack`](#iconstack)
- [`Input`](#input)
- [`Knob`](#knob)
- [`LabeledControls`](#labeledcontrols)
@@ -39,8 +40,10 @@ Make sure to add new items to this list if you document new components.
- [`NoticeBox`](#noticebox)
- [`NumberInput`](#numberinput)
- [`ProgressBar`](#progressbar)
- [`RoundGauge`](#roundgauge)
- [`Section`](#section)
- [`Slider`](#slider)
- [`Stack`](#stack)
- [`Table`](#table)
- [`Table.Row`](#tablerow)
- [`Table.Cell`](#tablecell)
@@ -183,6 +186,7 @@ all available horizontal space.
- `bold: boolean` - Make text bold.
- `italic: boolean` - Make text italic.
- `nowrap: boolean` - Stops text from wrapping.
- `preserveWhitespace: boolean` - Preserves line-breaks and spacing in text.
- `textAlign: string` - Align text inside the box.
- `left` (default)
- `center`
@@ -217,17 +221,13 @@ Buttons allow users to take actions, and make choices, with a single click.
- `selected: boolean` - Activates the button (gives it a green color).
- `tooltip: string` - A fancy, boxy tooltip, which appears when hovering
over the button.
- `tooltipPosition: string` - Position of the tooltip.
- `top` - Show tooltip above 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.
- `tooltipPosition?: string` - Position of the tooltip. See [`Popper`](#Popper) for valid options.
- `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.
- `children: any` - Content to render inside the button.
- `onClick: function` - Called when element is clicked.
### `Button.Checkbox`
@@ -241,12 +241,12 @@ A ghetto checkbox, made entirely using existing Button API.
### `Button.Confirm`
A button with a an extra confirmation step, using native button component.
A button with 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?"
- `confirmContent: string` - Text to display after first click; defaults to "Confirm?"
- `confirmColor: string` - Color to display after first click; defaults to "bad"
### `Button.Input`
@@ -258,7 +258,7 @@ commit, while escape cancels.
**Props:**
- See inherited props: [Box](#box)
- `fluid`: fill availible horizontal space
- `fluid`: fill available 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
@@ -359,12 +359,16 @@ and displays selected entry.
**Props:**
- See inherited props: [Box](#box)
- See inherited props: [Icon](#icon)
- `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
- `over: boolean` - Dropdown renders over instead of below
- `color: string` - Color of dropdown button
- `nochevron: boolean` - Whether or not the arrow on the right hand side of the dropdown button is visible
- `noscroll: boolean` - Whether or not the dropdown menu should have a scroll bar
- `displayText: string` - Text to always display in place of the selected text
- `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
@@ -384,26 +388,26 @@ to the left, and certain elements to the right:
```jsx
<Flex>
<Flex.Item>
<Flex.Item grow={1}>
Button description
</Flex.Item>
<Flex.Item grow={1} />
<Flex.Item>
<Button content="Perform an action" />
<Button>
Perform an action
</Button>
</Flex.Item>
</Flex>
```
Flex item with `grow` property serves as a "filler", to separate the other
two flex items as far as possible from each other.
Flex item with `grow` property will grow to take all available empty space,
while flex items without grow will take the minimum amount of space. This
effectively places the last flex item to the very end of the flex container.
**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.
- ~~`spacing: number`~~ - **Removed in tgui 4.3**,
use [Stack](#stack) instead.
- `inline: boolean` - Makes flexbox container inline, with similar behavior
to an `inline` property on a `Box`.
- `direction: string` - This establishes the main-axis, thus defining the
@@ -450,16 +454,16 @@ when they overflow the line.
- `order: number` - By default, flex items are laid out in the source order.
However, the order property controls the order in which they appear in the
flex container.
- `grow: number` - This defines the ability for a flex item to grow if
necessary. It accepts a unitless value that serves as a proportion. It
- `grow: number | boolean` - This defines the ability for a flex item to grow
if necessary. It accepts a unitless value that serves as a proportion. It
dictates what amount of the available space inside the flex container the
item should take up. This number is unit-less and is relative to other
siblings.
- `shrink: number` - This defines the ability for a flex item to shrink
if necessary. Inverse of `grow`.
- `basis: string` - This defines the default size of an element before any
flex-related calculations are done. Has to be a length (e.g. `20%`, `5rem`),
an `auto` or `content` keyword.
- `shrink: number | boolean` - This defines the ability for a flex item to
shrink if necessary. Inverse of `grow`.
- `basis: number | string` - This defines the default size of an element
before any flex-related calculations are done. Has to be a length
(e.g. `20%`, `5rem`), an `auto` or `content` keyword.
- **Important:** IE11 flex is buggy, and auto width/height calculations
can sometimes end up in a circular dependency. This usually happens, when
working with tables inside flex (they have wacky internal widths and such).
@@ -527,6 +531,22 @@ Fractional numbers are supported.
- `spin: boolean` - Whether an icon should be spinning. Good for load
indicators.
### `Icon.Stack`
Renders children icons on top of each other in order to make your own icon.
```jsx
<Icon.Stack>
<Icon name="pen" />
<Icon name="slash" />
</Icon.Stack>
```
**Props:**
- See inherited props: [Box](#box)
- `children: Icon` - Icons to stack.
### `Input`
A basic text input, which allow users to enter text into a UI.
@@ -625,7 +645,9 @@ to perform some sort of action), there is a way to do that:
<LabeledList.Item
label="Item"
buttons={(
<Button content="Click me!" />
<Button>
Click me!
</Button>
)}>
Content
</LabeledList.Item>
@@ -643,7 +665,7 @@ to perform some sort of action), there is a way to do that:
- `label: string` - Item label.
- `color: string` - Sets the color of the text.
- `buttons: any` - Buttons to render aside the content.
- `content/children: any` - Content of this labeled item.
- `children: any` - Content of this labeled item.
### `LabeledList.Divider`
@@ -718,6 +740,16 @@ the input, or successfully enter a number.
- `onDrag: (e, value) => void` - An event, which fires about every 500ms
when you drag the input up and down, on release and on manual editing.
### `Popper`
Popper lets you position elements so that they don't go out of the bounds of the window. See [popper.js](https://popper.js.org/) for more information.
**Props:**
- `popperContent: InfernoNode` - The content that will be put inside the popper.
- `options?: { ... }` - An object of options to pass to `createPopper`. See [https://popper.js.org/docs/v2/constructors/#options], but the one you want most is `placement`. Valid placements are "bottom", "top", "left", and "right". You can affix "-start" and "-end" to achieve something like top left or top right respectively. You can also use "auto" (with an optional "-start" or "-end"), where a best fit will be chosen.
- `additionalStyles: { ... }` - A map of CSS styles to add to the element that will contain the popper.
### `ProgressBar`
Progress indicators inform users about the status of ongoing processes.
@@ -748,7 +780,39 @@ percentage and how filled the bar is.
- `ranges: { color: [from, to] }` - Applies a `color` to the progress bar
based on whether the value lands in the range between `from` and `to`.
- `color: string` - Color of the progress bar.
- `content/children: any` - Content to render inside the progress bar.
- `children: any` - Content to render inside the progress bar.
### `RoundGauge`
The RoundGauge component provides a visual representation of a single metric, as well as being capable of showing informational or cautionary boundaries related to that metric.
```jsx
<RoundGauge
size={1.75}
value={tankPressure}
minValue={0}
maxValue={pressureLimit}
alertAfter={pressureLimit * 0.70}
ranges={{
"good": [0, pressureLimit * 0.70],
"average": [pressureLimit * 0.70, pressureLimit * 0.85],
"bad": [pressureLimit * 0.85, pressureLimit],
}}
format={formatPressure} />
```
The alert on the gauge is optional, and will only be shown if the `alertAfter` prop is defined. When defined, the alert will begin to flash the respective color upon which the needle currently rests, as defined in the `ranges` prop.
**Props:**
- See inherited props: [Box](#box)
- `value: number` - The current value of the metric.
- `minValue: number` (default: 0) - The lower bound of the guage.
- `maxValue: number` (default: 1) - The upper bound of the guage.
- `ranges: { color: [from, to] }` (default: `{ "good": [0, 1] }`) - Provide regions of the guage to color between two specified values of the metric.
- `alertAfter: number` (optional) - When provided, will cause an alert symbol on the gauge to begin flashing in the color upon which the needle currently rest, as defined in `ranges`.
- `format: function(value) => string` (optional) - When provided, will be used to format the value of the metric for display.
- `size: number` (default: 1) - When provided scales the gauge.
### `Section`
@@ -773,18 +837,25 @@ If you want to have a button on the right side of an section title
<Section
title="Cargo"
buttons={(
<Button content="Send shuttle" />
<Button>
Send shuttle
</Button>
)}>
Here you can order supply crates.
</Section>
```
**New:** Sections can now be nested, and will automatically font size of the
header according to their nesting level. Previously this was done via `level`
prop, but now it is automatically calculated.
- See inherited props: [Box](#box)
- `title: string` - Title of the section.
- `level: number` - Section level in hierarchy. Default is 1, higher number
means deeper level of nesting. Must be an integer number.
- `buttons: any` - Buttons to render aside the section title.
- `content/children: any` - Content of this section.
- `fill: boolean` - If true, fills all available vertical space.
- `fitted: boolean` - If true, removes all section padding.
- `scrollable: boolean` - Shows or hides the scrollbar.
- `children: any` - Content of this section.
### `Slider`
@@ -821,6 +892,76 @@ the input, or successfully enter a number.
- `onDrag: (e, value) => void` - An event, which fires about every 500ms
when you drag the input up and down, on release and on manual editing.
### `Stack`
A higher-level component, that is based on [Flex](#flex). The main difference
from `Flex`, is that this component automatically adds spacing between
all stack items, reducing the boilerplate that you have to write!
Consists of two elements: `<Stack>` and `<Stack.Item>`.
Stacks can be vertical by adding a `vertical` property.
**Example:**
```jsx
<Stack>
<Stack.Item grow>
Button description
</Stack.Item>
<Stack.Item>
<Button>
Perform an action
</Button>
</Stack.Item>
</Stack>
```
**Example of a high-level window layout:**
Stacks can be used for high level window layout.
Make sure to use the `fill` property.
```jsx
<Window>
<Window.Content>
<Stack fill>
<Stack.Item>
<Section fill>
Sidebar
</Section>
</Stack.Item>
<Stack.Item grow>
<Stack fill vertical>
<Stack.Item grow>
<Section fill scrollable>
Main content
</Section>
</Stack.Item>
<Stack.Item>
<Section>
Bottom pane
</Section>
</Stack.Item>
</Stack>
</Stack.Item>
</Stack>
</Window.Content>
</Window>
```
**Props:**
- See inherited props: [Flex](#flex)
- `fill: boolean` - If set, stack will fill all available height.
- `vertical: boolean` - If set, stack will work in vertical mode.
### `Stack.Item`
**Props:**
- See inherited props: [Flex.Item](#flexitem)
### `Table`
A straight forward mapping to a standard html table, which is slightly
@@ -893,25 +1034,41 @@ Notice that tabs do not contain state. It is your job to track the selected
tab, handle clicks and place tab content where you need it. In return, you get
a lot of flexibility in regards to how you can layout your tabs.
Tabs also support a vertical configuration. This is usually paired with a
[Flex](#flex) component to render tab content to the right.
Tabs also support a vertical configuration. This is usually paired with
[Stack](#stack) to render tab content to the right.
```jsx
<Flex>
<Flex.Item>
<Stack>
<Stack.Item>
<Tabs vertical>
...
</Tabs>
</Flex.Item>
<Flex.Item grow={1} basis={0}>
</Stack.Item>
<Stack.Item grow={1} basis={0}>
Tab content.
</Flex.Item>
</Flex>
</Stack.Item>
</Stack>
```
If you need to combine a tab section with other elements, or if you want to
add scrollable functionality to tabs, pair them with the [Section](#section)
component:
```jsx
<Section fill fitted scrollable width="128px">
<Tabs vertical>
...
</Tabs>
... other things ...
</Section>
```
**Props:**
- See inherited props: [Box](#box)
- `fluid: boolean` - If true, tabs will take all available horizontal space.
- `fill: boolean` - Similarly to `fill` on [Section](#section), tabs will fill
all available vertical space. Only makes sense in a vertical configuration.
- `vertical: boolean` - Use a vertical configuration, where tabs will be
stacked vertically.
- `children: Tab[]` - This component only accepts tabs as its children.
@@ -942,18 +1099,17 @@ it is recommended to use that prop instead.
Usage:
```jsx
<Box position="relative">
Sample text.
<Tooltip
position="bottom"
content="Box tooltip" />
</Box>
<Tooltip position="bottom" content="Box tooltip">
<Box position="relative">
Sample text.
</Box>
</Tooltip>
```
**Props:**
- `position: string` - Tooltip position.
- `content/children: string` - Content of the tooltip. Must be a plain string.
- `position?: string` - Tooltip position. See [`Popper`](#Popper) for valid options. Defaults to "auto".
- `content: string` - Content of the tooltip. Must be a plain string.
Fragments or other elements are **not** supported.
## `tgui/layouts`
@@ -967,9 +1123,7 @@ it in one way or another.
Example:
```jsx
<Window
theme="hackerman"
resizable>
<Window theme="hackerman">
<Window.Content scrollable>
Hello, world!
</Window.Content>
@@ -978,11 +1132,14 @@ Example:
**Props:**
- See inherited props: [Box](#box)
- `className: string` - Applies a CSS class to the element.
- `theme: string` - A name of the theme.
- For a list of themes, see `packages/tgui/styles/themes`.
- `title: string` - Window title.
- `resizable: boolean` - Controls resizability of the window.
- `width: number` - Window width.
- `height: number` - Window height.
- `canClose: boolean` - Controls the ability to close the window.
- `children: any` - Child elements, which are rendered directly inside the
window. If you use a [Dimmer](#dimmer) or [Modal](#modal) in your UI,
they should be put as direct childs of a Window, otherwise you should be
@@ -995,6 +1152,8 @@ Can be scrollable.
**Props:**
- See inherited props: [Box](#box)
- `className: string` - Applies a CSS class to the element.
- `fitted: boolean` - If true, removes all padding.
- `scrollable: boolean` - Shows or hides the scrollbar.
- `children: any` - Main content of your window.