Tab Categories and Styling

Tab Categories and Styling

Butterfly API's creative tab builder supports categories and custom visual styling.

Use:

MOD.tabBuilder("main")

when a creative tab needs more control than a basic item group.

Creating a Category

Add a category with:

.category(
        "materials",
        Text.translatable(
                "itemGroup.example_mod.category.materials"
        ),
        category -> category
                .add(SILK_SCRAP)
                .add(POLISHED_SILK)
)

The first value:

materials

is the category ID.

The second value is the category's displayed name.

Translatable Category Names

Use Text.translatable(...) when the category should use your language files.

Text.translatable(
        "itemGroup.example_mod.category.materials"
)

Then add the translation:

{
  "itemGroup.example_mod.category.materials": "Materials"
}

Category names may also use literal Text values if translation is not required.

Category Alignment

Categories can be aligned to the left with:

.alignLeft()

Example:

.category(
        "materials",
        Text.translatable(
                "itemGroup.example_mod.category.materials"
        ),
        category -> category
                .alignLeft()
                .add(SILK_SCRAP)
)

Category Background Color

Set a category background color with:

.backgroundColor("#35303A")

Category Border Color

Set the category border with:

.borderColor("#665578")

Category Text Color

Set the category name color with:

.textColor("#FFE8F5")

Complete Styled Category

.category(
        "materials",
        Text.translatable(
                "itemGroup.example_mod.category.materials"
        ),
        category -> category
                .alignLeft()
                .backgroundColor("#35303A")
                .borderColor("#665578")
                .textColor("#FFE8F5")
                .add(SILK_SCRAP)
                .add(POLISHED_SILK)
)

Adding Entries

Add items to a category with:

.add(SILK_SCRAP)

Multiple entries can be added:

.add(SILK_SCRAP)
.add(POLISHED_SILK)
.add(EXAMPLE_TOOL)

Styling Individual Entries

An individual entry can override its slot color.

.entry(
        POLISHED_SILK,
        entry -> entry
                .slotColor("#463B51")
)

This allows individual items to visually differ from the normal slots in the tab.

Category Order

Use:

.categoryOrder(
        "materials",
        "tools"
)

to specify the order categories appear in.

The values correspond to the category IDs supplied when the categories were created.

Tab Background Texture

Set a custom background texture with:

.backgroundTexture(
        MOD.id(
                "textures/gui/example_tab.png"
        )
)

Example resource:

assets/example_mod/textures/gui/example_tab.png

Slot Background Color

Change the normal slot background with:

.slotBackgroundColor("#222222")

Between-Slots Color

Change the area between item slots with:

.betweenSlotsColor("#111111")

Tab Name Color

Set the displayed tab name color with:

.tabNameColor("#FFE8F5")

Search-Only Entries

An item can be searchable without appearing inside one of the visible categories.

.searchOnly(HIDDEN_DEBUG_ITEM)

Complete Example

public static final ItemGroup EXAMPLE_TAB =
        MOD.tabBuilder("main")
                .icon(SILK_SCRAP)
                .translationKey(
                        "itemGroup.example_mod.main"
                )
                .backgroundTexture(
                        MOD.id(
                                "textures/gui/example_tab.png"
                        )
                )
                .slotBackgroundColor("#222222")
                .betweenSlotsColor("#111111")
                .tabNameColor("#FFE8F5")

                .category(
                        "materials",
                        Text.translatable(
                                "itemGroup.example_mod.category.materials"
                        ),
                        category -> category
                                .alignLeft()
                                .backgroundColor("#35303A")
                                .borderColor("#665578")
                                .textColor("#FFE8F5")
                                .add(SILK_SCRAP)
                                .entry(
                                        POLISHED_SILK,
                                        entry -> entry
                                                .slotColor("#463B51")
                                )
                )

                .category(
                        "tools",
                        Text.translatable(
                                "itemGroup.example_mod.category.tools"
                        ),
                        category -> category
                                .backgroundColor("#2F3740")
                                .add(EXAMPLE_TOOL)
                )

                .categoryOrder(
                        "materials",
                        "tools"
                )
                .searchOnly(HIDDEN_DEBUG_ITEM)
                .build();

Related Pages

• Creative Tabs
• Resource Conventions
• Troubleshooting