import{_ as s,c as a,o,d as e}from"./app.c95a51e0.js";const F=JSON.parse('{"title":"Custom tab layouts","description":"","frontmatter":{},"headers":[],"relativePath":"public/kronos/docs/custom-tab-layouts.md","lastUpdated":null}'),t={name:"public/kronos/docs/custom-tab-layouts.md"},n=e(`

Custom tab layouts

Note: If you are using subtabs, tabFormat is used differently, but the same format is used for defining their layouts. See here for more on subtabs.

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:

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

`,9),l=[n];function p(r,i,c,y,D,u){return o(),a("div",null,l)}const d=s(t,[["render",p]]);export{F as __pageData,d as default};