shikix/GS13NG
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Kills old TGUI, hardsyncs TGUI to 3.0

Browse Source
This commit is contained in:
Artur
2020-04-23 13:31:48 +03:00
parent 321902c35a
commit fe26034410
431 changed files with 2381 additions and 34240 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/docs/component-reference.md
+62 -63
View File
@@ -54,32 +54,25 @@ Make sure to add new items to this list if you document new components.
These are the components which you can use for interface construction.
If you have trouble finding the exact prop you need on a component,
please note, that most of these components inherit from other basic
components, such as `Box`. This component in particular provides a lot
components, such as [Box](#box). This component in particular provides a lot
of styling options for all components, e.g. `color` and `opacity`, thus
it is used a lot in this framework.
There are a few important semantics you need to know about:
**Event handlers.**
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.
- Some elements support a `content` prop, which is a synonym to a
`children` prop.
- `content` is better used when your element is a self-closing tag
(like `<Button content="Hello" />`), and when content is small and simple
enough to fit in a prop. Keep in mind, that this prop is **not** native
to React, and is only available on these components: `Button`, `Tooltip`.
- You should never use `children` explicitly as a prop on an element.
Instead open a full tag, and place children or text inside the tag.
- Inferno supports both 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.
- 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.
- [Button](#button) component does not support lowercase `onclick` event.
Use the camel case `onClick` instead.
- 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.
- [Button](#button) component does not support the lowercase `onclick` event.
Use the camel case `onClick` instead.
## `tgui/components`
@@ -87,7 +80,7 @@ event names.
This component provides animations for numeric values.
Props:
**Props:**
- `value: number` - Value to animate.
- `initial: number` - Initial value to use in animation when element
@@ -106,7 +99,7 @@ Just a block quote, just like this example in markdown:
> Here's an example of a block quote.
Props:
**Props:**
- See inherited props: [Box](#box)
@@ -138,15 +131,21 @@ This way, `Button` can pull out the `className` generated by the `Box`.
</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`).
**Box Units**
`Box` units, like width, height and margins can be defined in two ways:
- By plain numbers
- 1 unit equals `1rem` for width, height and positioning properties.
- 1 unit equals `0.5rem` for margins and paddings.
- By strings with proper CSS units
- For example: `100px`, `2em`, `1rem`, `100%`, etc.
Units which are used in `Box` are `0.5em`, which are half font-size.
Default font size is `12px`, so each unit is effectively `6px` in size.
If you need more precision, you can always use fractional numbers.
Props:
Default font size (`1rem`) is equal to `12px`.
**Props:**
- `as: string` - The component used for the root node.
- `color: string` - Applies an atomic `color-<name>` class to the element.
@@ -204,7 +203,7 @@ all available horizontal space.
Buttons allow users to take actions, and make choices, with a single click.
Props:
**Props:**
- See inherited props: [Box](#box)
- `fluid: boolean` - Fill all available horizontal space.
@@ -233,7 +232,7 @@ over the button.
A ghetto checkbox, made entirely using existing Button API.
Props:
**Props:**
- See inherited props: [Button](#button)
- `checked: boolean` - Boolean value, which marks the checkbox as checked.
@@ -242,7 +241,7 @@ Props:
A button with a an extra confirmation step, using native button component.
Props:
**Props:**
- See inherited props: [Button](#button)
- `confirmMessage: string` - Text to display after first click; defaults to "Confirm?"
@@ -254,7 +253,7 @@ 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:
**Props:**
- See inherited props: [Box](#box)
- `fluid`: fill availible horizontal space
@@ -297,7 +296,7 @@ Example (map):
It supports a full set of `Box` properties for layout purposes.
Props:
**Props:**
- See inherited props: [Box](#box)
- `params: any` - An object with parameters, which are directly passed to
@@ -309,7 +308,7 @@ in [BYOND controls and parameters guide](https://secure.byond.com/docs/ref/skinp
Displays contents when open, acts as a fluid button when closed. Click to
toggle, closed by default.
Props:
**Props:**
- See inherited props: [Box](#box)
- `children: any` - What is collapsed when closed
@@ -325,7 +324,7 @@ or for visually representing a color.
If you want to set a background color on an element, use a plain
[Box](#box) instead.
Props:
**Props:**
- See inherited props: [Box](#box)
- `color: string` - Color of the box.
@@ -336,7 +335,7 @@ Dims surrounding area to emphasize content placed inside.
Content is automatically centered inside the dimmer.
Props:
**Props:**
- See inherited props: [Box](#box)
@@ -345,7 +344,7 @@ Props:
Draws a horizontal or vertical line, dividing a section into groups.
Works like the good old `<hr>` element, but it's fancier.
Props:
**Props:**
- `vertical: boolean` - Divide content vertically.
- `hidden: boolean` - Divider can divide content without creating a dividing
@@ -356,7 +355,7 @@ line.
A simple dropdown box component. Lets the user select from a list of options
and displays selected entry.
Props:
**Props:**
- See inherited props: [Box](#box)
- `options: string[]` - An array of strings which will be displayed in the
@@ -397,7 +396,7 @@ to the left, and certain elements to the right:
Flex item with `grow` property serves as a "filler", to separate the other
two flex items as far as possible from each other.
Props:
**Props:**
- See inherited props: [Box](#box)
- `spacing: number` - Spacing between flex items, in integer units
@@ -444,7 +443,7 @@ when they overflow the line.
### `Flex.Item`
Props:
**Props:**
- See inherited props: [Box](#box)
- `order: number` - By default, flex items are laid out in the source order.
@@ -493,13 +492,13 @@ Example:
</Grid>
```
Props:
**Props:**
- See inherited props: [Table](#table)
### `Grid.Column`
Props:
**Props:**
- See inherited props: [Table.Cell](#tablecell)
- `size: number` (default: 1) - Size of the column relative to other columns.
@@ -517,7 +516,7 @@ 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`
Props:
**Props:**
- See inherited props: [Box](#box)
- `name: string` - Icon name.
@@ -534,7 +533,7 @@ A basic text input, which allow users to enter text into a UI.
> Input does not support custom font size and height due to the way
> it's implemented in CSS. Eventually, this needs to be fixed.
Props:
**Props:**
- See inherited props: [Box](#box)
- `value: string` - Value of an input.
@@ -554,7 +553,7 @@ up and down.
Single click opens an input box to manually type in a number.
Props:
**Props:**
- See inherited props: [Box](#box)
- `animated: boolean` - Animates the value if it was changed externally.
@@ -614,13 +613,13 @@ to perform some sort of action), there is a way to do that:
</LabeledList>
```
Props:
**Props:**
- `children: LabeledList.Item` - Items to render.
### `LabeledList.Item`
Props:
**Props:**
- `label: string` - Item label.
- `color: string` - Sets the color of the text.
@@ -642,7 +641,7 @@ Example:
</LabeledList>
```
Props:
**Props:**
- `size: number` - Size of the divider.
@@ -653,7 +652,7 @@ adjusts its own size to fit the content you're trying to display.
Must be a direct child of a layout component (e.g. [Window](#window)).
Props:
**Props:**
- See inherited props: [Box](#box)
@@ -661,7 +660,7 @@ Props:
A notice box, which warns you about something very important.
Props:
**Props:**
- See inherited props: [Box](#box)
- `info: boolean` - Info box
@@ -674,7 +673,7 @@ Props:
A fancy, interactive number input, which you can either drag up and down
to fine tune the value, or single click it to manually type a number.
Props:
**Props:**
- `animated: boolean` - Animates the value if it was changed externally.
- `fluid: boolean` - Fill all available horizontal space.
@@ -720,7 +719,7 @@ Usage of `ranges` prop:
value={0.6} />
```
Props:
**Props:**
- `value: number` - Current progress as a floating point number between
`minValue` (default: 0) and `maxValue` (default: 1). Determines the
@@ -775,7 +774,7 @@ in precise values by dragging it left and right.
Single click opens an input box to manually type in a number.
Props:
**Props:**
- See inherited props: [Box](#box)
- `animated: boolean` - Animates the value if it was changed externally.
@@ -824,7 +823,7 @@ Example:
</Table>
```
Props:
**Props:**
- See inherited props: [Box](#box)
- `collapsing: boolean` - Collapses table to the smallest possible size.
@@ -833,7 +832,7 @@ Props:
A straight forward mapping to `<tr>` element.
Props:
**Props:**
- See inherited props: [Box](#box)
@@ -841,7 +840,7 @@ Props:
A straight forward mapping to `<td>` element.
Props:
**Props:**
- See inherited props: [Box](#box)
- `collapsing: boolean` - Collapses table cell to the smallest possible size,
@@ -891,7 +890,7 @@ Tabs also support a vertical configuration. This is usually paired with a
</Flex>
```
Props:
**Props:**
- See inherited props: [Box](#box)
- `vertical: boolean` - Use a vertical configuration, where tabs will be
@@ -903,7 +902,7 @@ stacked vertically.
An individual tab element. Tabs function like buttons, so they inherit
a lot of `Button` props.
Props:
**Props:**
- See inherited props: [Button](#button)
- `altSelection` - Whether the tab buttons select via standard select (color
@@ -932,7 +931,7 @@ Usage:
</Box>
```
Props:
**Props:**
- `position: string` - Tooltip position.
- `content/children: string` - Content of the tooltip. Must be a plain string.
@@ -958,7 +957,7 @@ Example:
</Window>
```
Props:
**Props:**
- `className: string` - Applies a CSS class to the element.
- `theme: string` - A name of the theme.
@@ -974,7 +973,7 @@ putting your content into [Window.Content](#windowcontent).
Canonical window content, which is usually the main target of window focus.
Can be scrollable.
Props:
**Props:**
- `className: string` - Applies a CSS class to the element.
- `scrollable: boolean` - Shows or hides the scrollbar.