T-G-U-I
This commit is contained in:
Letter N
@@ -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,6 +40,7 @@ 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)
|
||||
- [`Table`](#table)
|
||||
@@ -246,7 +248,7 @@ 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`
|
||||
@@ -359,12 +361,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
|
||||
|
||||
@@ -529,6 +535,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.
|
||||
@@ -754,6 +776,38 @@ based on whether the value lands in the range between `from` and `to`.
|
||||
- `color: string` - Color of 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`
|
||||
|
||||
Section is a surface that displays content and actions on a single topic.
|
||||
@@ -993,6 +1047,7 @@ Example:
|
||||
- For a list of themes, see `packages/tgui/styles/themes`.
|
||||
- `title: string` - Window title.
|
||||
- `resizable: boolean` - Controls resizability of the window.
|
||||
- `noClose: 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
|
||||
|
||||
@@ -76,7 +76,8 @@ input. The input's `action` and `params` are passed to the proc.
|
||||
|
||||
```dm
|
||||
/obj/machinery/my_machine/ui_act(action, params)
|
||||
if(..())
|
||||
. = ..()
|
||||
if(.)
|
||||
return
|
||||
if(action == "change_color")
|
||||
var/new_color = params["color"]
|
||||
@@ -88,13 +89,20 @@ input. The input's `action` and `params` are passed to the proc.
|
||||
```
|
||||
|
||||
The `..()` (parent call) is very important here, as it is how we check that the
|
||||
user is allowed to use this interface (to avoid so-called href exploits). It is
|
||||
also very important to clamp and sanitize all input here. Always assume the user
|
||||
is attempting to exploit the game.
|
||||
user is allowed to use this interface (to avoid so-called href exploits). When
|
||||
any event has been handled `..()` will return `TRUE`. It is important to clamp
|
||||
and sanitize all input here. Always assume the user is attempting to exploit the
|
||||
game.
|
||||
|
||||
When `..()` has returned `TRUE` your interface can safely assume that the user's
|
||||
action has been handled already by some parent proc and you should not continue
|
||||
to handle this, instead preserving and returning the parent proc's return value.
|
||||
|
||||
Also note the use of `. = TRUE` (or `FALSE`), which is used to notify the UI
|
||||
that this input caused an update. This is especially important for UIs that do
|
||||
not auto-update, as otherwise the user will never see their change.
|
||||
that this input has been handled. When `ui_act` eventually returns, a value of
|
||||
`TRUE` indicates that the input has been handled and that the UI should update.
|
||||
This is important for UIs that do not auto-update, as otherwise the user will
|
||||
not be able to see the interface update based on thier actions.
|
||||
|
||||
### Frontend
|
||||
|
||||
|
||||
Reference in New Issue
Block a user