1.b ‐ KubeJs Developer

Setup

At first, download the latest KubeJs and ModernTabs version.

Creating and applying a tab design

You can simply create a new JavaScript/js file in the startup_scripts folder. This code can be used as an orientation:

// just an example color
const exampleColor = new SimpleColor("#36454F");

// The TabButtonStates class combines any possible state of the tab button sprite
// It uses the default vanilla sprite if it doesn't find a sprite in the given location
// the sprites for the icon background has to be located under textures/gui/sprites/creative_inventory/
// the sprite file for the icon background depends on: tab_tabIdentifer_row_column_selectionState.png
// example file name: tab_example_top_left_selected.png
// "example" is the tabIdentifier -> since v1.7.0 you can use: /moderntabs listTabs <yourModId>
// -> this command will list all registered tab identifiers of the mod you have specified 
// -> if you don't know which identifier belongs to which tab, then you have to try to test it. But most of the time it will be named regarding its use case.
const exampleTabButtonStates = new TabButtonStates("examplemod", "example");

// in this example the first argument represents the text background color
// the second argument defines the location of the sprite file and the third and fourth defines the rendered width and height of the example_titel.png
// the sprite file has to be in the sprites folder (in this example under: textures/gui/sprites/creative_inventory/example_titel.png)
const spriteTabTitel = new SpriteTabTitel()
                       // the location of the titel sprite
                       .spriteTabTitelLocation("examplemod:container/creative_inventory/example_titel")
                       // the background color
                       // if you don't copy the color, the initial color will also be changed for other elements
                       .backgroundColor(simpleColor.toComplex().lighten(0.5))
                       // sprite width
                       .width(64)
                       // sprite height
                       .height(10);

// in this example the first argument represents the text background color
// the second argument defines the location of the sprite file and the third and fourth defines the rendered width and height of the example_titel.png
// the sprite file has to be in the sprites folder (in this example under: textures/gui/sprites/...)
const exampleSearchbar = new Searchbar()
                       // the orientated position of the search bar element
                       .orientation(ElementOrientation.RIGHT)
                       // defines a custom search bar sprite
                       .searchbarLocation("examplemod:example_searchbar")
                       // the sprite width
                       .width(64)
                       // the sprite height
                       .height(10)
                       // defines a custom font sprite that will be used by the searchbar
                       .font("examplemod:example_font")
                       // adjusts the width of the edit box from the search bar
                       .editBoxWidth(89)
                       // adjusts the height of the edit box from the search bar
                       .editBoxHeight(9);

// create a new tab design
const tabDesign = new TabDesign()
        // makes it possible for the defined creative tab to use custom sections
        // since v1.7.0: no need for using a boolean value 
        // currently disabled by default
        .withSections()
        // disables that the amount of visible/rendered slot rows can be lower than 5
        // currently enabled by default
        .allowLessVisibleRows(false)
        // defines a custom filler location that will be applied if allowLessVisibleRows is true
        // this sprite covers the unused slots
        // if not defined the default filler sprite will be used
        .fillerLocation("examplemod:example_filler")
        // changes the tab button sprite in any given state
        .tabButtonStates(exampleTabButtonStates)
        // displays a sprite instance of an regular Minecraft item.
        // the sprite for the custom icon has to be located under textures/gui/sprites/
        .iconLocation("examplemod:example_icon")
        // changes the sprite for the scrollbar
        // the scrollbar for the custom icon has to be located under textures/gui/sprites/
        .scrollerLocation("examplemod:example_scroller")
        // modifies your creative tab titel
        // options: 1) aura text style (equivalent to the text of the creative tab banners)
        //          2) sprite (uses a sprite as your creative tab titel)
        //          3) custom (uses the default vanilla style text rendering, but with more configuration options like the text color)
        .customTabTitel(spriteTabTitel)
        // this method enables the searchbar by using the default configuration (-> new Searchbar())
        .withSearchbar()
        // adds all your changes you did to the searchbar and enables it by doing that (no need for .withSearchbar())
        .searchbar(exampleSearchbar)
        // sets only the creative tab background texture color and the scrollbar texture color
        .backgroundColor(exampleColor)
        // this method combines the backgroundColor method and the tabIconBackground method, so you can color the whole tab in a single method call
        .color(exampleColor);

// use your already registered creative tab (in this example: EXAMPLE_TAB)
ModernTabs.configureTab("examplemod:example_tab", tabDesign);

// this defines which items are included in which section
// the item has to already be included in the content of the tab
// for creating a section you need to define a json file in your assets folder (scroll down a little, if you want to know how create a section)
SectionUtil.addItem("examplemod:example_tab", "examplemod:example_item");

// you can also add multiple items by using a list of items instead of just one item
SectionUtil.addItems("examplemod:example_tab", ["examplemod:example_item", "examplemod:example_debug_item"]);

// hide a debug item from the grid but keep it searchable
// other option is ItemVisibility.INVISIBLE
SectionUtil.setVisibility("examplemod:example_debug_item", ItemVisibility.SEARCH_ONLY);

If you want to have custom sections you also need to look at

2 - Creating own sections →