mirror of
https://github.com/Aurorastation/Aurora.3.git
synced 2026-08-25 05:51:56 +01:00
Prettier update (#21722)
No player-facing changes. Ports several PRs from tgstation, including: https://github.com/tgstation/tgstation/pull/66862 https://github.com/tgstation/tgstation/pull/80189 https://github.com/tgstation/tgstation/pull/90317 https://github.com/tgstation/tgstation/pull/91379 In addition, removes IntelliCode from the recommended extensions. This is deprecated, and we prefer not to force the replacement onto contributors. Contributors may individually choose to use this instead.
This commit is contained in:
Cody Brittain
+128
-171
@@ -68,14 +68,14 @@ Event handlers are callbacks that you can attack to various element to
|
||||
listen for browser events. Inferno supports camelcase (`onClick`) and
|
||||
lowercase (`onclick`) event names.
|
||||
|
||||
- Camel case names are what's called *synthetic* events, and are the
|
||||
**preferred way** of handling events in React, for efficiency and
|
||||
performance reasons. Please read
|
||||
[Inferno Event Handling](https://infernojs.org/docs/guides/event-handling)
|
||||
to understand what this is about.
|
||||
- Camel case names are what's called _synthetic_ events, and are the
|
||||
**preferred way** of handling events in React, for efficiency and
|
||||
performance reasons. Please read
|
||||
[Inferno Event Handling](https://infernojs.org/docs/guides/event-handling)
|
||||
to understand what this is about.
|
||||
- Lower case names are native browser events and should be used sparingly,
|
||||
for example when you need an explicit IE8 support. **DO NOT** use
|
||||
lowercase event handlers unless you really know what you are doing.
|
||||
for example when you need an explicit IE8 support. **DO NOT** use
|
||||
lowercase event handlers unless you really know what you are doing.
|
||||
|
||||
## `tgui/components`
|
||||
|
||||
@@ -87,13 +87,13 @@ This component provides animations for numeric values.
|
||||
|
||||
- `value: number` - Value to animate.
|
||||
- `initial: number` - Initial value to use in animation when element
|
||||
first appears. If you set initial to `0` for example, number will always
|
||||
animate starting from `0`, and if omitted, it will not play an initial
|
||||
animation.
|
||||
first appears. If you set initial to `0` for example, number will always
|
||||
animate starting from `0`, and if omitted, it will not play an initial
|
||||
animation.
|
||||
- `format: value => value` - Output formatter.
|
||||
- Example: `value => Math.round(value)`.
|
||||
- `children: (formattedValue, rawValue) => any` - Pull the animated number to
|
||||
animate more complex things deeper in the DOM tree.
|
||||
animate more complex things deeper in the DOM tree.
|
||||
- Example: `(_, value) => <Icon rotation={value} />`
|
||||
|
||||
### `BlockQuote`
|
||||
@@ -129,9 +129,7 @@ To workaround this problem, the Box children accept a render props function.
|
||||
This way, `Button` can pull out the `className` generated by the `Box`.
|
||||
|
||||
```jsx
|
||||
<Box color="primary">
|
||||
{props => <Button {...props} />}
|
||||
</Box>
|
||||
<Box color="primary">{(props) => <Button {...props} />}</Box>
|
||||
```
|
||||
|
||||
**Box Units**
|
||||
@@ -162,10 +160,10 @@ Default font size (`1rem`) is equal to `12px`.
|
||||
- `fontSize: number` - Font size.
|
||||
- `fontFamily: string` - Font family.
|
||||
- `lineHeight: number` - Directly affects the height of text lines.
|
||||
Useful for adjusting button height.
|
||||
Useful for adjusting button height.
|
||||
- `inline: boolean` - Forces the `Box` to appear as an `inline-block`,
|
||||
or in other words, makes the `Box` flow with the text instead of taking
|
||||
all available horizontal space.
|
||||
or in other words, makes the `Box` flow with the text instead of taking
|
||||
all available horizontal space.
|
||||
- `m: number` - Margin on all sides.
|
||||
- `mx: number` - Horizontal margin.
|
||||
- `my: number` - Vertical margin.
|
||||
@@ -198,7 +196,7 @@ all available horizontal space.
|
||||
- `#ffffff` - Hex format
|
||||
- `rgba(255, 255, 255, 1)` - RGB format
|
||||
- `purple` - Applies an atomic `color-<name>` class to the element.
|
||||
See `styles/color-map.scss`.
|
||||
See `styles/color-map.scss`.
|
||||
- `backgroundColor: string` - Sets background color.
|
||||
- `#ffffff` - Hex format
|
||||
- `rgba(255, 255, 255, 1)` - RGB format
|
||||
@@ -215,17 +213,17 @@ Buttons allow users to take actions, and make choices, with a single click.
|
||||
- `iconPosition?: string` - Set to `'right'` to align the icon to the right of the children
|
||||
- `color: string` - Button color, as defined in `variables.scss`.
|
||||
- There is also a special color `transparent` - makes the button
|
||||
transparent and slightly dim when inactive.
|
||||
transparent and slightly dim when inactive.
|
||||
- `disabled: boolean` - Disables and greys out the button.
|
||||
- `selected: boolean` - Activates the button (gives it a green color).
|
||||
- `tooltip: string` - A fancy, boxy tooltip, which appears when hovering
|
||||
over the button.
|
||||
over 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.
|
||||
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.
|
||||
over the button.
|
||||
- `children: any` - Content to render inside the button.
|
||||
- `onClick: function` - Called when element is clicked.
|
||||
- `verticalAlignContent: string` - Align content vertically using flex. Use lineHeight if the height is static.
|
||||
@@ -263,11 +261,11 @@ commit, while escape cancels.
|
||||
- See inherited props: [Box](#box)
|
||||
- `fluid`: fill available horizontal space
|
||||
- `onCommit: (e, value) => void`: function that is called after the user
|
||||
defocuses the input or presses enter
|
||||
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
|
||||
blank when hitting enter or defocusing. If left undefined, will cancel the
|
||||
change on a blank defocus/enter
|
||||
|
||||
### `ByondUi`
|
||||
|
||||
@@ -304,8 +302,8 @@ It supports a full set of `Box` properties for layout purposes.
|
||||
|
||||
- See inherited props: [Box](#box)
|
||||
- `params: any` - An object with parameters, which are directly passed to
|
||||
the `winset` proc call. You can find a full reference of these parameters
|
||||
in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html).
|
||||
the `winset` proc call. You can find a full reference of these parameters
|
||||
in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinparams.html).
|
||||
|
||||
### `Collapsible`
|
||||
|
||||
@@ -352,7 +350,7 @@ Works like the good old `<hr>` element, but it's fancier.
|
||||
|
||||
- `vertical: boolean` - Divide content vertically.
|
||||
- `hidden: boolean` - Divider can divide content without creating a dividing
|
||||
line.
|
||||
line.
|
||||
|
||||
### `Dropdown`
|
||||
|
||||
@@ -364,7 +362,7 @@ and displays selected entry.
|
||||
- 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
|
||||
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
|
||||
@@ -391,13 +389,9 @@ to the left, and certain elements to the right:
|
||||
|
||||
```jsx
|
||||
<Flex>
|
||||
<Flex.Item grow={1}>
|
||||
Button description
|
||||
</Flex.Item>
|
||||
<Flex.Item grow={1}>Button description</Flex.Item>
|
||||
<Flex.Item>
|
||||
<Button>
|
||||
Perform an action
|
||||
</Button>
|
||||
<Button>Perform an action</Button>
|
||||
</Flex.Item>
|
||||
</Flex>
|
||||
```
|
||||
@@ -410,17 +404,17 @@ effectively places the last flex item to the very end of the flex container.
|
||||
|
||||
- See inherited props: [Box](#box)
|
||||
- ~~`spacing: number`~~ - **Removed in tgui 4.3**,
|
||||
use [Stack](#stack) instead.
|
||||
use [Stack](#stack) instead.
|
||||
- `inline: boolean` - Makes flexbox container inline, with similar behavior
|
||||
to an `inline` property on a `Box`.
|
||||
to an `inline` property on a `Box`.
|
||||
- `direction: string` - This establishes the main-axis, thus defining the
|
||||
direction flex items are placed in the flex container.
|
||||
direction flex items are placed in the flex container.
|
||||
- `row` (default) - left to right.
|
||||
- `row-reverse` - right to left.
|
||||
- `column` - top to bottom.
|
||||
- `column-reverse` - bottom to top.
|
||||
- `wrap: string` - By default, flex items will all try to fit onto one line.
|
||||
You can change that and allow the items to wrap as needed with this property.
|
||||
You can change that and allow the items to wrap as needed with this property.
|
||||
- `nowrap` (default) - all flex items will be on one line
|
||||
- `wrap` - flex items will wrap onto multiple lines, from top to bottom.
|
||||
- `wrap-reverse` - flex items will wrap onto multiple lines from bottom to top.
|
||||
@@ -431,22 +425,22 @@ You can change that and allow the items to wrap as needed with this property.
|
||||
- `center` - items are centered on the cross axis.
|
||||
- `baseline` - items are aligned such as their baselines align.
|
||||
- `justify: string` - This defines the alignment along the main axis.
|
||||
It helps distribute extra free space leftover when either all the flex
|
||||
items on a line are inflexible, or are flexible but have reached their
|
||||
maximum size. It also exerts some control over the alignment of items
|
||||
when they overflow the line.
|
||||
It helps distribute extra free space leftover when either all the flex
|
||||
items on a line are inflexible, or are flexible but have reached their
|
||||
maximum size. It also exerts some control over the alignment of items
|
||||
when they overflow the line.
|
||||
- `flex-start` (default) - items are packed toward the start of the
|
||||
flex-direction.
|
||||
flex-direction.
|
||||
- `flex-end` - items are packed toward the end of the flex-direction.
|
||||
- `space-between` - items are evenly distributed in the line; first item is
|
||||
on the start line, last item on the end line
|
||||
on the start line, last item on the end line
|
||||
- `space-around` - items are evenly distributed in the line with equal space
|
||||
around them. Note that visually the spaces aren't equal, since all the items
|
||||
have equal space on both sides. The first item will have one unit of space
|
||||
against the container edge, but two units of space between the next item
|
||||
because that next item has its own spacing that applies.
|
||||
around them. Note that visually the spaces aren't equal, since all the items
|
||||
have equal space on both sides. The first item will have one unit of space
|
||||
against the container edge, but two units of space between the next item
|
||||
because that next item has its own spacing that applies.
|
||||
- `space-evenly` - items are distributed so that the spacing between any two
|
||||
items (and the space to the edges) is equal.
|
||||
items (and the space to the edges) is equal.
|
||||
- TBD (not all properties are supported in IE11).
|
||||
|
||||
### `Flex.Item`
|
||||
@@ -455,24 +449,24 @@ when they overflow the line.
|
||||
|
||||
- See inherited props: [Box](#box)
|
||||
- `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.
|
||||
However, the order property controls the order in which they appear in the
|
||||
flex container.
|
||||
- `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.
|
||||
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 | boolean` - This defines the ability for a flex item to
|
||||
shrink if necessary. Inverse of `grow`.
|
||||
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.
|
||||
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).
|
||||
Setting basis to `0` breaks the loop and fixes all of the problems.
|
||||
can sometimes end up in a circular dependency. This usually happens, when
|
||||
working with tables inside flex (they have wacky internal widths and such).
|
||||
Setting basis to `0` breaks the loop and fixes all of the problems.
|
||||
- `align: string` - This allows the default alignment (or the one specified by
|
||||
align-items) to be overridden for individual flex items. See: [Flex](#flex).
|
||||
align-items) to be overridden for individual flex items. See: [Flex](#flex).
|
||||
|
||||
### `Grid`
|
||||
|
||||
@@ -488,14 +482,10 @@ Example:
|
||||
```jsx
|
||||
<Grid>
|
||||
<Grid.Column>
|
||||
<Section title="Section 1">
|
||||
Hello world!
|
||||
</Section>
|
||||
<Section title="Section 1">Hello world!</Section>
|
||||
</Grid.Column>
|
||||
<Grid.Column size={2}>
|
||||
<Section title="Section 2">
|
||||
Hello world!
|
||||
</Section>
|
||||
<Section title="Section 2">Hello world!</Section>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
```
|
||||
@@ -521,6 +511,7 @@ 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`
|
||||
|
||||
@@ -529,10 +520,10 @@ transform names with `-o` suffixes to FA Regular icons. For example:
|
||||
- See inherited props: [Box](#box)
|
||||
- `name: string` - Icon name.
|
||||
- `size: number` - Icon size. `1` is normal size, `2` is two times bigger.
|
||||
Fractional numbers are supported.
|
||||
Fractional numbers are supported.
|
||||
- `rotation: number` - Icon rotation, in degrees.
|
||||
- `spin: boolean` - Whether an icon should be spinning. Good for load
|
||||
indicators.
|
||||
indicators.
|
||||
|
||||
### `Icon.Stack`
|
||||
|
||||
@@ -562,13 +553,13 @@ A basic text input, which allow users to enter text into a UI.
|
||||
- See inherited props: [Box](#box)
|
||||
- `value: string` - Value of an input.
|
||||
- `placeholder: string` - Text placed into Input box when it's empty,
|
||||
otherwise nothing. Clears automatically when focused.
|
||||
otherwise nothing. Clears automatically when focused.
|
||||
- `fluid: boolean` - Fill all available horizontal space.
|
||||
- `strict: boolean` - Prevent the onChange event from firing on unfocus.
|
||||
- `selfClear: boolean` - Clear after hitting enter, as well as remain focused
|
||||
when this happens. Useful for things like chat inputs.
|
||||
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.
|
||||
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.
|
||||
|
||||
### `Knob`
|
||||
@@ -584,30 +575,30 @@ Single click opens an input box to manually type in a number.
|
||||
- `animated: boolean` - Animates the value if it was changed externally.
|
||||
- `bipolar: boolean` - Knob can be bipolar or unipolar.
|
||||
- `size: number` - Relative size of the knob. `1` is normal size, `2` is two
|
||||
times bigger. Fractional numbers are supported.
|
||||
times bigger. Fractional numbers are supported.
|
||||
- `color: string` - Color of the outer ring around the knob.
|
||||
- `value: number` - Value itself, controls the position of the cursor.
|
||||
- `unit: string` - Unit to display to the right of value.
|
||||
- `minValue: number` - Lowest possible value.
|
||||
- `maxValue: number` - Highest possible value.
|
||||
- `fillValue: number` - If set, this value will be used to set the fill
|
||||
percentage of the outer ring independently of the main value.
|
||||
percentage of the outer ring independently of the main value.
|
||||
- `ranges: { color: [from, to] }` - Applies a `color` to the outer ring around
|
||||
the knob based on whether the value lands in the range between `from` and `to`.
|
||||
See an example of this prop in [ProgressBar](#progressbar).
|
||||
the knob based on whether the value lands in the range between `from` and `to`.
|
||||
See an example of this prop in [ProgressBar](#progressbar).
|
||||
- `step: number` (default: 1) - Adjust value by this amount when
|
||||
dragging the input.
|
||||
dragging the input.
|
||||
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
|
||||
to travel to adjust value by one `step`.
|
||||
to travel to adjust value by one `step`.
|
||||
- `format: value => value` - Format value using this function before
|
||||
displaying it.
|
||||
displaying it.
|
||||
- `suppressFlicker: number` - A number in milliseconds, for which the input
|
||||
will hold off from updating while events propagate through the backend.
|
||||
Default is about 250ms, increase it if you still see flickering.
|
||||
will hold off from updating while events propagate through the backend.
|
||||
Default is about 250ms, increase it if you still see flickering.
|
||||
- `onChange: (e, value) => void` - An event, which fires when you release
|
||||
the input, or successfully enter a number.
|
||||
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.
|
||||
when you drag the input up and down, on release and on manual editing.
|
||||
|
||||
### `LabeledControls`
|
||||
|
||||
@@ -635,9 +626,7 @@ column is labels, and second column is content.
|
||||
|
||||
```jsx
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Item">
|
||||
Content
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Item">Content</LabeledList.Item>
|
||||
</LabeledList>
|
||||
```
|
||||
|
||||
@@ -646,13 +635,7 @@ to perform some sort of action), there is a way to do that:
|
||||
|
||||
```jsx
|
||||
<LabeledList>
|
||||
<LabeledList.Item
|
||||
label="Item"
|
||||
buttons={(
|
||||
<Button>
|
||||
Click me!
|
||||
</Button>
|
||||
)}>
|
||||
<LabeledList.Item label="Item" buttons={<Button>Click me!</Button>}>
|
||||
Content
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
@@ -691,9 +674,7 @@ Example:
|
||||
|
||||
```jsx
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Foo">
|
||||
Content
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Foo">Content</LabeledList.Item>
|
||||
<LabeledList.Divider size={1} />
|
||||
</LabeledList>
|
||||
```
|
||||
@@ -739,22 +720,22 @@ to fine tune the value, or single click it to manually type a number.
|
||||
- `minValue: number` - Lowest possible value.
|
||||
- `maxValue: number` - Highest possible value.
|
||||
- `step: number` (default: 1) - Adjust value by this amount when
|
||||
dragging the input.
|
||||
dragging the input.
|
||||
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
|
||||
to travel to adjust value by one `step`.
|
||||
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.
|
||||
displaying it.
|
||||
- `suppressFlicker: number` - A number in milliseconds, for which the input
|
||||
will hold off from updating while events propagate through the backend.
|
||||
Default is about 250ms, increase it if you still see flickering.
|
||||
will hold off from updating while events propagate through the backend.
|
||||
Default is about 250ms, increase it if you still see flickering.
|
||||
- `onChange: (e, value) => void` - An event, which fires when you release
|
||||
the input, or successfully enter a number.
|
||||
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.
|
||||
when you drag the input up and down, on release and on manual editing.
|
||||
|
||||
### `Popper`
|
||||
|
||||
@@ -783,18 +764,19 @@ Usage of `ranges` prop:
|
||||
average: [0.25, 0.5],
|
||||
bad: [-Infinity, 0.25],
|
||||
}}
|
||||
value={0.6} />
|
||||
value={0.6}
|
||||
/>
|
||||
```
|
||||
|
||||
**Props:**
|
||||
|
||||
- `value: number` - Current progress as a floating point number between
|
||||
`minValue` (default: 0) and `maxValue` (default: 1). Determines the
|
||||
percentage and how filled the bar is.
|
||||
`minValue` (default: 0) and `maxValue` (default: 1). Determines the
|
||||
percentage and how filled the bar is.
|
||||
- `minValue: number` - Lowest possible value.
|
||||
- `maxValue: number` - Highest possible value.
|
||||
- `ranges: { color: [from, to] }` - Applies a `color` to the progress bar
|
||||
based on whether the value lands in the range between `from` and `to`.
|
||||
based on whether the value lands in the range between `from` and `to`.
|
||||
- `color: string` - Color of the progress bar. Can take any of the following formats:
|
||||
- `#ffffff` - Hex format
|
||||
- `rgb(r,g,b) / rgba(r,g,b,a)` - RGB format
|
||||
@@ -812,13 +794,14 @@ The RoundGauge component provides a visual representation of a single metric, as
|
||||
value={tankPressure}
|
||||
minValue={0}
|
||||
maxValue={pressureLimit}
|
||||
alertAfter={pressureLimit * 0.70}
|
||||
alertAfter={pressureLimit * 0.7}
|
||||
ranges={{
|
||||
"good": [0, pressureLimit * 0.70],
|
||||
"average": [pressureLimit * 0.70, pressureLimit * 0.85],
|
||||
"bad": [pressureLimit * 0.85, pressureLimit],
|
||||
good: [0, pressureLimit * 0.7],
|
||||
average: [pressureLimit * 0.7, pressureLimit * 0.85],
|
||||
bad: [pressureLimit * 0.85, pressureLimit],
|
||||
}}
|
||||
format={formatPressure} />
|
||||
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.
|
||||
@@ -846,22 +829,14 @@ clearly indicates hierarchy.
|
||||
Section can also be titled to clearly define its purpose.
|
||||
|
||||
```jsx
|
||||
<Section title="Cargo">
|
||||
Here you can order supply crates.
|
||||
</Section>
|
||||
<Section title="Cargo">Here you can order supply crates.</Section>
|
||||
```
|
||||
|
||||
If you want to have a button on the right side of an section title
|
||||
(for example, to perform some sort of action), there is a way to do that:
|
||||
|
||||
```jsx
|
||||
<Section
|
||||
title="Cargo"
|
||||
buttons={(
|
||||
<Button>
|
||||
Send shuttle
|
||||
</Button>
|
||||
)}>
|
||||
<Section title="Cargo" buttons={<Button>Send shuttle</Button>}>
|
||||
Here you can order supply crates.
|
||||
</Section>
|
||||
```
|
||||
@@ -895,23 +870,23 @@ Single click opens an input box to manually type in a number.
|
||||
- `minValue: number` - Lowest possible value.
|
||||
- `maxValue: number` - Highest possible value.
|
||||
- `fillValue: number` - If set, this value will be used to set the fill
|
||||
percentage of the progress bar filler independently of the main value.
|
||||
percentage of the progress bar filler independently of the main value.
|
||||
- `ranges: { color: [from, to] }` - Applies a `color` to the slider
|
||||
based on whether the value lands in the range between `from` and `to`.
|
||||
See an example of this prop in [ProgressBar](#progressbar).
|
||||
based on whether the value lands in the range between `from` and `to`.
|
||||
See an example of this prop in [ProgressBar](#progressbar).
|
||||
- `step: number` (default: 1) - Adjust value by this amount when
|
||||
dragging the input.
|
||||
dragging the input.
|
||||
- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
|
||||
to travel to adjust value by one `step`.
|
||||
to travel to adjust value by one `step`.
|
||||
- `format: value => value` - Format value using this function before
|
||||
displaying it.
|
||||
displaying it.
|
||||
- `suppressFlicker: number` - A number in milliseconds, for which the input
|
||||
will hold off from updating while events propagate through the backend.
|
||||
Default is about 250ms, increase it if you still see flickering.
|
||||
will hold off from updating while events propagate through the backend.
|
||||
Default is about 250ms, increase it if you still see flickering.
|
||||
- `onChange: (e, value) => void` - An event, which fires when you release
|
||||
the input, or successfully enter a number.
|
||||
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.
|
||||
when you drag the input up and down, on release and on manual editing.
|
||||
|
||||
### `Stack`
|
||||
|
||||
@@ -927,13 +902,9 @@ Stacks can be vertical by adding a `vertical` property.
|
||||
|
||||
```jsx
|
||||
<Stack>
|
||||
<Stack.Item grow>
|
||||
Button description
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>Button description</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Button>
|
||||
Perform an action
|
||||
</Button>
|
||||
<Button>Perform an action</Button>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
```
|
||||
@@ -948,9 +919,7 @@ Make sure to use the `fill` property.
|
||||
<Window.Content>
|
||||
<Stack fill>
|
||||
<Stack.Item>
|
||||
<Section fill>
|
||||
Sidebar
|
||||
</Section>
|
||||
<Section fill>Sidebar</Section>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<Stack fill vertical>
|
||||
@@ -960,9 +929,7 @@ Make sure to use the `fill` property.
|
||||
</Section>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Section>
|
||||
Bottom pane
|
||||
</Section>
|
||||
<Section>Bottom pane</Section>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
@@ -994,9 +961,7 @@ Example:
|
||||
```jsx
|
||||
<Table>
|
||||
<Table.Row>
|
||||
<Table.Cell bold>
|
||||
Hello world!
|
||||
</Table.Cell>
|
||||
<Table.Cell bold>Hello world!</Table.Cell>
|
||||
<Table.Cell collapsing color="label">
|
||||
Label
|
||||
</Table.Cell>
|
||||
@@ -1025,7 +990,7 @@ A straight forward mapping to `<td>` element.
|
||||
|
||||
- See inherited props: [Box](#box)
|
||||
- `collapsing: boolean` - Collapses table cell to the smallest possible size,
|
||||
and stops any text inside from wrapping.
|
||||
and stops any text inside from wrapping.
|
||||
|
||||
### `Tabs`
|
||||
|
||||
@@ -1061,9 +1026,7 @@ Tabs also support a vertical configuration. This is usually paired with
|
||||
```jsx
|
||||
<Stack>
|
||||
<Stack.Item>
|
||||
<Tabs vertical>
|
||||
...
|
||||
</Tabs>
|
||||
<Tabs vertical>...</Tabs>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow={1} basis={0}>
|
||||
Tab content.
|
||||
@@ -1077,9 +1040,7 @@ component:
|
||||
|
||||
```jsx
|
||||
<Section fill fitted scrollable width="128px">
|
||||
<Tabs vertical>
|
||||
...
|
||||
</Tabs>
|
||||
<Tabs vertical>...</Tabs>
|
||||
... other things ...
|
||||
</Section>
|
||||
```
|
||||
@@ -1089,9 +1050,9 @@ component:
|
||||
- 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.
|
||||
all available vertical space. Only makes sense in a vertical configuration.
|
||||
- `vertical: boolean` - Use a vertical configuration, where tabs will be
|
||||
stacked vertically.
|
||||
stacked vertically.
|
||||
- `children: Tab[]` - This component only accepts tabs as its children.
|
||||
|
||||
### `Tabs.Tab`
|
||||
@@ -1103,8 +1064,8 @@ a lot of `Button` props.
|
||||
|
||||
- See inherited props: [Button](#button)
|
||||
- `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.
|
||||
change) or by adding a white indicator to the selected tab.
|
||||
Intended for usage on interfaces where tab color has relevance.
|
||||
- `icon: string` - Tab icon.
|
||||
- `children: any` - Tab text.
|
||||
- `onClick: function` - Called when element is clicked.
|
||||
@@ -1121,9 +1082,7 @@ Usage:
|
||||
|
||||
```jsx
|
||||
<Tooltip position="bottom" content="Box tooltip">
|
||||
<Box position="relative">
|
||||
Sample text.
|
||||
</Box>
|
||||
<Box position="relative">Sample text.</Box>
|
||||
</Tooltip>
|
||||
```
|
||||
|
||||
@@ -1131,7 +1090,7 @@ Usage:
|
||||
|
||||
- `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.
|
||||
Fragments or other elements are **not** supported.
|
||||
|
||||
## `tgui/layouts`
|
||||
|
||||
@@ -1145,9 +1104,7 @@ Example:
|
||||
|
||||
```jsx
|
||||
<Window theme="hackerman">
|
||||
<Window.Content scrollable>
|
||||
Hello, world!
|
||||
</Window.Content>
|
||||
<Window.Content scrollable>Hello, world!</Window.Content>
|
||||
</Window>
|
||||
```
|
||||
|
||||
@@ -1162,9 +1119,9 @@ Example:
|
||||
- `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
|
||||
putting your content into [Window.Content](#windowcontent).
|
||||
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
|
||||
putting your content into [Window.Content](#windowcontent).
|
||||
|
||||
### `Window.Content`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user