Notice: This documentation might be out of date, so always check the source code to see the most up-to-date information.
- General Concepts
tgui/componentsAnimatedNumberBlockQuoteBoxButtonButton.CheckboxButton.ConfirmButton.InputByondUiCollapsibleColorBoxDimmerDividerDropdownFlexFlex.ItemGridGrid.ColumnIconIcon.StackInputKnobLabeledControlsLabeledControls.ItemLabeledListLabeledList.ItemLabeledList.DividerModalNoticeBoxNumberInputProgressBarRoundGaugeSectionSliderStackTableTable.RowTable.CellTabsTabs.TabTooltip
tgui/layouts
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
of styling options for all components, e.g. color and opacity, thus
it is used a lot in this framework.
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.
- 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 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 component does not support the lowercase
onclickevent. Use the camel caseonClickinstead.
This component provides animations for numeric values.
Props:
value: number- Value to animate.initial: number- Initial value to use in animation when element first appears. If you set initial to0for example, number will always animate starting from0, and if omitted, it will not play an initial animation.format: value => value- Output formatter.- Example:
value => Math.round(value).
- Example:
children: (formattedValue, rawValue) => any- Pull the animated number to animate more complex things deeper in the DOM tree.- Example:
(_, value) => <Icon rotation={value} />
- Example:
Just a block quote, just like this example in markdown:
Here's an example of a block quote.
Props:
- See inherited props: Box
The Box component serves as a wrapper component for most of the CSS utility
needs. It creates a new DOM element, a <div> by default that can be changed
with the as property. Let's say you want to use a <span> instead:
<Box as="span" m={1}>
<Button />
</Box>This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way.
However, sometimes you have to target the underlying DOM element. For instance, you want to change the text color of the button. The Button component defines its own color. CSS inheritance doesn't help.
To workaround this problem, the Box children accept a render props function.
This way, Button can pull out the className generated by the Box.
<Box color="primary">
{props => <Button {...props} />}
</Box>Box Units
Box units, like width, height and margins can be defined in two ways:
- By plain numbers
- 1 unit equals
1remfor width, height and positioning properties. - 1 unit equals
0.5remfor margins and paddings.
- 1 unit equals
- By strings with proper CSS units
- For example:
100px,2em,1rem,100%, etc.
- For example:
If you need more precision, you can always use fractional numbers.
Default font size (1rem) is equal to 12px.
Props:
as: string- The component used for the root node.color: string- Applies an atomiccolor-<name>class to the element.- See
styles/atomic/color.scss.
- See
width: number- Box width.minWidth: number- Box minimum width.maxWidth: number- Box maximum width.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 theBoxto appear as aninline-block, or in other words, makes theBoxflow with the text instead of taking all available horizontal space.m: number- Margin on all sides.mx: number- Horizontal margin.my: number- Vertical margin.mt: number- Top margin.mb: number- Bottom margin.ml: number- Left margin.mr: number- Right margin.p: number- Padding on all sides.px: number- Horizontal padding.py: number- Vertical padding.pt: number- Top padding.pb: number- Bottom padding.pl: number- Left padding.pr: number- Right padding.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)centerright
position: string- A direct mapping topositionCSS property.relative- Relative positioning.absolute- Absolute positioning.fixed- Fixed positioning.
color: string- An alias totextColor.textColor: string- Sets text color.#ffffff- Hex formatrgba(255, 255, 255, 1)- RGB formatpurple- Applies an atomiccolor-<name>class to the element. Seestyles/color-map.scss.
backgroundColor: string- Sets background color.#ffffff- Hex formatrgba(255, 255, 255, 1)- RGB format
Buttons allow users to take actions, and make choices, with a single click.
Props:
- See inherited props: Box
fluid: boolean- Fill all available horizontal space.icon: string- Adds an icon to the button.color: string- Button color, as defined invariables.scss.- There is also a special color
transparent- makes the button transparent and slightly dim when inactive.
- There is also a special color
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.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.
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.children: any- Content to render inside the button.onClick: function- Called when element is clicked.
A ghetto checkbox, made entirely using existing Button API.
Props:
- See inherited props: Button
checked: boolean- Boolean value, which marks the checkbox as checked.
A button with a an extra confirmation step, using native button component.
Props:
- See inherited props: Button
confirmContent: string- Text to display after first click; defaults to "Confirm?"confirmColor: string- Color to display after first click; defaults to "bad"
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
fluid: fill availible horizontal spaceonCommit: (e, value) => void: function that is called after the user defocuses the input or presses entercurrentValue: string: default string to display when the input is showndefaultValue: 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
Displays a BYOND UI element on top of the browser, and leverages browser's layout engine to position it just like any other HTML element. It is especially useful if you want to display a secondary game map in your interface.
Example (button):
<ByondUi
params={{
id: 'test_button', // optional, can be auto-generated
parent: 'some_container', // optional, defaults to the current window
type: 'button',
text: 'Hello, world!',
}} />
Example (map):
<ByondUi
params={{
id: 'test_map',
type: 'map',
}} />
It supports a full set of Box properties for layout purposes.
Props:
- See inherited props: Box
params: any- An object with parameters, which are directly passed to thewinsetproc call. You can find a full reference of these parameters in BYOND controls and parameters guide.
Displays contents when open, acts as a fluid button when closed. Click to toggle, closed by default.
Props:
- See inherited props: Box
children: any- What is collapsed when closedtitle: string- Text to display on the button for collapsingcolor: string- Color of the button; see Buttonbuttons: any- Buttons or other content to render inline with the button
Displays a 1-character wide colored square. Can be used as a status indicator, or for visually representing a color.
If you want to set a background color on an element, use a plain Box instead.
Props:
- See inherited props: Box
color: string- Color of the box.
Dims surrounding area to emphasize content placed inside.
Content is automatically centered inside the dimmer.
Props:
- See inherited props: Box
Draws a horizontal or vertical line, dividing a section into groups.
Works like the good old <hr> element, but it's fancier.
Props:
vertical: boolean- Divide content vertically.hidden: boolean- Divider can divide content without creating a dividing line.
A simple dropdown box component. Lets the user select from a list of options and displays selected entry.
Props:
- See inherited props: Box
- See inherited props: Icon
options: string[]- An array of strings which will be displayed in the dropdown when openselected: string- Currently selected entrywidth: number- Width of dropdown button and resulting menuover: boolean- Dropdown renders over instead of belowcolor: string- Color of dropdown buttonnochevron: boolean- Whether or not the arrow on the right hand side of the dropdown button is visiblenoscroll: boolean- Whether or not the dropdown menu should have a scroll bardisplayText: string- Text to always display in place of the selected textonClick: (e) => void- Called when dropdown button is clickedonSelected: (value) => void- Called when a value is picked from the list,valueis the value that was picked
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
If you are new to or unfamiliar with flexbox, we encourage you to read this CSS-Tricks flexbox guide.
Consists of two elements: <Flex> and <Flex.Item>. Both of them provide
the most straight-forward mapping to flex CSS properties as possible.
One of the most basic usage of flex, is to align certain elements to the left, and certain elements to the right:
<Flex>
<Flex.Item grow={1}>
Button description
</Flex.Item>
<Flex.Item>
<Button>
Perform an action
</Button>
</Flex.Item>
</Flex>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
spacing: numberinline: boolean- Makes flexbox container inline, with similar behavior to aninlineproperty on aBox.direction: string- This establishes the main-axis, thus defining the 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.nowrap(default) - all flex items will be on one linewrap- flex items will wrap onto multiple lines, from top to bottom.wrap-reverse- flex items will wrap onto multiple lines from bottom to top.
align: string- Default alignment of all children.stretch(default) - stretch to fill the container.start- items are placed at the start of the cross axis.end- items are placed at the end of the cross axis.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.flex-start(default) - items are packed toward the start of the 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 linespace-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.space-evenly- items are distributed so that the spacing between any two items (and the space to the edges) is equal.- TBD (not all properties are supported in IE11).
Props:
- See inherited props: 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.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 | boolean- This defines the ability for a flex item to shrink if necessary. Inverse ofgrow.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), anautoorcontentkeyword.- 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
0breaks the loop and fixes all of the problems.
- 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
align: string- This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. See: Flex.
Deprecated: This component is no longer recommended due to the variety of bugs that come with table-based layouts. We recommend using Flex instead.
Helps you to divide horizontal space into two or more equal sections.
It is essentially a single-row Table, but with some extra features.
Example:
<Grid>
<Grid.Column>
<Section title="Section 1">
Hello world!
</Section>
</Grid.Column>
<Grid.Column size={2}>
<Section title="Section 2">
Hello world!
</Section>
</Grid.Column>
</Grid>Props:
- See inherited props: Table
Props:
- See inherited props: Table.Cell
size: number(default: 1) - Size of the column relative to other columns.
Renders one of the FontAwesome icons of your choice.
<Icon name="plus" />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:
squarewill get transformed tofas squaresquare-owill get transformed tofar square
Props:
- See inherited props: Box
name: string- Icon name.size: number- Icon size.1is normal size,2is two times bigger. Fractional numbers are supported.rotation: number- Icon rotation, in degrees.spin: boolean- Whether an icon should be spinning. Good for load indicators.
Renders children icons on top of each other in order to make your own icon.
<Icon.Stack>
<Icon name="pen" />
<Icon name="slash" />
</Icon.Stack>Props:
- See inherited props: Box
children: Icon- Icons to stack.
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:
- See inherited props: Box
value: string- Value of an input.placeholder: string- Text placed into Input box when it's empty, 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.
A radial control, which allows dialing in precise values by dragging it up and down.
Single click opens an input box to manually type in a number.
Props:
- See inherited props: Box
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.1is normal size,2is two 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.ranges: { color: [from, to] }- Applies acolorto the outer ring around the knob based on whether the value lands in the range betweenfromandto. See an example of this prop in ProgressBar.step: number(default: 1) - Adjust value by this amount when dragging the input.stepPixelSize: number(default: 1) - Screen distance mouse needs to travel to adjust value by onestep.format: value => value- Format value using this function before 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.onChange: (e, value) => void- An event, which fires when you release 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.
LabeledControls is a horizontal grid, that is designed to hold various controls, like Knobs or small Buttons. Every item in this grid is labeled at the bottom.
Props:
- See inherited props: Box
children: LabeledControls.Item- Items to render.
Props:
- See inherited props: Box
label: string- Item label.
LabeledList is a continuous, vertical list of text and other content, where every item is labeled. It works just like a two column table, where first column is labels, and second column is content.
<LabeledList>
<LabeledList.Item label="Item">
Content
</LabeledList.Item>
</LabeledList>If you want to have a button on the right side of an item (for example, to perform some sort of action), there is a way to do that:
<LabeledList>
<LabeledList.Item
label="Item"
buttons={(
<Button>
Click me!
</Button>
)}>
Content
</LabeledList.Item>
</LabeledList>Props:
children: LabeledList.Item- Items to render.
Props:
label: string- Item label.color: string- Sets the color of the text.buttons: any- Buttons to render aside the content.children: any- Content of this labeled item.
Adds some empty space between LabeledList items.
Example:
<LabeledList>
<LabeledList.Item label="Foo">
Content
</LabeledList.Item>
<LabeledList.Divider size={1} />
</LabeledList>Props:
size: number- Size of the divider.
A modal window. Uses a Dimmer under the hood, and dynamically 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).
Props:
- See inherited props: Box
A notice box, which warns you about something very important.
Props:
- See inherited props: Box
info: boolean- Info boxsuccess: boolean- Success boxwarning: bolean- Warning boxdanger: boolean- Danger box
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:
animated: boolean- Animates the value if it was changed externally.fluid: boolean- Fill all available horizontal space.value: number- Value itself.unit: string- Unit to display to the right of value.minValue: number- Lowest possible value.maxValue: number- Highest possible value.step: number(default: 1) - Adjust value by this amount when dragging the input.stepPixelSize: number(default: 1) - Screen distance mouse needs to travel to adjust value by onestep.width: string|number- Width of the element, inBoxunits or pixels.height: string|numer- Height of the element, inBoxunits or pixels.lineHeight: string|number- lineHeight of the element, inBoxunits or pixels.fontSize: string|number- fontSize of the element, inBoxunits or pixels.format: value => value- Format value using this function before 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.onChange: (e, value) => void- An event, which fires when you release 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.
Progress indicators inform users about the status of ongoing processes.
<ProgressBar value={0.6} />Usage of ranges prop:
<ProgressBar
ranges={{
good: [0.5, Infinity],
average: [0.25, 0.5],
bad: [-Infinity, 0.25],
}}
value={0.6} />Props:
value: number- Current progress as a floating point number betweenminValue(default: 0) andmaxValue(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 acolorto the progress bar based on whether the value lands in the range betweenfromandto.color: string- Color of the progress bar.children: any- Content to render inside the progress bar.
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.
<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
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 inranges.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 is a surface that displays content and actions on a single topic.
They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed in them in a way that clearly indicates hierarchy.
Section can also be titled to clearly define its purpose.
<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:
<Section
title="Cargo"
buttons={(
<Button>
Send shuttle
</Button>
)}>
Here you can order supply crates.
</Section>- See inherited props: 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.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.
A horizontal, ProgressBar-like control, which allows dialing in precise values by dragging it left and right.
Single click opens an input box to manually type in a number.
Props:
- See inherited props: Box
animated: boolean- Animates the value if it was changed externally.color: string- Color of the slider.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 progress bar filler independently of the main value.ranges: { color: [from, to] }- Applies acolorto the slider based on whether the value lands in the range betweenfromandto. See an example of this prop in ProgressBar.step: number(default: 1) - Adjust value by this amount when dragging the input.stepPixelSize: number(default: 1) - Screen distance mouse needs to travel to adjust value by onestep.format: value => value- Format value using this function before 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.onChange: (e, value) => void- An event, which fires when you release 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.
A higher-level component, that is based on 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:
<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.
<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
fill: boolean- If set, stack will fill all available height.vertical: boolean- If set, stack will work in vertical mode.
Props:
- See inherited props: Flex.Item
A straight forward mapping to a standard html table, which is slightly
simplified (does not need a <tbody> tag) and with sane default styles
(e.g. table width is 100% by default).
Example:
<Table>
<Table.Row>
<Table.Cell bold>
Hello world!
</Table.Cell>
<Table.Cell collapsing color="label">
Label
</Table.Cell>
</Table.Row>
</Table>Props:
- See inherited props: Box
collapsing: boolean- Collapses table to the smallest possible size.
A straight forward mapping to <tr> element.
Props:
- See inherited props: Box
A straight forward mapping to <td> element.
Props:
- See inherited props: Box
collapsing: boolean- Collapses table cell to the smallest possible size, and stops any text inside from wrapping.
Tabs make it easy to explore and switch between different views.
Here is an example of how you would construct a simple tabbed view:
<Tabs>
<Tabs.Tab
selected={tabIndex === 1}
onClick={() => setTabIndex(1)}>
Tab one
</Tabs.Tab>
<Tabs.Tab
selected={tabIndex === 2}
onClick={() => setTabIndex(2)}>
Tab two
</Tabs.Tab>
</Tabs>
<Box>
Tab selected: {tabIndex}
</Box>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 component to render tab content to the right.
<Flex>
<Flex.Item>
<Tabs vertical>
...
</Tabs>
</Flex.Item>
<Flex.Item grow={1} basis={0}>
Tab content.
</Flex.Item>
</Flex>Props:
- See inherited props: Box
vertical: boolean- Use a vertical configuration, where tabs will be stacked vertically.children: Tab[]- This component only accepts tabs as its children.
An individual tab element. Tabs function like buttons, so they inherit
a lot of Button props.
Props:
- See inherited props: 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.icon: string- Tab icon.children: any- Tab text.onClick: function- Called when element is clicked.
A boxy tooltip from tgui 1. It is very hacky in its current state, and
requires setting position: relative on the container.
Please note, that Button component has a tooltip prop, and
it is recommended to use that prop instead.
Usage:
<Box position="relative">
Sample text.
<Tooltip
position="bottom"
content="Box tooltip" />
</Box>Props:
position: string- Tooltip position.content: string- Content of the tooltip. Must be a plain string. Fragments or other elements are not supported.
A root-level component, which draws the window chrome, titlebar, resize handlers, and controls the UI theme. All tgui interfaces must implement it in one way or another.
Example:
<Window
theme="hackerman"
resizable>
<Window.Content scrollable>
Hello, world!
</Window.Content>
</Window>Props:
- See inherited props: 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.
- For a list of themes, see
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 or Modal in your UI, they should be put as direct childs of a Window, otherwise you should be putting your content into Window.Content.
Canonical window content, which is usually the main target of window focus. Can be scrollable.
Props:
- See inherited props: 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.