` element.
**Props:**
- See inherited props: [Box](#box)
### `Table.Cell`
A straight forward mapping to `| ` element.
**Props:**
- See inherited props: [Box](#box)
- `collapsing: boolean` - Collapses table cell to the smallest possible size,
and stops any text inside from wrapping.
### `Tabs`
Tabs make it easy to explore and switch between different views.
Here is an example of how you would construct a simple tabbed view:
```jsx
setTabIndex(1)}>
Tab one
setTabIndex(2)}>
Tab two
Tab selected: {tabIndex}
```
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
[Stack](#stack) to render tab content to the right.
```jsx
...
Tab content.
```
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
```
**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.
### `Tabs.Tab`
An individual tab element. Tabs function like buttons, so they inherit
a lot of `Button` props.
**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.
- `icon: string` - Tab icon.
- `children: any` - Tab text.
- `onClick: function` - Called when element is clicked.
### `Tooltip`
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](#button) component has a `tooltip` prop, and
it is recommended to use that prop instead.
Usage:
```jsx
Sample text.
```
**Props:**
- `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`
### `Window`
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:
```jsx
Hello, world!
```
**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.
- `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
putting your content into [Window.Content](#windowcontent).
### `Window.Content`
Canonical window content, which is usually the main target of window focus.
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.
|