diff --git a/.github/workflows/PublishWally.yml b/.github/workflows/PublishWally.yml index d96b5fc..62db9e7 100644 --- a/.github/workflows/PublishWally.yml +++ b/.github/workflows/PublishWally.yml @@ -1,8 +1,9 @@ name: Publish package to Wally on: - release: - types: [published] + push: + branches: # Act on main branch commit + - main jobs: publish: diff --git a/site/api/index.html b/site/api/index.html index 86898d9..38515fe 100644 --- a/site/api/index.html +++ b/site/api/index.html @@ -1678,19 +1678,23 @@

destroyEvents

selected

-
icon.selected:Connect(function()
-    print("The icon was selected")
+
icon.selected:Connect(function(fromSource)
+    -- fromSource can be useful for checking if the behaviour was triggered by a user (such as clicking)
+    -- fromSource values include "User", "OneClick", "AutoDeselect", "HideParentFeature", "Overflow"
+    local sourceName = fromSource or "Unknown"
+    print("The icon was selected by the "..sourceName)
 end)
 

 

 
deselected

-
icon.deselected:Connect(function()
-    print("The icon was deselected")
+
icon.deselected:Connect(function(fromSource)
+    local sourceName = fromSource or "Unknown"
+    print("The icon was deselected by the "..sourceName)
 end)
 

 

 
toggled

-
icon.toggled:Connect(function(isSelected)
+
icon.toggled:Connect(function(isSelected, fromSource)
     local stateName = (isSelected and "selected") or "deselected"
     print(`The icon was {stateName}!`)
 end)
diff --git a/site/installation/index.html b/site/installation/index.html
index cd4ddea..4bb6f89 100644
--- a/site/installation/index.html
+++ b/site/installation/index.html
@@ -380,6 +380,13 @@
     With Rojo
   
   
+
+      
+        
  • 
+  
+    With Wally
+  
+  
 
    • 
       
     
@@ -483,6 +490,13 @@
     With Rojo
   
   
+
+      
+        
  • 
+  
+    With Wally
+  
+  
 
    • 
       
     
@@ -546,6 +560,9 @@ 
    With RojoWith Wally
    
+
    TopbarPlus is now on Wally! You can find it here.
    
 
 
 
diff --git a/site/search/search_index.json b/site/search/search_index.json
index a39b42a..33ca01c 100644
--- a/site/search/search_index.json
+++ b/site/search/search_index.json
@@ -1 +1 @@
-{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"About \u00b6 TopbarPlus is a module enabling the construction of dynamic topbar icons. These icons can be enhanced with features and methods like themes, dropdowns and menus to expand upon their appearance and behaviour. TopbarPlus fully supports PC, Mobile, Tablet and Gamepads (Consoles), and comes with internal features such as 'overflows' to ensure icons remain within suitable bounds. Construction \u00b6 Creating an icon is as simple as: -- Within a LocalScript in StarterPlayerScripts and assuming the Icon package is placed in ReplicatedStorage local Icon = require ( game : GetService ( \"ReplicatedStorage\" ). Icon ) local icon = Icon . new () This constructs an empty 32x32 icon on the topbar. Info The order icons appear are determined by their construction sequence. Icons constructed first will have a smaller order therefore will appear left of icons with a higher order. You can modify this behaviour using icon:setOrder . To add an image and label, do: icon : setImage ( imageId ) icon : setLabel ( \"Label\" ) Chaining \u00b6 These methods are 'chainable' therefore can alternatively be called doing: Icon . new () : setImage ( imageId ) : setLabel ( \"Label\" ) You may want to act upon nested icons. You can achieve this using :call which returns the icon as the first argument within the function you pass: Icon . new () : setName ( \"TestIcon\" ) : call ( function ( icon ) print ( icon . name ) -- This will print 'TestIcon'! end ) Info Chainable methods have a chainable tag next to their name within the API Icon docs. States \u00b6 Sometimes you'll want an item to appear only when deselected and similarily only when selected . You can achieve this by specifying a string value within the iconState parameter of methods containing the toggleable tag. These are: \"Deselected\" -- Applies the value when the icon is deselected (i.e. not pressed) \"Selected\" -- Applies the value when the icon is selected (i.e. pressed) \"Viewing\" -- Formerly known as Hovering, applies the value when a cursor is hovering above, a controller highlighting, or touchpad (mobile) long-pressing (but before releasing) an icon Info If no iconState is specified (i.e. is nil) the value will be applied to all states. -- It doesn't matter if you do \"deselected\", \"Deselected\" or \"dEsElEcTeD\"; iconStates are not case sensitive Icon . new () : setImage ( 4882429582 ) : setLabel ( \"Closed\" , \"Deselected\" ) : setLabel ( \"Open\" , \"Selected\" ) : setLabel ( \"Viewing\" , \"Viewing\" ) Additional \u00b6 By default icons will deselect when another icon is selected. You can disable this behaviour doing: icon : autoDeselect ( false ) You can enhance icons further with features like modifyTheme, dropdowns and menus, or by binding GuiObjects and KeyCodes to their toggle. This and much more can be achieved by exploring the Feature Guide and Icon API . Have a question or issue? Feel free to reach out at the TopbarPlus DevForum Thread .","title":"Introduction"},{"location":"#about","text":"TopbarPlus is a module enabling the construction of dynamic topbar icons. These icons can be enhanced with features and methods like themes, dropdowns and menus to expand upon their appearance and behaviour. TopbarPlus fully supports PC, Mobile, Tablet and Gamepads (Consoles), and comes with internal features such as 'overflows' to ensure icons remain within suitable bounds.","title":"About"},{"location":"#construction","text":"Creating an icon is as simple as: -- Within a LocalScript in StarterPlayerScripts and assuming the Icon package is placed in ReplicatedStorage local Icon = require ( game : GetService ( \"ReplicatedStorage\" ). Icon ) local icon = Icon . new () This constructs an empty 32x32 icon on the topbar. Info The order icons appear are determined by their construction sequence. Icons constructed first will have a smaller order therefore will appear left of icons with a higher order. You can modify this behaviour using icon:setOrder . To add an image and label, do: icon : setImage ( imageId ) icon : setLabel ( \"Label\" )","title":"Construction"},{"location":"#chaining","text":"These methods are 'chainable' therefore can alternatively be called doing: Icon . new () : setImage ( imageId ) : setLabel ( \"Label\" ) You may want to act upon nested icons. You can achieve this using :call which returns the icon as the first argument within the function you pass: Icon . new () : setName ( \"TestIcon\" ) : call ( function ( icon ) print ( icon . name ) -- This will print 'TestIcon'! end ) Info Chainable methods have a chainable tag next to their name within the API Icon docs.","title":"Chaining"},{"location":"#states","text":"Sometimes you'll want an item to appear only when deselected and similarily only when selected . You can achieve this by specifying a string value within the iconState parameter of methods containing the toggleable tag. These are: \"Deselected\" -- Applies the value when the icon is deselected (i.e. not pressed) \"Selected\" -- Applies the value when the icon is selected (i.e. pressed) \"Viewing\" -- Formerly known as Hovering, applies the value when a cursor is hovering above, a controller highlighting, or touchpad (mobile) long-pressing (but before releasing) an icon Info If no iconState is specified (i.e. is nil) the value will be applied to all states. -- It doesn't matter if you do \"deselected\", \"Deselected\" or \"dEsElEcTeD\"; iconStates are not case sensitive Icon . new () : setImage ( 4882429582 ) : setLabel ( \"Closed\" , \"Deselected\" ) : setLabel ( \"Open\" , \"Selected\" ) : setLabel ( \"Viewing\" , \"Viewing\" )","title":"States"},{"location":"#additional","text":"By default icons will deselect when another icon is selected. You can disable this behaviour doing: icon : autoDeselect ( false ) You can enhance icons further with features like modifyTheme, dropdowns and menus, or by binding GuiObjects and KeyCodes to their toggle. This and much more can be achieved by exploring the Feature Guide and Icon API . Have a question or issue? Feel free to reach out at the TopbarPlus DevForum Thread .","title":"Additional"},{"location":"api/","text":"Functions \u00b6 getIcons \u00b6 local icons = Icon . getIcons () Returns a dictionary of icons where the key is the icon's UID and value the icon. getIcon \u00b6 local icon = Icon . getIcon ( nameOrUID ) Returns an icon of the given name or UID. setTopbarEnabled \u00b6 Icon . setTopbarEnabled ( bool ) When set to false all TopbarPlus ScreenGuis are hidden. This does not impact Roblox's Topbar. modifyBaseTheme \u00b6 Icon . modifyBaseTheme ( modifications ) Updates the appearance of all icons. See themes for more details. setDisplayOrder \u00b6 Icon . setDisplayOrder ( integer ) Sets the base DisplayOrder of all TopbarPlus ScreenGuis. Constructors \u00b6 new \u00b6 local icon = Icon . new () Constructs an empty 32x32 icon on the topbar. Methods \u00b6 setName \u00b6 {chainable} icon : set ( name ) Sets the name of the Widget instance. This can be used in conjunction with Icon.getIcon(name) . getInstance \u00b6 local instance = icon : getInstance ( instanceName ) Returns the first descendant found within the widget of name instanceName . modifyTheme \u00b6 {chainable} icon : modifyTheme ( modifications ) Updates the appearance of the icon. See themes for more details. modifyChildTheme \u00b6 {chainable} icon : modifyChildTheme ( modifications ) Updates the appearance of all icons that are parented to this icon (for example when a menu or dropdown). See themes for more details. setEnabled \u00b6 {chainable} icon : setEnabled ( bool ) When set to false the icon will be disabled and hidden. select \u00b6 {chainable} icon : select () Selects the icon (as if it were clicked once). deselect \u00b6 {chainable} icon : deselect () Deselects the icon (as if it were clicked, then clicked again). notify \u00b6 {chainable} icon : notify ( clearNoticeEvent ) Prompts a notice bubble which accumulates the further it is prompted. If the icon belongs to a dropdown or menu, then the notice will appear on the parent icon when the parent icon is deselected. clearNotices \u00b6 {chainable} icon : clearNotices () disableOverlay \u00b6 {chainable} icon : disableStateOverlay ( bool ) When set to true , disables the shade effect which appears when the icon is pressed and released. setImage \u00b6 {chainable} {toggleable} icon : setImage ( imageId , iconState ) Applies an image to the icon based on the given imaageId . imageId can be an assetId or a complete asset string. setLabel \u00b6 {chainable} {toggleable} icon : setLabel ( text , iconState ) setOrder \u00b6 {chainable} {toggleable} icon : setOrder ( order , iconState ) setCornerRadius \u00b6 {chainable} {toggleable} icon : setCornerRadius ( scale , offset , iconState ) align \u00b6 {chainable} icon : align ( alignment ) This enables you to set the icon to the \"Left\" (default), \"Center\" or \"Right\" side of the screen. See alignments for more details. setWidth \u00b6 {chainable} {toggleable} icon : setWidth ( minimumSize , iconState ) This sets the minimum width the icon can be (it can be larger for instance when setting a long label). The default width is 44 . setImageScale \u00b6 {chainable} {toggleable} icon : setImageScale ( number , iconState ) How large the image is relative to the icon. The default value is 0.5 . setImageRatio \u00b6 {chainable} {toggleable} icon : setImageRatio ( number , iconState ) How stretched the image will appear. The default value is 1 (a perfect square). setTextSize \u00b6 {chainable} {toggleable} icon : setTextSize ( number , iconState ) The size of the icon labels' text. The default value is 16 . setTextFont \u00b6 {chainable} {toggleable} icon : setTextFont ( font , fontWeight , fontStyle , iconState ) Sets the labels FontFace. font can be a font family name (such as \"Creepster\" ), a font enum (such as Enum.Font.Bangers ), a font ID (such as 12187370928 ) or font family link (such as \"rbxasset://fonts/families/Sarpanch.json\" ). bindToggleItem \u00b6 {chainable} icon : bindToggleItem ( guiObjectOrLayerCollector ) Binds a GuiObject or LayerCollector to appear and disappeared when the icon is toggled. unbindToggleItem \u00b6 {chainable} icon : unbindToggleItem ( guiObjectOrLayerCollector ) Unbinds the given GuiObject or LayerCollector from the toggle. bindEvent \u00b6 {chainable} icon : bindEvent ( iconEventName , callback ) Connects to an icon event with iconEventName . It's important to remember all event names are in camelCase. callback is called with arguments (self, ...) when the event is triggered. unbindEvent \u00b6 {chainable} icon : unbindEvent ( iconEventName ) Unbinds the connection of the associated iconEventName . bindToggleKey \u00b6 {chainable} icon : bindToggleKey ( keyCodeEnum ) Binds a keycode which toggles the icon when pressed. See toggle keys for more details. unbindToggleKey \u00b6 {chainable} icon : unbindToggleKey ( keyCodeEnum ) Unbinds the given keycode. call \u00b6 {chainable} icon : call ( func ) Calls the function immediately via task.spawn . The first argument passed is the icon itself. This is useful when needing to extend the behaviour of an icon while remaining in the chain. addToJanitor \u00b6 {chainable} icon : addToJanitor ( userdata ) Passes the given userdata to the icons janitor to be destroyed/disconnected on the icons destruction. If a function is passed, it will be called when the icon is destroyed. lock \u00b6 {chainable} icon : lock () Prevents the icon being toggled by user-input (such as clicking) however the icon can still be toggled via localscript using methods such as icon:select() . unlock \u00b6 {chainable} icon : unlock () Re-enables user-input to toggle the icon again. debounce \u00b6 {chainable} {yields} icon : debounce ( seconds ) Locks the icon, yields for the given time, then unlocks the icon, effectively shorthand for icon:lock() task.wait(seconds) icon:unlock() . This is useful for applying cooldowns (to prevent an icon from being pressed again) after an icon has been selected or deselected. autoDeselect \u00b6 {chainable} icon : autoDeselect ( true ) When set to true (the default) the icon is deselected when another icon (with autoDeselect enabled) is pressed. Set to false to prevent the icon being deselected when another icon is selected (a useful behaviour in dropdowns). oneClick \u00b6 {chainable} icon : oneClick ( bool ) When set to true the icon will automatically deselect when selected. This creates the effect of a single click button. setCaption \u00b6 {chainable} icon : setCaption ( text ) Sets a caption. To remove, pass nil as text . See captions for more details. setCaptionHint \u00b6 {chainable} icon : setCaptionHint ( keyCodeEnum ) This customizes the appearance of the caption's hint without having to use icon:bindToggleKey . setDropdown \u00b6 {chainable} icon : setDropdown ( arrayOfIcons ) Creates a vertical dropdown based upon the given table array of icons . Pass an empty table {} to remove the dropdown. See [dropdowns] for more details. joinDropdown \u00b6 {chainable} icon : joinDropdown ( parentIcon ) Joins the dropdown of parentIcon . This is what icon:setDropdown calls internally on the icons within its array. setMenu \u00b6 {chainable} icon : setMenu ( arrayOfIcons ) Creates a horizontal menu based upon the given array of icons. Pass an empty table {} to remove the menu. See [menus] for more details. joinMenu \u00b6 {chainable} icon : joinMenu ( parentIcon ) Joins the menu of parentIcon . This is what icon:setMenu calls internally on the icons within its array. leave \u00b6 {chainable} icon : leave () Unparents an icon from a parentIcon if it belongs to a dropdown or menu. destroy \u00b6 {chainable} icon : destroy () Clears all connections and destroys all instances associated with the icon. Events \u00b6 selected \u00b6 icon . selected : Connect ( function () print ( \"The icon was selected\" ) end ) deselected \u00b6 icon . deselected : Connect ( function () print ( \"The icon was deselected\" ) end ) toggled \u00b6 icon . toggled : Connect ( function ( isSelected ) local stateName = ( isSelected and \"selected\" ) or \"deselected\" print ( ` The icon was { stateName } !` ) end ) viewingStarted \u00b6 icon . viewingStarted : Connect ( function () print ( \"A mouse, long-pressed finger or gamepad selection is hovering over the icon\" ) end ) viewingEnded \u00b6 icon . viewingEnded : Connect ( function () print ( \"The input is no longer viewing (hovering over) the icon\" ) end ) notified \u00b6 icon . notified : Connect ( function () print ( \"New notice\" ) end ) Properties \u00b6 name \u00b6 {read-only} local string = icon . name --[default: \"Widget\"] isSelected \u00b6 {read-only} local bool = icon . isSelected enabled \u00b6 {read-only} local bool = icon . enabled totalNotices \u00b6 {read-only} local int = icon . totalNotices locked \u00b6 {read-only} local bool = icon . locked","title":"API"},{"location":"api/#functions","text":"","title":"Functions"},{"location":"api/#geticons","text":"local icons = Icon . getIcons () Returns a dictionary of icons where the key is the icon's UID and value the icon.","title":"getIcons"},{"location":"api/#geticon","text":"local icon = Icon . getIcon ( nameOrUID ) Returns an icon of the given name or UID.","title":"getIcon"},{"location":"api/#settopbarenabled","text":"Icon . setTopbarEnabled ( bool ) When set to false all TopbarPlus ScreenGuis are hidden. This does not impact Roblox's Topbar.","title":"setTopbarEnabled"},{"location":"api/#modifybasetheme","text":"Icon . modifyBaseTheme ( modifications ) Updates the appearance of all icons. See themes for more details.","title":"modifyBaseTheme"},{"location":"api/#setdisplayorder","text":"Icon . setDisplayOrder ( integer ) Sets the base DisplayOrder of all TopbarPlus ScreenGuis.","title":"setDisplayOrder"},{"location":"api/#constructors","text":"","title":"Constructors"},{"location":"api/#new","text":"local icon = Icon . new () Constructs an empty 32x32 icon on the topbar.","title":"new"},{"location":"api/#methods","text":"","title":"Methods"},{"location":"api/#setname","text":"{chainable} icon : set ( name ) Sets the name of the Widget instance. This can be used in conjunction with Icon.getIcon(name) .","title":"setName"},{"location":"api/#getinstance","text":"local instance = icon : getInstance ( instanceName ) Returns the first descendant found within the widget of name instanceName .","title":"getInstance"},{"location":"api/#modifytheme","text":"{chainable} icon : modifyTheme ( modifications ) Updates the appearance of the icon. See themes for more details.","title":"modifyTheme"},{"location":"api/#modifychildtheme","text":"{chainable} icon : modifyChildTheme ( modifications ) Updates the appearance of all icons that are parented to this icon (for example when a menu or dropdown). See themes for more details.","title":"modifyChildTheme"},{"location":"api/#setenabled","text":"{chainable} icon : setEnabled ( bool ) When set to false the icon will be disabled and hidden.","title":"setEnabled"},{"location":"api/#select","text":"{chainable} icon : select () Selects the icon (as if it were clicked once).","title":"select"},{"location":"api/#deselect","text":"{chainable} icon : deselect () Deselects the icon (as if it were clicked, then clicked again).","title":"deselect"},{"location":"api/#notify","text":"{chainable} icon : notify ( clearNoticeEvent ) Prompts a notice bubble which accumulates the further it is prompted. If the icon belongs to a dropdown or menu, then the notice will appear on the parent icon when the parent icon is deselected.","title":"notify"},{"location":"api/#clearnotices","text":"{chainable} icon : clearNotices ()","title":"clearNotices"},{"location":"api/#disableoverlay","text":"{chainable} icon : disableStateOverlay ( bool ) When set to true , disables the shade effect which appears when the icon is pressed and released.","title":"disableOverlay"},{"location":"api/#setimage","text":"{chainable} {toggleable} icon : setImage ( imageId , iconState ) Applies an image to the icon based on the given imaageId . imageId can be an assetId or a complete asset string.","title":"setImage"},{"location":"api/#setlabel","text":"{chainable} {toggleable} icon : setLabel ( text , iconState )","title":"setLabel"},{"location":"api/#setorder","text":"{chainable} {toggleable} icon : setOrder ( order , iconState )","title":"setOrder"},{"location":"api/#setcornerradius","text":"{chainable} {toggleable} icon : setCornerRadius ( scale , offset , iconState )","title":"setCornerRadius"},{"location":"api/#align","text":"{chainable} icon : align ( alignment ) This enables you to set the icon to the \"Left\" (default), \"Center\" or \"Right\" side of the screen. See alignments for more details.","title":"align"},{"location":"api/#setwidth","text":"{chainable} {toggleable} icon : setWidth ( minimumSize , iconState ) This sets the minimum width the icon can be (it can be larger for instance when setting a long label). The default width is 44 .","title":"setWidth"},{"location":"api/#setimagescale","text":"{chainable} {toggleable} icon : setImageScale ( number , iconState ) How large the image is relative to the icon. The default value is 0.5 .","title":"setImageScale"},{"location":"api/#setimageratio","text":"{chainable} {toggleable} icon : setImageRatio ( number , iconState ) How stretched the image will appear. The default value is 1 (a perfect square).","title":"setImageRatio"},{"location":"api/#settextsize","text":"{chainable} {toggleable} icon : setTextSize ( number , iconState ) The size of the icon labels' text. The default value is 16 .","title":"setTextSize"},{"location":"api/#settextfont","text":"{chainable} {toggleable} icon : setTextFont ( font , fontWeight , fontStyle , iconState ) Sets the labels FontFace. font can be a font family name (such as \"Creepster\" ), a font enum (such as Enum.Font.Bangers ), a font ID (such as 12187370928 ) or font family link (such as \"rbxasset://fonts/families/Sarpanch.json\" ).","title":"setTextFont"},{"location":"api/#bindtoggleitem","text":"{chainable} icon : bindToggleItem ( guiObjectOrLayerCollector ) Binds a GuiObject or LayerCollector to appear and disappeared when the icon is toggled.","title":"bindToggleItem"},{"location":"api/#unbindtoggleitem","text":"{chainable} icon : unbindToggleItem ( guiObjectOrLayerCollector ) Unbinds the given GuiObject or LayerCollector from the toggle.","title":"unbindToggleItem"},{"location":"api/#bindevent","text":"{chainable} icon : bindEvent ( iconEventName , callback ) Connects to an icon event with iconEventName . It's important to remember all event names are in camelCase. callback is called with arguments (self, ...) when the event is triggered.","title":"bindEvent"},{"location":"api/#unbindevent","text":"{chainable} icon : unbindEvent ( iconEventName ) Unbinds the connection of the associated iconEventName .","title":"unbindEvent"},{"location":"api/#bindtogglekey","text":"{chainable} icon : bindToggleKey ( keyCodeEnum ) Binds a keycode which toggles the icon when pressed. See toggle keys for more details.","title":"bindToggleKey"},{"location":"api/#unbindtogglekey","text":"{chainable} icon : unbindToggleKey ( keyCodeEnum ) Unbinds the given keycode.","title":"unbindToggleKey"},{"location":"api/#call","text":"{chainable} icon : call ( func ) Calls the function immediately via task.spawn . The first argument passed is the icon itself. This is useful when needing to extend the behaviour of an icon while remaining in the chain.","title":"call"},{"location":"api/#addtojanitor","text":"{chainable} icon : addToJanitor ( userdata ) Passes the given userdata to the icons janitor to be destroyed/disconnected on the icons destruction. If a function is passed, it will be called when the icon is destroyed.","title":"addToJanitor"},{"location":"api/#lock","text":"{chainable} icon : lock () Prevents the icon being toggled by user-input (such as clicking) however the icon can still be toggled via localscript using methods such as icon:select() .","title":"lock"},{"location":"api/#unlock","text":"{chainable} icon : unlock () Re-enables user-input to toggle the icon again.","title":"unlock"},{"location":"api/#debounce","text":"{chainable} {yields} icon : debounce ( seconds ) Locks the icon, yields for the given time, then unlocks the icon, effectively shorthand for icon:lock() task.wait(seconds) icon:unlock() . This is useful for applying cooldowns (to prevent an icon from being pressed again) after an icon has been selected or deselected.","title":"debounce"},{"location":"api/#autodeselect","text":"{chainable} icon : autoDeselect ( true ) When set to true (the default) the icon is deselected when another icon (with autoDeselect enabled) is pressed. Set to false to prevent the icon being deselected when another icon is selected (a useful behaviour in dropdowns).","title":"autoDeselect"},{"location":"api/#oneclick","text":"{chainable} icon : oneClick ( bool ) When set to true the icon will automatically deselect when selected. This creates the effect of a single click button.","title":"oneClick"},{"location":"api/#setcaption","text":"{chainable} icon : setCaption ( text ) Sets a caption. To remove, pass nil as text . See captions for more details.","title":"setCaption"},{"location":"api/#setcaptionhint","text":"{chainable} icon : setCaptionHint ( keyCodeEnum ) This customizes the appearance of the caption's hint without having to use icon:bindToggleKey .","title":"setCaptionHint"},{"location":"api/#setdropdown","text":"{chainable} icon : setDropdown ( arrayOfIcons ) Creates a vertical dropdown based upon the given table array of icons . Pass an empty table {} to remove the dropdown. See [dropdowns] for more details.","title":"setDropdown"},{"location":"api/#joindropdown","text":"{chainable} icon : joinDropdown ( parentIcon ) Joins the dropdown of parentIcon . This is what icon:setDropdown calls internally on the icons within its array.","title":"joinDropdown"},{"location":"api/#setmenu","text":"{chainable} icon : setMenu ( arrayOfIcons ) Creates a horizontal menu based upon the given array of icons. Pass an empty table {} to remove the menu. See [menus] for more details.","title":"setMenu"},{"location":"api/#joinmenu","text":"{chainable} icon : joinMenu ( parentIcon ) Joins the menu of parentIcon . This is what icon:setMenu calls internally on the icons within its array.","title":"joinMenu"},{"location":"api/#leave","text":"{chainable} icon : leave () Unparents an icon from a parentIcon if it belongs to a dropdown or menu.","title":"leave"},{"location":"api/#destroy","text":"{chainable} icon : destroy () Clears all connections and destroys all instances associated with the icon.","title":"destroy"},{"location":"api/#events","text":"","title":"Events"},{"location":"api/#selected","text":"icon . selected : Connect ( function () print ( \"The icon was selected\" ) end )","title":"selected"},{"location":"api/#deselected","text":"icon . deselected : Connect ( function () print ( \"The icon was deselected\" ) end )","title":"deselected"},{"location":"api/#toggled","text":"icon . toggled : Connect ( function ( isSelected ) local stateName = ( isSelected and \"selected\" ) or \"deselected\" print ( ` The icon was { stateName } !` ) end )","title":"toggled"},{"location":"api/#viewingstarted","text":"icon . viewingStarted : Connect ( function () print ( \"A mouse, long-pressed finger or gamepad selection is hovering over the icon\" ) end )","title":"viewingStarted"},{"location":"api/#viewingended","text":"icon . viewingEnded : Connect ( function () print ( \"The input is no longer viewing (hovering over) the icon\" ) end )","title":"viewingEnded"},{"location":"api/#notified","text":"icon . notified : Connect ( function () print ( \"New notice\" ) end )","title":"notified"},{"location":"api/#properties","text":"","title":"Properties"},{"location":"api/#name","text":"{read-only} local string = icon . name --[default: \"Widget\"]","title":"name"},{"location":"api/#isselected","text":"{read-only} local bool = icon . isSelected","title":"isSelected"},{"location":"api/#enabled","text":"{read-only} local bool = icon . enabled","title":"enabled"},{"location":"api/#totalnotices","text":"{read-only} local int = icon . totalNotices","title":"totalNotices"},{"location":"api/#locked","text":"{read-only} local bool = icon . locked","title":"locked"},{"location":"contributing/","text":"Bug Reports \u00b6 To submit a bug report, open an issue or create a response at the discussion thread . Ensure your report includes a detailed explanation of the problem with any relavent images, videos, etc (such as console errors). Aim to include a link to a stipped-down uncopylocked Roblox place which reproduces the bug. Questions and Feedback \u00b6 Be sure to check out the documentation and resources first before asking a question. We recommend asking all questions and posting feedback to the discussion thread . Submitting a resource (video tutorial, port, etc) \u00b6 Fancy making a tutorial or resource for TopbarPlus? Feel free to get in touch and we can provide tips, best practices, etc. We'll feature approved resources on the resources page and often the discussion thread . To submit a resource, open an issue , or reach out on the discussion thread or to ForeverHD on the devforum . Suggestions and Code \u00b6 TopbarPlus is completely free and open source; any suggestions and code contributions are greatly appreciated! To make a suggestion, open an issue or create a response at the discussion thread . For large contributions (like a new feature) please open an issue before beginning a code contribution to ensure it's discussed through fully (we wouldn't want to waste your time!). For smaller contributions (a few lines of code, fixing typos, etc) feel free to send a pull request right away. Make sure to merge your pull requests into the #development branch. Some tools you'll find useful when working on this project: Rojo Material for MKDocs Roblox LSP Documentation \u00b6 If you find any problems in the documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them. To test documentation: Install Python (which comes with pip). Install Material for MKDocs . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Change directory to this clone cd TopbarPlus . Swap to the development branch git checkout development . Call mkdocs serve within your terminal. Open your local website (it will look something like http://0.0.0.0:8000 ) Any changes to mkdocs.yml or the files within docs will now update live to this local site. Important All pull requests must be made to the development branch.","title":"Contributing"},{"location":"contributing/#bug-reports","text":"To submit a bug report, open an issue or create a response at the discussion thread . Ensure your report includes a detailed explanation of the problem with any relavent images, videos, etc (such as console errors). Aim to include a link to a stipped-down uncopylocked Roblox place which reproduces the bug.","title":"Bug Reports"},{"location":"contributing/#questions-and-feedback","text":"Be sure to check out the documentation and resources first before asking a question. We recommend asking all questions and posting feedback to the discussion thread .","title":"Questions and Feedback"},{"location":"contributing/#submitting-a-resource-video-tutorial-port-etc","text":"Fancy making a tutorial or resource for TopbarPlus? Feel free to get in touch and we can provide tips, best practices, etc. We'll feature approved resources on the resources page and often the discussion thread . To submit a resource, open an issue , or reach out on the discussion thread or to ForeverHD on the devforum .","title":"Submitting a resource (video tutorial, port, etc)"},{"location":"contributing/#suggestions-and-code","text":"TopbarPlus is completely free and open source; any suggestions and code contributions are greatly appreciated! To make a suggestion, open an issue or create a response at the discussion thread . For large contributions (like a new feature) please open an issue before beginning a code contribution to ensure it's discussed through fully (we wouldn't want to waste your time!). For smaller contributions (a few lines of code, fixing typos, etc) feel free to send a pull request right away. Make sure to merge your pull requests into the #development branch. Some tools you'll find useful when working on this project: Rojo Material for MKDocs Roblox LSP","title":"Suggestions and Code"},{"location":"contributing/#documentation","text":"If you find any problems in the documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them. To test documentation: Install Python (which comes with pip). Install Material for MKDocs . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Change directory to this clone cd TopbarPlus . Swap to the development branch git checkout development . Call mkdocs serve within your terminal. Open your local website (it will look something like http://0.0.0.0:8000 ) Any changes to mkdocs.yml or the files within docs will now update live to this local site. Important All pull requests must be made to the development branch.","title":"Documentation"},{"location":"features/","text":"Images \u00b6 Icon . new : setImage ( shopImageId ) Labels \u00b6 icon : setLabel ( \"Shop\" ) icon : setImage ( shopImageId ) icon : setLabel ( \"Shop\" ) Alignments \u00b6 -- Aligns the icon to the left bounds of the screen -- This is the default behaviour so you do not need to do anything -- This was formerly called :setLeft() icon : align ( \"Left\" ) -- Aligns the icon in the middle of the screen -- This was formerly called :setMid() icon : align ( \"Center\" ) -- Aligns the icon to the right bounds of the screen -- This was formerly called :setRight() icon : align ( \"Right\" ) Notices \u00b6 icon : notify () Captions \u00b6 icon : setCaption ( \"Open Shop\" ) Dropdowns \u00b6 Dropdowns are vertical navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Dropdown\" , \"MaxIcons\" , 3 }) : modifyChildTheme ({ \"Widget\" , \"MinimumWidth\" , 158 }) : setDropdown ({ Icon . new () : setLabel ( \"Category 1\" ) , Icon . new () : setLabel ( \"Category 2\" ) , Icon . new () : setLabel ( \"Category 3\" ) , Icon . new () : setLabel ( \"Category 4\" ) , }) Menus \u00b6 Menus are horizontal navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Menu\" , \"MaxIcons\" , 2 }) : setMenu ({ Icon . new () : setLabel ( \"Item 1\" ) , Icon . new () : setLabel ( \"Item 2\" ) , Icon . new () : setLabel ( \"Item 3\" ) , Icon . new () : setLabel ( \"Item 4\" ) , }) Modify Theme \u00b6 You can modify the appearance of an icon doing: icon : modifyTheme ( modifications ) You can modify the appearance of all icons doing: Icon . modifyBaseTheme ( modifications ) modifications can be either a single array describing a change, or a colllection of these arrays. For example, both the following are valid: -- Single array icon : modifyTheme ({ \"IconLabel\" , \"TextSize\" , 16 }) -- Collection of arrays icon : modifyTheme ({ { \"Widget\" , \"MinimumWidth\" , 290 }, { \"IconCorners\" , \"CornerRadius\" , UDim . new ( 0 , 0 )} }) A modification array has 4 components: { name , property , value , iconState } 1. name {required} This can be: \"Widget\" (which is the icon container frame) The name of an instance within the widget such as IconGradient , IconSpot , Menu , etc A 'collective' - the value of an attribute called 'Collective' applied to some instances. This enables them to be acted upon all at once. For example, 'IconCorners'. 2. property {required} This can be either: A property from the instance (Name, BackgroundColor3, Text, etc) Or if the property doesn't exist, an attribute of that property name will be set 3. value {required} The value you want the property to become ( \"Hello\" , Color3.fromRGB(255, 100, 50) , etc) 4. iconState {optional} This determines when the modification is applied. See icon states for more details. You can find example arrays under the 'Default' module: One Click Icons \u00b6 You can convert icons into single click icons (icons which instantly deselect when selected) by doing: icon : oneClick () For example: Icon . new () : setImage ( shopImageId ) : setLabel ( \"Shop\" ) : bindEvent ( \"deselected\" , function () shop . Visible = not shop . Visible end ) : oneClick () Toggle Items \u00b6 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 \u00b6 Binds a keycode which toggles the icon when pressed. Also creates a caption hint of that keycode binding. Icon . new () : setLabel ( \"Shop\" ) : bindToggleKey ( Enum . KeyCode . V ) : setCaption ( \"Open Shop\" ) Gamepad & Console Support \u00b6 TopbarPlus comes with inbuilt support for gamepads (such as XBbox and PlayStation controllers) and console screens: To highlight the last-selected icon (or left-most if none have been selected yet) users simply press DPadUp or navigate to the topbar via the virtual cursor. To change the default trigger keycode (from DPadUp) do: Icon . highlightKey = Enum . KeyCode . NEW_KEYCODE Overflows \u00b6 When accounting for device types and screen sizes, icons may occasionally overlap. This is especially common for phones when they enter portrait mode. TopbarPlus solves this with overflows: Overflows will appear when left-set or right-set icons exceed the boundary of the closest opposite-aligned icon or viewport. If a center-aligned icon exceeds the bounds of another icon, its alignment will be set to the alignment of the icon it exceeded: These examples and more can be tested, viewed and edited at the v3 Playground .","title":"Features"},{"location":"features/#images","text":"Icon . new : setImage ( shopImageId )","title":"Images"},{"location":"features/#labels","text":"icon : setLabel ( \"Shop\" ) icon : setImage ( shopImageId ) icon : setLabel ( \"Shop\" )","title":"Labels"},{"location":"features/#alignments","text":"-- Aligns the icon to the left bounds of the screen -- This is the default behaviour so you do not need to do anything -- This was formerly called :setLeft() icon : align ( \"Left\" ) -- Aligns the icon in the middle of the screen -- This was formerly called :setMid() icon : align ( \"Center\" ) -- Aligns the icon to the right bounds of the screen -- This was formerly called :setRight() icon : align ( \"Right\" )","title":"Alignments"},{"location":"features/#notices","text":"icon : notify ()","title":"Notices"},{"location":"features/#captions","text":"icon : setCaption ( \"Open Shop\" )","title":"Captions"},{"location":"features/#dropdowns","text":"Dropdowns are vertical navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Dropdown\" , \"MaxIcons\" , 3 }) : modifyChildTheme ({ \"Widget\" , \"MinimumWidth\" , 158 }) : setDropdown ({ Icon . new () : setLabel ( \"Category 1\" ) , Icon . new () : setLabel ( \"Category 2\" ) , Icon . new () : setLabel ( \"Category 3\" ) , Icon . new () : setLabel ( \"Category 4\" ) , })","title":"Dropdowns"},{"location":"features/#menus","text":"Menus are horizontal navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Menu\" , \"MaxIcons\" , 2 }) : setMenu ({ Icon . new () : setLabel ( \"Item 1\" ) , Icon . new () : setLabel ( \"Item 2\" ) , Icon . new () : setLabel ( \"Item 3\" ) , Icon . new () : setLabel ( \"Item 4\" ) , })","title":"Menus"},{"location":"features/#modify-theme","text":"You can modify the appearance of an icon doing: icon : modifyTheme ( modifications ) You can modify the appearance of all icons doing: Icon . modifyBaseTheme ( modifications ) modifications can be either a single array describing a change, or a colllection of these arrays. For example, both the following are valid: -- Single array icon : modifyTheme ({ \"IconLabel\" , \"TextSize\" , 16 }) -- Collection of arrays icon : modifyTheme ({ { \"Widget\" , \"MinimumWidth\" , 290 }, { \"IconCorners\" , \"CornerRadius\" , UDim . new ( 0 , 0 )} }) A modification array has 4 components: { name , property , value , iconState } 1. name {required} This can be: \"Widget\" (which is the icon container frame) The name of an instance within the widget such as IconGradient , IconSpot , Menu , etc A 'collective' - the value of an attribute called 'Collective' applied to some instances. This enables them to be acted upon all at once. For example, 'IconCorners'. 2. property {required} This can be either: A property from the instance (Name, BackgroundColor3, Text, etc) Or if the property doesn't exist, an attribute of that property name will be set 3. value {required} The value you want the property to become ( \"Hello\" , Color3.fromRGB(255, 100, 50) , etc) 4. iconState {optional} This determines when the modification is applied. See icon states for more details. You can find example arrays under the 'Default' module:","title":"Modify Theme"},{"location":"features/#one-click-icons","text":"You can convert icons into single click icons (icons which instantly deselect when selected) by doing: icon : oneClick () For example: Icon . new () : setImage ( shopImageId ) : setLabel ( \"Shop\" ) : bindEvent ( \"deselected\" , function () shop . Visible = not shop . Visible end ) : oneClick ()","title":"One Click Icons"},{"location":"features/#toggle-items","text":"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 )","title":"Toggle Items"},{"location":"features/#toggle-keys","text":"Binds a keycode which toggles the icon when pressed. Also creates a caption hint of that keycode binding. Icon . new () : setLabel ( \"Shop\" ) : bindToggleKey ( Enum . KeyCode . V ) : setCaption ( \"Open Shop\" )","title":"Toggle Keys"},{"location":"features/#gamepad-console-support","text":"TopbarPlus comes with inbuilt support for gamepads (such as XBbox and PlayStation controllers) and console screens: To highlight the last-selected icon (or left-most if none have been selected yet) users simply press DPadUp or navigate to the topbar via the virtual cursor. To change the default trigger keycode (from DPadUp) do: Icon . highlightKey = Enum . KeyCode . NEW_KEYCODE","title":"Gamepad & Console Support"},{"location":"features/#overflows","text":"When accounting for device types and screen sizes, icons may occasionally overlap. This is especially common for phones when they enter portrait mode. TopbarPlus solves this with overflows: Overflows will appear when left-set or right-set icons exceed the boundary of the closest opposite-aligned icon or viewport. If a center-aligned icon exceeds the bounds of another icon, its alignment will be set to the alignment of the icon it exceeded: These examples and more can be tested, viewed and edited at the v3 Playground .","title":"Overflows"},{"location":"installation/","text":"Take the model \u00b6 {recommended} Take the TopbarPlus model . Open the toolbox and navigate to Inventory -> My Models. Click TopbarPlus to insert into your game and place anywhere within ReplicatedStorage or Workspace . TopbarPlus is a package so you can update it instantly (instead of re-adding) by right-clicking the Icon module and selecting an option such as 'Get Latest Package': You can receive automatic updates by enabling 'AutoUpdate' within the PackageLink: Info All v3 updates will be backwards compatible so you don't need to worry about updates interfering with your code. Warning Try not to modify any code within the Icon package otherwise it will break the package link. Important As of 27th March 2024 public packages haven't been rolled out by Roblox. Only after their full release will you be able to benefit from easily installable updates. For the time being, attempting to use 'Get Latest Package' and other package features will throw an error. Download from Releases \u00b6 Visit the latest release . Under Assets , download TopbarPlus.rbxm . Within studio, navigate to MODEL -> Model and insert the file anywhere within ReplicatedStorage . With Rojo \u00b6 Setup with Rojo . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Modify the default.project.json file to your desired location (by default TopbarPlus is built directly into ReplicatedStorage ). Call rojo serve (terminal or VSC plugin) and connect to the rojo studio plugin.","title":"Installation"},{"location":"installation/#take-the-model","text":"{recommended} Take the TopbarPlus model . Open the toolbox and navigate to Inventory -> My Models. Click TopbarPlus to insert into your game and place anywhere within ReplicatedStorage or Workspace . TopbarPlus is a package so you can update it instantly (instead of re-adding) by right-clicking the Icon module and selecting an option such as 'Get Latest Package': You can receive automatic updates by enabling 'AutoUpdate' within the PackageLink: Info All v3 updates will be backwards compatible so you don't need to worry about updates interfering with your code. Warning Try not to modify any code within the Icon package otherwise it will break the package link. Important As of 27th March 2024 public packages haven't been rolled out by Roblox. Only after their full release will you be able to benefit from easily installable updates. For the time being, attempting to use 'Get Latest Package' and other package features will throw an error.","title":"Take the model"},{"location":"installation/#download-from-releases","text":"Visit the latest release . Under Assets , download TopbarPlus.rbxm . Within studio, navigate to MODEL -> Model and insert the file anywhere within ReplicatedStorage .","title":"Download from Releases"},{"location":"installation/#with-rojo","text":"Setup with Rojo . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Modify the default.project.json file to your desired location (by default TopbarPlus is built directly into ReplicatedStorage ). Call rojo serve (terminal or VSC plugin) and connect to the rojo studio plugin.","title":"With Rojo"},{"location":"resources/","text":"Theme Settings Model Playground Discussion Repository Roblox-TS Port by grilme99 YouTube Video by Inctus If you would like to submit a resource (such as a video tutorial, port, etc), please see contributing .","title":"Resources"},{"location":"third_parties/","text":"TopbarPlus supports the use of multiple Icon packages within a single experience assuming all required packages are v3.0.0 or above. When a package is required it will 'check' to see if a TopbarPlus package has already been required within the experience. If one has, it cancels loading itself and will instead refer to the already initialized package. This prevents weird quirks from occuring and means third party applications, libraries etc that use TopbarPlus can be used safely without interferring with your own implementation of TopbarPlus. You don't have to do anything to support multiple packages. Simply use TopbarPlus as normal.","title":"Third Parties"}]}
\ No newline at end of file
+{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"About \u00b6 TopbarPlus is a module enabling the construction of dynamic topbar icons. These icons can be enhanced with features and methods like themes, dropdowns and menus to expand upon their appearance and behaviour. TopbarPlus fully supports PC, Mobile, Tablet and Gamepads (Consoles), and comes with internal features such as 'overflows' to ensure icons remain within suitable bounds. Construction \u00b6 Creating an icon is as simple as: -- Within a LocalScript in StarterPlayerScripts and assuming the Icon package is placed in ReplicatedStorage local Icon = require ( game : GetService ( \"ReplicatedStorage\" ). Icon ) local icon = Icon . new () This constructs an empty 32x32 icon on the topbar. Info The order icons appear are determined by their construction sequence. Icons constructed first will have a smaller order therefore will appear left of icons with a higher order. You can modify this behaviour using icon:setOrder . To add an image and label, do: icon : setImage ( imageId ) icon : setLabel ( \"Label\" ) Chaining \u00b6 These methods are 'chainable' therefore can alternatively be called doing: Icon . new () : setImage ( imageId ) : setLabel ( \"Label\" ) You may want to act upon nested icons. You can achieve this using :call which returns the icon as the first argument within the function you pass: Icon . new () : setName ( \"TestIcon\" ) : call ( function ( icon ) print ( icon . name ) -- This will print 'TestIcon'! end ) Info Chainable methods have a chainable tag next to their name within the API Icon docs. States \u00b6 Sometimes you'll want an item to appear only when deselected and similarily only when selected . You can achieve this by specifying a string value within the iconState parameter of methods containing the toggleable tag. These are: \"Deselected\" -- Applies the value when the icon is deselected (i.e. not pressed) \"Selected\" -- Applies the value when the icon is selected (i.e. pressed) \"Viewing\" -- Formerly known as Hovering, applies the value when a cursor is hovering above, a controller highlighting, or touchpad (mobile) long-pressing (but before releasing) an icon Info If no iconState is specified (i.e. is nil) the value will be applied to all states. -- It doesn't matter if you do \"deselected\", \"Deselected\" or \"dEsElEcTeD\"; iconStates are not case sensitive Icon . new () : setImage ( 4882429582 ) : setLabel ( \"Closed\" , \"Deselected\" ) : setLabel ( \"Open\" , \"Selected\" ) : setLabel ( \"Viewing\" , \"Viewing\" ) Additional \u00b6 By default icons will deselect when another icon is selected. You can disable this behaviour doing: icon : autoDeselect ( false ) You can enhance icons further with features like modifyTheme, dropdowns and menus, or by binding GuiObjects and KeyCodes to their toggle. This and much more can be achieved by exploring the Feature Guide and Icon API . Have a question or issue? Feel free to reach out at the TopbarPlus DevForum Thread .","title":"Introduction"},{"location":"#about","text":"TopbarPlus is a module enabling the construction of dynamic topbar icons. These icons can be enhanced with features and methods like themes, dropdowns and menus to expand upon their appearance and behaviour. TopbarPlus fully supports PC, Mobile, Tablet and Gamepads (Consoles), and comes with internal features such as 'overflows' to ensure icons remain within suitable bounds.","title":"About"},{"location":"#construction","text":"Creating an icon is as simple as: -- Within a LocalScript in StarterPlayerScripts and assuming the Icon package is placed in ReplicatedStorage local Icon = require ( game : GetService ( \"ReplicatedStorage\" ). Icon ) local icon = Icon . new () This constructs an empty 32x32 icon on the topbar. Info The order icons appear are determined by their construction sequence. Icons constructed first will have a smaller order therefore will appear left of icons with a higher order. You can modify this behaviour using icon:setOrder . To add an image and label, do: icon : setImage ( imageId ) icon : setLabel ( \"Label\" )","title":"Construction"},{"location":"#chaining","text":"These methods are 'chainable' therefore can alternatively be called doing: Icon . new () : setImage ( imageId ) : setLabel ( \"Label\" ) You may want to act upon nested icons. You can achieve this using :call which returns the icon as the first argument within the function you pass: Icon . new () : setName ( \"TestIcon\" ) : call ( function ( icon ) print ( icon . name ) -- This will print 'TestIcon'! end ) Info Chainable methods have a chainable tag next to their name within the API Icon docs.","title":"Chaining"},{"location":"#states","text":"Sometimes you'll want an item to appear only when deselected and similarily only when selected . You can achieve this by specifying a string value within the iconState parameter of methods containing the toggleable tag. These are: \"Deselected\" -- Applies the value when the icon is deselected (i.e. not pressed) \"Selected\" -- Applies the value when the icon is selected (i.e. pressed) \"Viewing\" -- Formerly known as Hovering, applies the value when a cursor is hovering above, a controller highlighting, or touchpad (mobile) long-pressing (but before releasing) an icon Info If no iconState is specified (i.e. is nil) the value will be applied to all states. -- It doesn't matter if you do \"deselected\", \"Deselected\" or \"dEsElEcTeD\"; iconStates are not case sensitive Icon . new () : setImage ( 4882429582 ) : setLabel ( \"Closed\" , \"Deselected\" ) : setLabel ( \"Open\" , \"Selected\" ) : setLabel ( \"Viewing\" , \"Viewing\" )","title":"States"},{"location":"#additional","text":"By default icons will deselect when another icon is selected. You can disable this behaviour doing: icon : autoDeselect ( false ) You can enhance icons further with features like modifyTheme, dropdowns and menus, or by binding GuiObjects and KeyCodes to their toggle. This and much more can be achieved by exploring the Feature Guide and Icon API . Have a question or issue? Feel free to reach out at the TopbarPlus DevForum Thread .","title":"Additional"},{"location":"api/","text":"Functions \u00b6 getIcons \u00b6 local icons = Icon . getIcons () Returns a dictionary of icons where the key is the icon's UID and value the icon. getIcon \u00b6 local icon = Icon . getIcon ( nameOrUID ) Returns an icon of the given name or UID. setTopbarEnabled \u00b6 Icon . setTopbarEnabled ( bool ) When set to false all TopbarPlus ScreenGuis are hidden. This does not impact Roblox's Topbar. modifyBaseTheme \u00b6 Icon . modifyBaseTheme ( modifications ) Updates the appearance of all icons. See themes for more details. setDisplayOrder \u00b6 Icon . setDisplayOrder ( integer ) Sets the base DisplayOrder of all TopbarPlus ScreenGuis. Constructors \u00b6 new \u00b6 local icon = Icon . new () Constructs an empty 32x32 icon on the topbar. Methods \u00b6 setName \u00b6 {chainable} icon : set ( name ) Sets the name of the Widget instance. This can be used in conjunction with Icon.getIcon(name) . getInstance \u00b6 local instance = icon : getInstance ( instanceName ) Returns the first descendant found within the widget of name instanceName . modifyTheme \u00b6 {chainable} icon : modifyTheme ( modifications ) Updates the appearance of the icon. See themes for more details. modifyChildTheme \u00b6 {chainable} icon : modifyChildTheme ( modifications ) Updates the appearance of all icons that are parented to this icon (for example when a menu or dropdown). See themes for more details. setEnabled \u00b6 {chainable} icon : setEnabled ( bool ) When set to false the icon will be disabled and hidden. select \u00b6 {chainable} icon : select () Selects the icon (as if it were clicked once). deselect \u00b6 {chainable} icon : deselect () Deselects the icon (as if it were clicked, then clicked again). notify \u00b6 {chainable} icon : notify ( clearNoticeEvent ) Prompts a notice bubble which accumulates the further it is prompted. If the icon belongs to a dropdown or menu, then the notice will appear on the parent icon when the parent icon is deselected. clearNotices \u00b6 {chainable} icon : clearNotices () disableOverlay \u00b6 {chainable} icon : disableStateOverlay ( bool ) When set to true , disables the shade effect which appears when the icon is pressed and released. setImage \u00b6 {chainable} {toggleable} icon : setImage ( imageId , iconState ) Applies an image to the icon based on the given imaageId . imageId can be an assetId or a complete asset string. setLabel \u00b6 {chainable} {toggleable} icon : setLabel ( text , iconState ) setOrder \u00b6 {chainable} {toggleable} icon : setOrder ( order , iconState ) setCornerRadius \u00b6 {chainable} {toggleable} icon : setCornerRadius ( scale , offset , iconState ) align \u00b6 {chainable} icon : align ( alignment ) This enables you to set the icon to the \"Left\" (default), \"Center\" or \"Right\" side of the screen. See alignments for more details. setWidth \u00b6 {chainable} {toggleable} icon : setWidth ( minimumSize , iconState ) This sets the minimum width the icon can be (it can be larger for instance when setting a long label). The default width is 44 . setImageScale \u00b6 {chainable} {toggleable} icon : setImageScale ( number , iconState ) How large the image is relative to the icon. The default value is 0.5 . setImageRatio \u00b6 {chainable} {toggleable} icon : setImageRatio ( number , iconState ) How stretched the image will appear. The default value is 1 (a perfect square). setTextSize \u00b6 {chainable} {toggleable} icon : setTextSize ( number , iconState ) The size of the icon labels' text. The default value is 16 . setTextFont \u00b6 {chainable} {toggleable} icon : setTextFont ( font , fontWeight , fontStyle , iconState ) Sets the labels FontFace. font can be a font family name (such as \"Creepster\" ), a font enum (such as Enum.Font.Bangers ), a font ID (such as 12187370928 ) or font family link (such as \"rbxasset://fonts/families/Sarpanch.json\" ). bindToggleItem \u00b6 {chainable} icon : bindToggleItem ( guiObjectOrLayerCollector ) Binds a GuiObject or LayerCollector to appear and disappeared when the icon is toggled. unbindToggleItem \u00b6 {chainable} icon : unbindToggleItem ( guiObjectOrLayerCollector ) Unbinds the given GuiObject or LayerCollector from the toggle. bindEvent \u00b6 {chainable} icon : bindEvent ( iconEventName , callback ) Connects to an icon event with iconEventName . It's important to remember all event names are in camelCase. callback is called with arguments (self, ...) when the event is triggered. unbindEvent \u00b6 {chainable} icon : unbindEvent ( iconEventName ) Unbinds the connection of the associated iconEventName . bindToggleKey \u00b6 {chainable} icon : bindToggleKey ( keyCodeEnum ) Binds a keycode which toggles the icon when pressed. See toggle keys for more details. unbindToggleKey \u00b6 {chainable} icon : unbindToggleKey ( keyCodeEnum ) Unbinds the given keycode. call \u00b6 {chainable} icon : call ( func ) Calls the function immediately via task.spawn . The first argument passed is the icon itself. This is useful when needing to extend the behaviour of an icon while remaining in the chain. addToJanitor \u00b6 {chainable} icon : addToJanitor ( userdata ) Passes the given userdata to the icons janitor to be destroyed/disconnected on the icons destruction. If a function is passed, it will be called when the icon is destroyed. lock \u00b6 {chainable} icon : lock () Prevents the icon being toggled by user-input (such as clicking) however the icon can still be toggled via localscript using methods such as icon:select() . unlock \u00b6 {chainable} icon : unlock () Re-enables user-input to toggle the icon again. debounce \u00b6 {chainable} {yields} icon : debounce ( seconds ) Locks the icon, yields for the given time, then unlocks the icon, effectively shorthand for icon:lock() task.wait(seconds) icon:unlock() . This is useful for applying cooldowns (to prevent an icon from being pressed again) after an icon has been selected or deselected. autoDeselect \u00b6 {chainable} icon : autoDeselect ( true ) When set to true (the default) the icon is deselected when another icon (with autoDeselect enabled) is pressed. Set to false to prevent the icon being deselected when another icon is selected (a useful behaviour in dropdowns). oneClick \u00b6 {chainable} icon : oneClick ( bool ) When set to true the icon will automatically deselect when selected. This creates the effect of a single click button. setCaption \u00b6 {chainable} icon : setCaption ( text ) Sets a caption. To remove, pass nil as text . See captions for more details. setCaptionHint \u00b6 {chainable} icon : setCaptionHint ( keyCodeEnum ) This customizes the appearance of the caption's hint without having to use icon:bindToggleKey . setDropdown \u00b6 {chainable} icon : setDropdown ( arrayOfIcons ) Creates a vertical dropdown based upon the given table array of icons . Pass an empty table {} to remove the dropdown. See [dropdowns] for more details. joinDropdown \u00b6 {chainable} icon : joinDropdown ( parentIcon ) Joins the dropdown of parentIcon . This is what icon:setDropdown calls internally on the icons within its array. setMenu \u00b6 {chainable} icon : setMenu ( arrayOfIcons ) Creates a horizontal menu based upon the given array of icons. Pass an empty table {} to remove the menu. See [menus] for more details. joinMenu \u00b6 {chainable} icon : joinMenu ( parentIcon ) Joins the menu of parentIcon . This is what icon:setMenu calls internally on the icons within its array. leave \u00b6 {chainable} icon : leave () Unparents an icon from a parentIcon if it belongs to a dropdown or menu. destroy \u00b6 {chainable} icon : destroy () Clears all connections and destroys all instances associated with the icon. Events \u00b6 selected \u00b6 icon . selected : Connect ( function ( fromSource ) -- fromSource can be useful for checking if the behaviour was triggered by a user (such as clicking) -- fromSource values include \"User\", \"OneClick\", \"AutoDeselect\", \"HideParentFeature\", \"Overflow\" local sourceName = fromSource or \"Unknown\" print ( \"The icon was selected by the \" .. sourceName ) end ) deselected \u00b6 icon . deselected : Connect ( function ( fromSource ) local sourceName = fromSource or \"Unknown\" print ( \"The icon was deselected by the \" .. sourceName ) end ) toggled \u00b6 icon . toggled : Connect ( function ( isSelected , fromSource ) local stateName = ( isSelected and \"selected\" ) or \"deselected\" print ( ` The icon was { stateName } !` ) end ) viewingStarted \u00b6 icon . viewingStarted : Connect ( function () print ( \"A mouse, long-pressed finger or gamepad selection is hovering over the icon\" ) end ) viewingEnded \u00b6 icon . viewingEnded : Connect ( function () print ( \"The input is no longer viewing (hovering over) the icon\" ) end ) notified \u00b6 icon . notified : Connect ( function () print ( \"New notice\" ) end ) Properties \u00b6 name \u00b6 {read-only} local string = icon . name --[default: \"Widget\"] isSelected \u00b6 {read-only} local bool = icon . isSelected enabled \u00b6 {read-only} local bool = icon . enabled totalNotices \u00b6 {read-only} local int = icon . totalNotices locked \u00b6 {read-only} local bool = icon . locked","title":"API"},{"location":"api/#functions","text":"","title":"Functions"},{"location":"api/#geticons","text":"local icons = Icon . getIcons () Returns a dictionary of icons where the key is the icon's UID and value the icon.","title":"getIcons"},{"location":"api/#geticon","text":"local icon = Icon . getIcon ( nameOrUID ) Returns an icon of the given name or UID.","title":"getIcon"},{"location":"api/#settopbarenabled","text":"Icon . setTopbarEnabled ( bool ) When set to false all TopbarPlus ScreenGuis are hidden. This does not impact Roblox's Topbar.","title":"setTopbarEnabled"},{"location":"api/#modifybasetheme","text":"Icon . modifyBaseTheme ( modifications ) Updates the appearance of all icons. See themes for more details.","title":"modifyBaseTheme"},{"location":"api/#setdisplayorder","text":"Icon . setDisplayOrder ( integer ) Sets the base DisplayOrder of all TopbarPlus ScreenGuis.","title":"setDisplayOrder"},{"location":"api/#constructors","text":"","title":"Constructors"},{"location":"api/#new","text":"local icon = Icon . new () Constructs an empty 32x32 icon on the topbar.","title":"new"},{"location":"api/#methods","text":"","title":"Methods"},{"location":"api/#setname","text":"{chainable} icon : set ( name ) Sets the name of the Widget instance. This can be used in conjunction with Icon.getIcon(name) .","title":"setName"},{"location":"api/#getinstance","text":"local instance = icon : getInstance ( instanceName ) Returns the first descendant found within the widget of name instanceName .","title":"getInstance"},{"location":"api/#modifytheme","text":"{chainable} icon : modifyTheme ( modifications ) Updates the appearance of the icon. See themes for more details.","title":"modifyTheme"},{"location":"api/#modifychildtheme","text":"{chainable} icon : modifyChildTheme ( modifications ) Updates the appearance of all icons that are parented to this icon (for example when a menu or dropdown). See themes for more details.","title":"modifyChildTheme"},{"location":"api/#setenabled","text":"{chainable} icon : setEnabled ( bool ) When set to false the icon will be disabled and hidden.","title":"setEnabled"},{"location":"api/#select","text":"{chainable} icon : select () Selects the icon (as if it were clicked once).","title":"select"},{"location":"api/#deselect","text":"{chainable} icon : deselect () Deselects the icon (as if it were clicked, then clicked again).","title":"deselect"},{"location":"api/#notify","text":"{chainable} icon : notify ( clearNoticeEvent ) Prompts a notice bubble which accumulates the further it is prompted. If the icon belongs to a dropdown or menu, then the notice will appear on the parent icon when the parent icon is deselected.","title":"notify"},{"location":"api/#clearnotices","text":"{chainable} icon : clearNotices ()","title":"clearNotices"},{"location":"api/#disableoverlay","text":"{chainable} icon : disableStateOverlay ( bool ) When set to true , disables the shade effect which appears when the icon is pressed and released.","title":"disableOverlay"},{"location":"api/#setimage","text":"{chainable} {toggleable} icon : setImage ( imageId , iconState ) Applies an image to the icon based on the given imaageId . imageId can be an assetId or a complete asset string.","title":"setImage"},{"location":"api/#setlabel","text":"{chainable} {toggleable} icon : setLabel ( text , iconState )","title":"setLabel"},{"location":"api/#setorder","text":"{chainable} {toggleable} icon : setOrder ( order , iconState )","title":"setOrder"},{"location":"api/#setcornerradius","text":"{chainable} {toggleable} icon : setCornerRadius ( scale , offset , iconState )","title":"setCornerRadius"},{"location":"api/#align","text":"{chainable} icon : align ( alignment ) This enables you to set the icon to the \"Left\" (default), \"Center\" or \"Right\" side of the screen. See alignments for more details.","title":"align"},{"location":"api/#setwidth","text":"{chainable} {toggleable} icon : setWidth ( minimumSize , iconState ) This sets the minimum width the icon can be (it can be larger for instance when setting a long label). The default width is 44 .","title":"setWidth"},{"location":"api/#setimagescale","text":"{chainable} {toggleable} icon : setImageScale ( number , iconState ) How large the image is relative to the icon. The default value is 0.5 .","title":"setImageScale"},{"location":"api/#setimageratio","text":"{chainable} {toggleable} icon : setImageRatio ( number , iconState ) How stretched the image will appear. The default value is 1 (a perfect square).","title":"setImageRatio"},{"location":"api/#settextsize","text":"{chainable} {toggleable} icon : setTextSize ( number , iconState ) The size of the icon labels' text. The default value is 16 .","title":"setTextSize"},{"location":"api/#settextfont","text":"{chainable} {toggleable} icon : setTextFont ( font , fontWeight , fontStyle , iconState ) Sets the labels FontFace. font can be a font family name (such as \"Creepster\" ), a font enum (such as Enum.Font.Bangers ), a font ID (such as 12187370928 ) or font family link (such as \"rbxasset://fonts/families/Sarpanch.json\" ).","title":"setTextFont"},{"location":"api/#bindtoggleitem","text":"{chainable} icon : bindToggleItem ( guiObjectOrLayerCollector ) Binds a GuiObject or LayerCollector to appear and disappeared when the icon is toggled.","title":"bindToggleItem"},{"location":"api/#unbindtoggleitem","text":"{chainable} icon : unbindToggleItem ( guiObjectOrLayerCollector ) Unbinds the given GuiObject or LayerCollector from the toggle.","title":"unbindToggleItem"},{"location":"api/#bindevent","text":"{chainable} icon : bindEvent ( iconEventName , callback ) Connects to an icon event with iconEventName . It's important to remember all event names are in camelCase. callback is called with arguments (self, ...) when the event is triggered.","title":"bindEvent"},{"location":"api/#unbindevent","text":"{chainable} icon : unbindEvent ( iconEventName ) Unbinds the connection of the associated iconEventName .","title":"unbindEvent"},{"location":"api/#bindtogglekey","text":"{chainable} icon : bindToggleKey ( keyCodeEnum ) Binds a keycode which toggles the icon when pressed. See toggle keys for more details.","title":"bindToggleKey"},{"location":"api/#unbindtogglekey","text":"{chainable} icon : unbindToggleKey ( keyCodeEnum ) Unbinds the given keycode.","title":"unbindToggleKey"},{"location":"api/#call","text":"{chainable} icon : call ( func ) Calls the function immediately via task.spawn . The first argument passed is the icon itself. This is useful when needing to extend the behaviour of an icon while remaining in the chain.","title":"call"},{"location":"api/#addtojanitor","text":"{chainable} icon : addToJanitor ( userdata ) Passes the given userdata to the icons janitor to be destroyed/disconnected on the icons destruction. If a function is passed, it will be called when the icon is destroyed.","title":"addToJanitor"},{"location":"api/#lock","text":"{chainable} icon : lock () Prevents the icon being toggled by user-input (such as clicking) however the icon can still be toggled via localscript using methods such as icon:select() .","title":"lock"},{"location":"api/#unlock","text":"{chainable} icon : unlock () Re-enables user-input to toggle the icon again.","title":"unlock"},{"location":"api/#debounce","text":"{chainable} {yields} icon : debounce ( seconds ) Locks the icon, yields for the given time, then unlocks the icon, effectively shorthand for icon:lock() task.wait(seconds) icon:unlock() . This is useful for applying cooldowns (to prevent an icon from being pressed again) after an icon has been selected or deselected.","title":"debounce"},{"location":"api/#autodeselect","text":"{chainable} icon : autoDeselect ( true ) When set to true (the default) the icon is deselected when another icon (with autoDeselect enabled) is pressed. Set to false to prevent the icon being deselected when another icon is selected (a useful behaviour in dropdowns).","title":"autoDeselect"},{"location":"api/#oneclick","text":"{chainable} icon : oneClick ( bool ) When set to true the icon will automatically deselect when selected. This creates the effect of a single click button.","title":"oneClick"},{"location":"api/#setcaption","text":"{chainable} icon : setCaption ( text ) Sets a caption. To remove, pass nil as text . See captions for more details.","title":"setCaption"},{"location":"api/#setcaptionhint","text":"{chainable} icon : setCaptionHint ( keyCodeEnum ) This customizes the appearance of the caption's hint without having to use icon:bindToggleKey .","title":"setCaptionHint"},{"location":"api/#setdropdown","text":"{chainable} icon : setDropdown ( arrayOfIcons ) Creates a vertical dropdown based upon the given table array of icons . Pass an empty table {} to remove the dropdown. See [dropdowns] for more details.","title":"setDropdown"},{"location":"api/#joindropdown","text":"{chainable} icon : joinDropdown ( parentIcon ) Joins the dropdown of parentIcon . This is what icon:setDropdown calls internally on the icons within its array.","title":"joinDropdown"},{"location":"api/#setmenu","text":"{chainable} icon : setMenu ( arrayOfIcons ) Creates a horizontal menu based upon the given array of icons. Pass an empty table {} to remove the menu. See [menus] for more details.","title":"setMenu"},{"location":"api/#joinmenu","text":"{chainable} icon : joinMenu ( parentIcon ) Joins the menu of parentIcon . This is what icon:setMenu calls internally on the icons within its array.","title":"joinMenu"},{"location":"api/#leave","text":"{chainable} icon : leave () Unparents an icon from a parentIcon if it belongs to a dropdown or menu.","title":"leave"},{"location":"api/#destroy","text":"{chainable} icon : destroy () Clears all connections and destroys all instances associated with the icon.","title":"destroy"},{"location":"api/#events","text":"","title":"Events"},{"location":"api/#selected","text":"icon . selected : Connect ( function ( fromSource ) -- fromSource can be useful for checking if the behaviour was triggered by a user (such as clicking) -- fromSource values include \"User\", \"OneClick\", \"AutoDeselect\", \"HideParentFeature\", \"Overflow\" local sourceName = fromSource or \"Unknown\" print ( \"The icon was selected by the \" .. sourceName ) end )","title":"selected"},{"location":"api/#deselected","text":"icon . deselected : Connect ( function ( fromSource ) local sourceName = fromSource or \"Unknown\" print ( \"The icon was deselected by the \" .. sourceName ) end )","title":"deselected"},{"location":"api/#toggled","text":"icon . toggled : Connect ( function ( isSelected , fromSource ) local stateName = ( isSelected and \"selected\" ) or \"deselected\" print ( ` The icon was { stateName } !` ) end )","title":"toggled"},{"location":"api/#viewingstarted","text":"icon . viewingStarted : Connect ( function () print ( \"A mouse, long-pressed finger or gamepad selection is hovering over the icon\" ) end )","title":"viewingStarted"},{"location":"api/#viewingended","text":"icon . viewingEnded : Connect ( function () print ( \"The input is no longer viewing (hovering over) the icon\" ) end )","title":"viewingEnded"},{"location":"api/#notified","text":"icon . notified : Connect ( function () print ( \"New notice\" ) end )","title":"notified"},{"location":"api/#properties","text":"","title":"Properties"},{"location":"api/#name","text":"{read-only} local string = icon . name --[default: \"Widget\"]","title":"name"},{"location":"api/#isselected","text":"{read-only} local bool = icon . isSelected","title":"isSelected"},{"location":"api/#enabled","text":"{read-only} local bool = icon . enabled","title":"enabled"},{"location":"api/#totalnotices","text":"{read-only} local int = icon . totalNotices","title":"totalNotices"},{"location":"api/#locked","text":"{read-only} local bool = icon . locked","title":"locked"},{"location":"contributing/","text":"Bug Reports \u00b6 To submit a bug report, open an issue or create a response at the discussion thread . Ensure your report includes a detailed explanation of the problem with any relavent images, videos, etc (such as console errors). Aim to include a link to a stipped-down uncopylocked Roblox place which reproduces the bug. Questions and Feedback \u00b6 Be sure to check out the documentation and resources first before asking a question. We recommend asking all questions and posting feedback to the discussion thread . Submitting a resource (video tutorial, port, etc) \u00b6 Fancy making a tutorial or resource for TopbarPlus? Feel free to get in touch and we can provide tips, best practices, etc. We'll feature approved resources on the resources page and often the discussion thread . To submit a resource, open an issue , or reach out on the discussion thread or to ForeverHD on the devforum . Suggestions and Code \u00b6 TopbarPlus is completely free and open source; any suggestions and code contributions are greatly appreciated! To make a suggestion, open an issue or create a response at the discussion thread . For large contributions (like a new feature) please open an issue before beginning a code contribution to ensure it's discussed through fully (we wouldn't want to waste your time!). For smaller contributions (a few lines of code, fixing typos, etc) feel free to send a pull request right away. Make sure to merge your pull requests into the #development branch. Some tools you'll find useful when working on this project: Rojo Material for MKDocs Roblox LSP Documentation \u00b6 If you find any problems in the documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them. To test documentation: Install Python (which comes with pip). Install Material for MKDocs . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Change directory to this clone cd TopbarPlus . Swap to the development branch git checkout development . Call mkdocs serve within your terminal. Open your local website (it will look something like http://0.0.0.0:8000 ) Any changes to mkdocs.yml or the files within docs will now update live to this local site. Important All pull requests must be made to the development branch.","title":"Contributing"},{"location":"contributing/#bug-reports","text":"To submit a bug report, open an issue or create a response at the discussion thread . Ensure your report includes a detailed explanation of the problem with any relavent images, videos, etc (such as console errors). Aim to include a link to a stipped-down uncopylocked Roblox place which reproduces the bug.","title":"Bug Reports"},{"location":"contributing/#questions-and-feedback","text":"Be sure to check out the documentation and resources first before asking a question. We recommend asking all questions and posting feedback to the discussion thread .","title":"Questions and Feedback"},{"location":"contributing/#submitting-a-resource-video-tutorial-port-etc","text":"Fancy making a tutorial or resource for TopbarPlus? Feel free to get in touch and we can provide tips, best practices, etc. We'll feature approved resources on the resources page and often the discussion thread . To submit a resource, open an issue , or reach out on the discussion thread or to ForeverHD on the devforum .","title":"Submitting a resource (video tutorial, port, etc)"},{"location":"contributing/#suggestions-and-code","text":"TopbarPlus is completely free and open source; any suggestions and code contributions are greatly appreciated! To make a suggestion, open an issue or create a response at the discussion thread . For large contributions (like a new feature) please open an issue before beginning a code contribution to ensure it's discussed through fully (we wouldn't want to waste your time!). For smaller contributions (a few lines of code, fixing typos, etc) feel free to send a pull request right away. Make sure to merge your pull requests into the #development branch. Some tools you'll find useful when working on this project: Rojo Material for MKDocs Roblox LSP","title":"Suggestions and Code"},{"location":"contributing/#documentation","text":"If you find any problems in the documentation, including typos, bad grammar, misleading phrasing, or missing content, feel free to file issues and pull requests to fix them. To test documentation: Install Python (which comes with pip). Install Material for MKDocs . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Change directory to this clone cd TopbarPlus . Swap to the development branch git checkout development . Call mkdocs serve within your terminal. Open your local website (it will look something like http://0.0.0.0:8000 ) Any changes to mkdocs.yml or the files within docs will now update live to this local site. Important All pull requests must be made to the development branch.","title":"Documentation"},{"location":"features/","text":"Images \u00b6 Icon . new : setImage ( shopImageId ) Labels \u00b6 icon : setLabel ( \"Shop\" ) icon : setImage ( shopImageId ) icon : setLabel ( \"Shop\" ) Alignments \u00b6 -- Aligns the icon to the left bounds of the screen -- This is the default behaviour so you do not need to do anything -- This was formerly called :setLeft() icon : align ( \"Left\" ) -- Aligns the icon in the middle of the screen -- This was formerly called :setMid() icon : align ( \"Center\" ) -- Aligns the icon to the right bounds of the screen -- This was formerly called :setRight() icon : align ( \"Right\" ) Notices \u00b6 icon : notify () Captions \u00b6 icon : setCaption ( \"Open Shop\" ) Dropdowns \u00b6 Dropdowns are vertical navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Dropdown\" , \"MaxIcons\" , 3 }) : modifyChildTheme ({ \"Widget\" , \"MinimumWidth\" , 158 }) : setDropdown ({ Icon . new () : setLabel ( \"Category 1\" ) , Icon . new () : setLabel ( \"Category 2\" ) , Icon . new () : setLabel ( \"Category 3\" ) , Icon . new () : setLabel ( \"Category 4\" ) , }) Menus \u00b6 Menus are horizontal navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Menu\" , \"MaxIcons\" , 2 }) : setMenu ({ Icon . new () : setLabel ( \"Item 1\" ) , Icon . new () : setLabel ( \"Item 2\" ) , Icon . new () : setLabel ( \"Item 3\" ) , Icon . new () : setLabel ( \"Item 4\" ) , }) Modify Theme \u00b6 You can modify the appearance of an icon doing: icon : modifyTheme ( modifications ) You can modify the appearance of all icons doing: Icon . modifyBaseTheme ( modifications ) modifications can be either a single array describing a change, or a colllection of these arrays. For example, both the following are valid: -- Single array icon : modifyTheme ({ \"IconLabel\" , \"TextSize\" , 16 }) -- Collection of arrays icon : modifyTheme ({ { \"Widget\" , \"MinimumWidth\" , 290 }, { \"IconCorners\" , \"CornerRadius\" , UDim . new ( 0 , 0 )} }) A modification array has 4 components: { name , property , value , iconState } 1. name {required} This can be: \"Widget\" (which is the icon container frame) The name of an instance within the widget such as IconGradient , IconSpot , Menu , etc A 'collective' - the value of an attribute called 'Collective' applied to some instances. This enables them to be acted upon all at once. For example, 'IconCorners'. 2. property {required} This can be either: A property from the instance (Name, BackgroundColor3, Text, etc) Or if the property doesn't exist, an attribute of that property name will be set 3. value {required} The value you want the property to become ( \"Hello\" , Color3.fromRGB(255, 100, 50) , etc) 4. iconState {optional} This determines when the modification is applied. See icon states for more details. You can find example arrays under the 'Default' module: One Click Icons \u00b6 You can convert icons into single click icons (icons which instantly deselect when selected) by doing: icon : oneClick () For example: Icon . new () : setImage ( shopImageId ) : setLabel ( \"Shop\" ) : bindEvent ( \"deselected\" , function () shop . Visible = not shop . Visible end ) : oneClick () Toggle Items \u00b6 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 \u00b6 Binds a keycode which toggles the icon when pressed. Also creates a caption hint of that keycode binding. Icon . new () : setLabel ( \"Shop\" ) : bindToggleKey ( Enum . KeyCode . V ) : setCaption ( \"Open Shop\" ) Gamepad & Console Support \u00b6 TopbarPlus comes with inbuilt support for gamepads (such as XBbox and PlayStation controllers) and console screens: To highlight the last-selected icon (or left-most if none have been selected yet) users simply press DPadUp or navigate to the topbar via the virtual cursor. To change the default trigger keycode (from DPadUp) do: Icon . highlightKey = Enum . KeyCode . NEW_KEYCODE Overflows \u00b6 When accounting for device types and screen sizes, icons may occasionally overlap. This is especially common for phones when they enter portrait mode. TopbarPlus solves this with overflows: Overflows will appear when left-set or right-set icons exceed the boundary of the closest opposite-aligned icon or viewport. If a center-aligned icon exceeds the bounds of another icon, its alignment will be set to the alignment of the icon it exceeded: These examples and more can be tested, viewed and edited at the v3 Playground .","title":"Features"},{"location":"features/#images","text":"Icon . new : setImage ( shopImageId )","title":"Images"},{"location":"features/#labels","text":"icon : setLabel ( \"Shop\" ) icon : setImage ( shopImageId ) icon : setLabel ( \"Shop\" )","title":"Labels"},{"location":"features/#alignments","text":"-- Aligns the icon to the left bounds of the screen -- This is the default behaviour so you do not need to do anything -- This was formerly called :setLeft() icon : align ( \"Left\" ) -- Aligns the icon in the middle of the screen -- This was formerly called :setMid() icon : align ( \"Center\" ) -- Aligns the icon to the right bounds of the screen -- This was formerly called :setRight() icon : align ( \"Right\" )","title":"Alignments"},{"location":"features/#notices","text":"icon : notify ()","title":"Notices"},{"location":"features/#captions","text":"icon : setCaption ( \"Open Shop\" )","title":"Captions"},{"location":"features/#dropdowns","text":"Dropdowns are vertical navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Dropdown\" , \"MaxIcons\" , 3 }) : modifyChildTheme ({ \"Widget\" , \"MinimumWidth\" , 158 }) : setDropdown ({ Icon . new () : setLabel ( \"Category 1\" ) , Icon . new () : setLabel ( \"Category 2\" ) , Icon . new () : setLabel ( \"Category 3\" ) , Icon . new () : setLabel ( \"Category 4\" ) , })","title":"Dropdowns"},{"location":"features/#menus","text":"Menus are horizontal navigation frames that contain an array of icons: Icon . new () : setLabel ( \"Example\" ) : modifyTheme ({ \"Menu\" , \"MaxIcons\" , 2 }) : setMenu ({ Icon . new () : setLabel ( \"Item 1\" ) , Icon . new () : setLabel ( \"Item 2\" ) , Icon . new () : setLabel ( \"Item 3\" ) , Icon . new () : setLabel ( \"Item 4\" ) , })","title":"Menus"},{"location":"features/#modify-theme","text":"You can modify the appearance of an icon doing: icon : modifyTheme ( modifications ) You can modify the appearance of all icons doing: Icon . modifyBaseTheme ( modifications ) modifications can be either a single array describing a change, or a colllection of these arrays. For example, both the following are valid: -- Single array icon : modifyTheme ({ \"IconLabel\" , \"TextSize\" , 16 }) -- Collection of arrays icon : modifyTheme ({ { \"Widget\" , \"MinimumWidth\" , 290 }, { \"IconCorners\" , \"CornerRadius\" , UDim . new ( 0 , 0 )} }) A modification array has 4 components: { name , property , value , iconState } 1. name {required} This can be: \"Widget\" (which is the icon container frame) The name of an instance within the widget such as IconGradient , IconSpot , Menu , etc A 'collective' - the value of an attribute called 'Collective' applied to some instances. This enables them to be acted upon all at once. For example, 'IconCorners'. 2. property {required} This can be either: A property from the instance (Name, BackgroundColor3, Text, etc) Or if the property doesn't exist, an attribute of that property name will be set 3. value {required} The value you want the property to become ( \"Hello\" , Color3.fromRGB(255, 100, 50) , etc) 4. iconState {optional} This determines when the modification is applied. See icon states for more details. You can find example arrays under the 'Default' module:","title":"Modify Theme"},{"location":"features/#one-click-icons","text":"You can convert icons into single click icons (icons which instantly deselect when selected) by doing: icon : oneClick () For example: Icon . new () : setImage ( shopImageId ) : setLabel ( \"Shop\" ) : bindEvent ( \"deselected\" , function () shop . Visible = not shop . Visible end ) : oneClick ()","title":"One Click Icons"},{"location":"features/#toggle-items","text":"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 )","title":"Toggle Items"},{"location":"features/#toggle-keys","text":"Binds a keycode which toggles the icon when pressed. Also creates a caption hint of that keycode binding. Icon . new () : setLabel ( \"Shop\" ) : bindToggleKey ( Enum . KeyCode . V ) : setCaption ( \"Open Shop\" )","title":"Toggle Keys"},{"location":"features/#gamepad-console-support","text":"TopbarPlus comes with inbuilt support for gamepads (such as XBbox and PlayStation controllers) and console screens: To highlight the last-selected icon (or left-most if none have been selected yet) users simply press DPadUp or navigate to the topbar via the virtual cursor. To change the default trigger keycode (from DPadUp) do: Icon . highlightKey = Enum . KeyCode . NEW_KEYCODE","title":"Gamepad & Console Support"},{"location":"features/#overflows","text":"When accounting for device types and screen sizes, icons may occasionally overlap. This is especially common for phones when they enter portrait mode. TopbarPlus solves this with overflows: Overflows will appear when left-set or right-set icons exceed the boundary of the closest opposite-aligned icon or viewport. If a center-aligned icon exceeds the bounds of another icon, its alignment will be set to the alignment of the icon it exceeded: These examples and more can be tested, viewed and edited at the v3 Playground .","title":"Overflows"},{"location":"installation/","text":"Take the model \u00b6 {recommended} Take the TopbarPlus model . Open the toolbox and navigate to Inventory -> My Models. Click TopbarPlus to insert into your game and place anywhere within ReplicatedStorage or Workspace . TopbarPlus is a package so you can update it instantly (instead of re-adding) by right-clicking the Icon module and selecting an option such as 'Get Latest Package': You can receive automatic updates by enabling 'AutoUpdate' within the PackageLink: Info All v3 updates will be backwards compatible so you don't need to worry about updates interfering with your code. Warning Try not to modify any code within the Icon package otherwise it will break the package link. Important As of 27th March 2024 public packages haven't been rolled out by Roblox. Only after their full release will you be able to benefit from easily installable updates. For the time being, attempting to use 'Get Latest Package' and other package features will throw an error. Download from Releases \u00b6 Visit the latest release . Under Assets , download TopbarPlus.rbxm . Within studio, navigate to MODEL -> Model and insert the file anywhere within ReplicatedStorage . With Rojo \u00b6 Setup with Rojo . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Modify the default.project.json file to your desired location (by default TopbarPlus is built directly into ReplicatedStorage ). Call rojo serve (terminal or VSC plugin) and connect to the rojo studio plugin. With Wally \u00b6 TopbarPlus is now on Wally! You can find it here .","title":"Installation"},{"location":"installation/#take-the-model","text":"{recommended} Take the TopbarPlus model . Open the toolbox and navigate to Inventory -> My Models. Click TopbarPlus to insert into your game and place anywhere within ReplicatedStorage or Workspace . TopbarPlus is a package so you can update it instantly (instead of re-adding) by right-clicking the Icon module and selecting an option such as 'Get Latest Package': You can receive automatic updates by enabling 'AutoUpdate' within the PackageLink: Info All v3 updates will be backwards compatible so you don't need to worry about updates interfering with your code. Warning Try not to modify any code within the Icon package otherwise it will break the package link. Important As of 27th March 2024 public packages haven't been rolled out by Roblox. Only after their full release will you be able to benefit from easily installable updates. For the time being, attempting to use 'Get Latest Package' and other package features will throw an error.","title":"Take the model"},{"location":"installation/#download-from-releases","text":"Visit the latest release . Under Assets , download TopbarPlus.rbxm . Within studio, navigate to MODEL -> Model and insert the file anywhere within ReplicatedStorage .","title":"Download from Releases"},{"location":"installation/#with-rojo","text":"Setup with Rojo . Visit the TopbarPlus repository . Click Fork in the top right corner. Clone this fork into your local repository. Modify the default.project.json file to your desired location (by default TopbarPlus is built directly into ReplicatedStorage ). Call rojo serve (terminal or VSC plugin) and connect to the rojo studio plugin.","title":"With Rojo"},{"location":"installation/#with-wally","text":"TopbarPlus is now on Wally! You can find it here .","title":"With Wally"},{"location":"resources/","text":"Theme Settings Model Playground Discussion Repository Roblox-TS Port by grilme99 YouTube Video by Inctus If you would like to submit a resource (such as a video tutorial, port, etc), please see contributing .","title":"Resources"},{"location":"third_parties/","text":"TopbarPlus supports the use of multiple Icon packages within a single experience assuming all required packages are v3.0.0 or above. When a package is required it will 'check' to see if a TopbarPlus package has already been required within the experience. If one has, it cancels loading itself and will instead refer to the already initialized package. This prevents weird quirks from occuring and means third party applications, libraries etc that use TopbarPlus can be used safely without interferring with your own implementation of TopbarPlus. You don't have to do anything to support multiple packages. Simply use TopbarPlus as normal.","title":"Third Parties"}]}
\ No newline at end of file
diff --git a/site/sitemap.xml b/site/sitemap.xml
index 4cef2c7..3577a6d 100644
--- a/site/sitemap.xml
+++ b/site/sitemap.xml
@@ -2,37 +2,37 @@
 
     
          https://1ForeverHD.github.io/TopbarPlus/
-         2024-03-26
+         2024-04-05
          daily
     
     
          https://1ForeverHD.github.io/TopbarPlus/api/
-         2024-03-26
+         2024-04-05
          daily
     
     
          https://1ForeverHD.github.io/TopbarPlus/contributing/
-         2024-03-26
+         2024-04-05
          daily
     
     
          https://1ForeverHD.github.io/TopbarPlus/features/
-         2024-03-26
+         2024-04-05
          daily
     
     
          https://1ForeverHD.github.io/TopbarPlus/installation/
-         2024-03-26
+         2024-04-05
          daily
     
     
          https://1ForeverHD.github.io/TopbarPlus/resources/
-         2024-03-26
+         2024-04-05
          daily
     
     
          https://1ForeverHD.github.io/TopbarPlus/third_parties/
-         2024-03-26
+         2024-04-05
          daily
     
 
\ No newline at end of file
diff --git a/site/sitemap.xml.gz b/site/sitemap.xml.gz
index c2292e8..b684d9f 100644
Binary files a/site/sitemap.xml.gz and b/site/sitemap.xml.gz differ