2020-10-01 05:30:59 +00:00
# Custom tab layouts
2020-10-07 04:57:41 +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 )
2020-10-01 05:30:59 +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:
2020-10-01 19:57:47 +00:00
```js
2020-10-01 05:41:25 +00:00
tabFormat: ["main-display",
2020-10-01 05:38:59 +00:00
["prestige-button", function(){return "Melt your points into "}],
2020-10-03 23:50:03 +00:00
"blank",
2020-10-01 05:38:59 +00:00
["display-text",
2020-10-01 05:30:59 +00:00
function() {return 'I have ' + format(player.points) + ' pointy points!'},
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
2020-10-01 05:38:59 +00:00
"blank",
["toggle", ["c", "beep"]],
2020-10-01 05:45:05 +00:00
"milestones", "blank", "blank", "upgrades"]
2020-10-01 19:57:47 +00:00
```
2020-10-01 05:30:59 +00:00
2020-10-13 03:08:19 +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.
2020-10-01 05:30:59 +00:00
These are the existing components, but you can create more in v.js:
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.
2020-10-01 05:30:59 +00:00
2020-10-13 22:56:17 +00:00
- raw-html: Displays some basic HTML, can also be a function.
2020-10-03 23:50:03 +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.
2020-10-01 05:30:59 +00:00
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.
- 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.
2020-10-01 05:30:59 +00:00
- main-display: The text that displays the main currency for the layer and its effects.
2020-10-18 00:23:39 +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)
2020-10-03 19:45:47 +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.
2020-10-01 05:30:59 +00:00
2020-10-15 01:43:16 +00:00
- upgrades, milestones, challs, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.
2020-10-01 05:30:59 +00:00
2020-10-11 20:16:36 +00:00
- buyables, clickables: Display all of the buyables/clickables for this layer, as appropriate. The argument optional,
and is the size of the boxes in pixels.
2020-10-01 05:30:59 +00:00
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.
2020-10-13 03:08:19 +00:00
- bar: Display a bar. The argument is the id of the bar to display.
2020-10-26 03:00:32 +00:00
- infobox: Display an infobox. The argument is the id of the infobox to display.
2020-10-03 19:45:47 +00:00
- toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, [layer, id]
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.
- upgrade, milestone, chall, 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.
