The-Modding-Tree/docs/custom-tab-layouts.md

# Custom tab layouts

Note: If you are using subtabs, `tabFormat` is used differently, but you still use the same format within each subtabs. [See here for more on subtabs](subtabs-and-microtabs.md).

Custom tab layouts can be used to do basically anything in a tab window, especially combined with the "style" layer feature. The `tabFormat` feature is an array of things, like this:

```js
tabFormat: [
    "main-display",
    ["prestige-button", function() { return "Melt your points into " }],
    "blank",
    ["display-text",
        function() { return 'I have ' + format(player.points) + ' pointy points!' },
        { "color": "red", "font-size": "32px", "font-family": "Comic Sans MS" }],
    "blank",
    ["toggle", ["c", "beep"]],
    "milestones",
    "blank",
    "blank",
    "upgrades"
]
```

It is a list of components, which can be either just a name, or an array with arguments. If it's an array, the first item is the name of the component, the second is the data passed into it, and the third (optional) applies a CSS style to it with a "CSS object", where the keys are CSS attributes.

These are the existing components, but you can create more in [components.js](/js/components.js):

- display-text: Displays some text (can use basic HTML). The argument is the text to display. It can also be a function that returns updating text.

- raw-html: Displays some basic HTML, can also be a function.

- blank: Adds empty space. The default dimensions are 8px x 17px. The argument changes the dimensions. If it's a single value (e.g. "20px"), that determines the height. If you have a pair of arguments, the first is width and the second is height.

- row: Display a list of components horizontally. The argument is an array of components in the tab layout format.

- column: Display a list of components vertically. The argument is an array of components in the tab layout format. This is useful to display columns within a row.

- main-display: The text that displays the main currency for the layer and its effects.

- resource-display: The text that displays the currency that this layer is based on, as well as the best and/or total values for this layer's prestige currency (if they are put in `startData` for this layer).

- prestige-button: The argument is a string that the prestige button should say before the amount of currency you will gain. It can also be a function that returns updating text.

- upgrades: The layer's upgrades. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.

- milestones, challenges, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.

- buyables, clickables: Display all of the buyables/clickables for this layer, as appropriate. The argument is optional and is the size of the boxes in pixels.

- microtabs: Display a set of subtabs for an area. The argument is the name of the set of microtabs in the "microtabs" feature.

- bar: Display a bar. The argument is the id of the bar to display.

- infobox: Display an infobox. The argument is the id of the infobox to display.

- tree: Displays a tree. The argument is an array of arrays containing the names of the nodes in the tree (first by row, then by column)
    [See here for more information on tree layouts and nodes!](trees-and-tree-customization.md)

- toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, e.g. `[layer, id]`

The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.

- upgrade, milestone, challenge, buyable, clickable, achievement: An individual upgrade, challenge, etc. The argument is the id. This can be used if you want to have upgrades split up across multiple subtabs, for example.

- respec-button, master-button: The respec and master buttons for buyables and clickables, respectively.

- sell-one, sell-all: The "sell one" and "sell all" for buyables, respectively. The argument is the id of the buyable.
Added remaining documentation docs 2020-10-01 05:30:59 +00:00			`# Custom tab layouts`

Updated docs 2020-10-26 20:45:22 +00:00			Note: If you are using subtabs, `tabFormat` is used differently, but you still use the same format within each subtabs. [See here for more on subtabs](subtabs-and-microtabs.md).
Updated docs, did some minor fixes Updated documentation 2020-10-07 04:57:41 +00:00
Updated docs 2020-10-26 20:45:22 +00:00			Custom tab layouts can be used to do basically anything in a tab window, especially combined with the "style" layer feature. The `tabFormat` feature is an array of things, like this:
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
Docs: Switched code blocks to JS, added clarifications 2020-10-01 19:57:47 +00:00			```js
Updated docs 2020-10-26 20:45:22 +00:00			`tabFormat: [`
			`"main-display",`
			`["prestige-button", function() { return "Melt your points into " }],`
			`"blank",`
			`["display-text",`
			`function() { return 'I have ' + format(player.points) + ' pointy points!' },`
			`{ "color": "red", "font-size": "32px", "font-family": "Comic Sans MS" }],`
			`"blank",`
			`["toggle", ["c", "beep"]],`
			`"milestones",`
			`"blank",`
			`"blank",`
			`"upgrades"`
			`]`
Docs: Switched code blocks to JS, added clarifications 2020-10-01 19:57:47 +00:00			```
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
Updated docs 2020-10-26 20:45:22 +00:00			`It is a list of components, which can be either just a name, or an array with arguments. If it's an array, the first item is the name of the component, the second is the data passed into it, and the third (optional) applies a CSS style to it with a "CSS object", where the keys are CSS attributes.`
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
v2.2.3 Hide tooltips when value is "" Notify highlight when challenge can be complete "Can complete" style overrides "already completed" style Updates to docs 2020-11-28 07:44:17 +00:00			`These are the existing components, but you can create more in [components.js](/js/components.js):`
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
Test with Despacit Tree Delta, numerous fixes 2020-10-11 18:49:29 +00:00			`- display-text: Displays some text (can use basic HTML). The argument is the text to display. It can also be a function that returns updating text.`
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
Changed fullLayerReset to resetLayerData with ways to keep things 2020-10-13 22:56:17 +00:00			`- raw-html: Displays some basic HTML, can also be a function.`

Updated docs 2020-10-26 20:45:22 +00:00			`- blank: Adds empty space. The default dimensions are 8px x 17px. The argument changes the dimensions. If it's a single value (e.g. "20px"), that determines the height. If you have a pair of arguments, the first is width and the second is height.`
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
2.0.3 2020-10-16 15:39:39 +00:00			`- row: Display a list of components horizontally. The argument is an array of components in the tab layout format.`

Updated docs 2020-10-26 20:45:22 +00:00			`- column: Display a list of components vertically. The argument is an array of components in the tab layout format. This is useful to display columns within a row.`
2.0.3 2020-10-16 15:39:39 +00:00
Added remaining documentation docs 2020-10-01 05:30:59 +00:00			`- main-display: The text that displays the main currency for the layer and its effects.`

Updated docs 2020-10-26 20:45:22 +00:00			- resource-display: The text that displays the currency that this layer is based on, as well as the best and/or total values for this layer's prestige currency (if they are put in `startData` for this layer).
2.1.1 2020-10-18 00:23:39 +00:00
Updated docs 2020-10-26 20:45:22 +00:00			`- prestige-button: The argument is a string that the prestige button should say before the amount of currency you will gain. It can also be a function that returns updating text.`
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
A lot 2020-12-05 19:52:29 +00:00			`- upgrades: The layer's upgrades. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.`

			`- milestones, challenges, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.`
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
Updated docs 2020-10-26 20:45:22 +00:00			`- buyables, clickables: Display all of the buyables/clickables for this layer, as appropriate. The argument is optional and is the size of the boxes in pixels.`
Added remaining documentation docs 2020-10-01 05:30:59 +00:00
Updated docs, did some minor fixes Updated documentation 2020-10-07 04:57:41 +00:00			`- microtabs: Display a set of subtabs for an area. The argument is the name of the set of microtabs in the "microtabs" feature.`

Renamed many things to be more readable and updated docs 2020-10-13 03:08:19 +00:00			`- bar: Display a bar. The argument is the id of the bar to display.`

Update docs and made base optional 2020-10-26 03:00:32 +00:00			`- infobox: Display an infobox. The argument is the id of the infobox to display.`

Updated docs with tree things, other fixes 2020-11-07 20:29:39 +00:00			`- tree: Displays a tree. The argument is an array of arrays containing the names of the nodes in the tree (first by row, then by column)`
			`[See here for more information on tree layouts and nodes!](trees-and-tree-customization.md)`

Updated docs 2020-10-26 20:45:22 +00:00			- toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, e.g. `[layer, id]`
Added Sell buttons for buyables 2020-10-17 19:50:30 +00:00
			`The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.`

Updated docs 2020-10-26 20:45:22 +00:00			`- upgrade, milestone, challenge, buyable, clickable, achievement: An individual upgrade, challenge, etc. The argument is the id. This can be used if you want to have upgrades split up across multiple subtabs, for example.`
Added Sell buttons for buyables 2020-10-17 19:50:30 +00:00
			`- respec-button, master-button: The respec and master buttons for buyables and clickables, respectively.`

Updated docs 2020-10-26 20:45:22 +00:00			`- sell-one, sell-all: The "sell one" and "sell all" for buyables, respectively. The argument is the id of the buyable.`