Features
Images¶
icon:setImage(shopImageId)
Labels¶
icon:setLabel("Shop")
icon:setImage(shopImageId)
icon:setLabel("Shop")
Notices¶
icon:notify()
Themes¶
Themes are configurable tables of information that can be applied to icons to enhance their appearance and behaviour.
When constructed, an icon will automatically apply the 'Default' theme. To expand upon this, you can create your own theme modules under Icon -> Themes
) then apply these to your desired icons.
The Default theme and all theme settings can be found here.
Themes can be applied in two ways:
-
To all icons and future icons at once:
local Themes = require(game:GetService("ReplicatedStorage").Icon.Themes) IconController.setGameTheme(Themes.YourThemeName)
-
Individually to an icon:
local Themes = require(game:GetService("ReplicatedStorage").Icon.Themes) icon:setTheme(Themes.YourThemeName)
In this example, we'll apply the BlueGradient theme which automatically comes with TopbarPlus:
local iconModule = game:GetService("ReplicatedStorage").Icon
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)
IconController.setGameTheme(Themes["BlueGradient"])
Deselected
Selected
Dropdowns¶
Dropdowns are vertical navigation frames that contain an array of icons:
icon:set("dropdownSquareCorners", true)
icon:setDropdown({
Icon.new()
:setLabel("Category 1")
,
Icon.new()
:setLabel("Category 2")
,
Icon.new()
:setLabel("Category 3")
,
Icon.new()
:setLabel("Category 4")
:setName("CategoryFourIcon")
:bindEvent("selected", function(self)
print(("%s was selected!"):format(self.name))
end)
:bindEvent("deselected", function(self)
print(("%s was deselected!"):format(self.name))
end)
,
})
Menus¶
Menus are horizontal navigation frames that contain an array of icons:
icon:set("menuMaxIconsBeforeScroll", 2)
icon:setMenu({
Icon.new()
:setLabel("Category 1")
,
Icon.new()
:setLabel("Category 2")
,
Icon.new()
:setLabel("Category 3")
,
Icon.new()
:setLabel("Category 4")
:setName("CategoryFourIcon")
:bindEvent("selected", function(self)
print(("%s was selected!"):format(self.name))
end)
:bindEvent("deselected", function(self)
print(("%s was deselected!"):format(self.name))
end)
,
})
Captions¶
icon:setCaption("Shop Caption")
Tips¶
icon:setTip("Open Shop (v)")
Toggle Items¶
Binds a GuiObject (such as a frame) to appear or disappear when the icon is toggled
icon:bindToggleItem(shopFrame)
It is equivalent to doing:
icon.deselected:Connect(function()
shopFrame.Visible = false
end)
icon.selected:Connect(function()
shopFrame.Visible = true
end)
Toggle Keys¶
Binds a keycode which toggles the icon when pressed.
-- When the 'v' key is pressed, the shop icon will open
-- When pressed again it will close
icon:bindToggleKey(Enum.KeyCode.V)
Corners¶
icon:setCornerRadius(0, 0)
icon:setCornerRadius(0, 8)
icon:setCornerRadius(1, 0)
Alignments¶
-- Aligns the icon to the left of the screen (next to chat if present)
-- This is the default behaviour
icon:setLeft()
-- Aligns the icon in the middle of the screen
icon:setMid()
-- Aligns the icon to the right of the screen (next to (...) if present)
icon:setRight()
Console Support¶
Overflows¶
When accounting for many device types and screen sizes, icons may occasionally, particularly for smaller devices like phones, overlap with other icons or the bounds of the screen. TopbarPlus solves this problem with automatic overflows which prevent overlaps occuring.
An overflow will appear when left-set or right-set icons exceed the boundary of the:
- Viewport
- Closest enabled opposite-aligned icon
- Closest enabled center-aligned icon
These examples and more can be tested, viewed and edited at the Playground.