tguichat and tgui4.1?
This commit is contained in:
Letter N
@@ -227,7 +227,7 @@ 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.
|
||||
- `content/children: any` - Content to render inside the button.
|
||||
- `children: any` - Content to render inside the button.
|
||||
- `onClick: function` - Called when element is clicked.
|
||||
|
||||
### `Button.Checkbox`
|
||||
@@ -389,7 +389,9 @@ to the left, and certain elements to the right:
|
||||
</Flex.Item>
|
||||
<Flex.Item grow={1} />
|
||||
<Flex.Item>
|
||||
<Button content="Perform an action" />
|
||||
<Button>
|
||||
Perform an action
|
||||
</Button>
|
||||
</Flex.Item>
|
||||
</Flex>
|
||||
```
|
||||
@@ -625,7 +627,9 @@ to perform some sort of action), there is a way to do that:
|
||||
<LabeledList.Item
|
||||
label="Item"
|
||||
buttons={(
|
||||
<Button content="Click me!" />
|
||||
<Button>
|
||||
Click me!
|
||||
</Button>
|
||||
)}>
|
||||
Content
|
||||
</LabeledList.Item>
|
||||
@@ -643,7 +647,7 @@ to perform some sort of action), there is a way to do that:
|
||||
- `label: string` - Item label.
|
||||
- `color: string` - Sets the color of the text.
|
||||
- `buttons: any` - Buttons to render aside the content.
|
||||
- `content/children: any` - Content of this labeled item.
|
||||
- `children: any` - Content of this labeled item.
|
||||
|
||||
### `LabeledList.Divider`
|
||||
|
||||
@@ -748,7 +752,7 @@ percentage and how filled the bar is.
|
||||
- `ranges: { color: [from, to] }` - Applies a `color` to the progress bar
|
||||
based on whether the value lands in the range between `from` and `to`.
|
||||
- `color: string` - Color of the progress bar.
|
||||
- `content/children: any` - Content to render inside the progress bar.
|
||||
- `children: any` - Content to render inside the progress bar.
|
||||
|
||||
### `Section`
|
||||
|
||||
@@ -773,7 +777,9 @@ If you want to have a button on the right side of an section title
|
||||
<Section
|
||||
title="Cargo"
|
||||
buttons={(
|
||||
<Button content="Send shuttle" />
|
||||
<Button>
|
||||
Send shuttle
|
||||
</Button>
|
||||
)}>
|
||||
Here you can order supply crates.
|
||||
</Section>
|
||||
@@ -784,7 +790,10 @@ If you want to have a button on the right side of an section title
|
||||
- `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.
|
||||
- `content/children: any` - Content of this section.
|
||||
- `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.
|
||||
|
||||
### `Slider`
|
||||
|
||||
@@ -953,7 +962,7 @@ Usage:
|
||||
**Props:**
|
||||
|
||||
- `position: string` - Tooltip position.
|
||||
- `content/children: string` - Content of the tooltip. Must be a plain string.
|
||||
- `content: string` - Content of the tooltip. Must be a plain string.
|
||||
Fragments or other elements are **not** supported.
|
||||
|
||||
## `tgui/layouts`
|
||||
@@ -978,6 +987,7 @@ Example:
|
||||
|
||||
**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`.
|
||||
@@ -995,6 +1005,8 @@ 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.
|
||||
|
||||
@@ -73,7 +73,6 @@ This might look a bit intimidating compared to the reactive part but it's not as
|
||||
You don't really need to know all this to understand how to use it, but I find it helps with understanding when things go wrong.
|
||||
|
||||
Ractive conditionals can have an `else` as well
|
||||
|
||||
```ractive
|
||||
{{#if data.condition}}
|
||||
value
|
||||
@@ -117,7 +116,7 @@ and you can mix string literals, values, and tags as well.
|
||||
Ractive has loops for iterating over data and inserting something for each
|
||||
member of an array or object
|
||||
|
||||
```ractive
|
||||
```
|
||||
{{#each data.list_of_foo}}
|
||||
foo {{number}} is here.
|
||||
{{/each}}
|
||||
@@ -136,7 +135,6 @@ Objects are represented by `{}`, arrays by `[]`
|
||||
`list("bla", "blo")` would become `["bla", "blo"]` and `list("foo" = 1, "bar" = 2)` would become `{"foo": 1, "bar": 2}`
|
||||
|
||||
First things first, above the `return` of the function you're making the interface in, you're going to want to add something like this
|
||||
|
||||
```jsx
|
||||
const things = data.things || [];
|
||||
```
|
||||
@@ -144,7 +142,6 @@ const things = data.things || [];
|
||||
This ensures that you'll never be reading a null entry by mistake. Substitute `{}` for objects as appropriate.
|
||||
|
||||
If it's an array, you'll want to do this in the template
|
||||
|
||||
```jsx
|
||||
{things.map(thing => (
|
||||
<Fragment>
|
||||
@@ -190,7 +187,7 @@ const fooArray = toArray(fooObject);
|
||||
|
||||
Also occasionally you'd see an else:
|
||||
|
||||
```ractive
|
||||
```
|
||||
{{#each data.potentially_empty_list}}
|
||||
Thing "{{name}}" is in this list!
|
||||
{{else}}
|
||||
@@ -223,7 +220,7 @@ This will be a reference of tgui components and the tgui-next equivalent.
|
||||
|
||||
Equivalent of `<ui-display>` is `<Section>`
|
||||
|
||||
```ractive
|
||||
```
|
||||
<ui-display title="Status">
|
||||
Contents
|
||||
</ui-display>
|
||||
@@ -239,7 +236,7 @@ becomes
|
||||
|
||||
A feature sometimes used is if `ui-display` has the `button` property, it will contain a `partial` command. This becomes the `buttons` property on `Section`:
|
||||
|
||||
```ractive
|
||||
```
|
||||
<ui-display title="Status" button>
|
||||
{{#partial button}}
|
||||
<ui-button /> // lots more button bullshit here
|
||||
@@ -266,7 +263,7 @@ Very important to note `ui-section` is NOT the equivalent of `Section`
|
||||
|
||||
`<ui-section>` does not have a direct equivalent, but the closest equivalent is `<LabeledList>`
|
||||
|
||||
```ractive
|
||||
```
|
||||
<ui-section label="power">
|
||||
No Power
|
||||
</ui-section>
|
||||
@@ -296,7 +293,7 @@ Also good to know that if you need the contents of a `LabeledList.Item` to be co
|
||||
|
||||
`<ui-notice>` has a direct equivalent in `<NoticeBox>`
|
||||
|
||||
```ractive
|
||||
```
|
||||
<ui-notice>
|
||||
Notice stuff!
|
||||
</ui-notice>
|
||||
@@ -314,7 +311,7 @@ becomes
|
||||
|
||||
The equivalent of `ui-button` is `Button` but it works quite a bit differently.
|
||||
|
||||
```ractive
|
||||
```
|
||||
<ui-button
|
||||
state='{{data.condition ? "disabled" : null}}'
|
||||
action="ui_action"
|
||||
|
||||
Reference in New Issue
Block a user