Hey there! I am trying to use your service to make a ‘Info’ dropdown with the Blue Gradient theme and for some reason it will not work. If you or somebody else could give their opinion, i’d greatly appreciate it.
1 Like
By looking at the code I see that you are trying to reference a GUI in StarterGui. All GUIs in StarterGui gets cloned to each player’s “PlayerGui”. This means that the GUI you are looking for should be under the respective player’s PlayerGui.
Instead of this:
local StarterGui = game:GetService("StarterGui")
local gui = game.StarterGui
Try:
local localPlayer = game:GetService("Players").LocalPlayer
local playerGui= localPlayer:WaitForChild("PlayerGui")
local gui = playerGui:WaitForChild("GUIName")
Hello! How can I connect my own UI to this system? Thanks.
Expanding upon what Lucke said, within the clicked function of dropdown items, make sure to call an action to open your desired GuiObject, don’t use icon:setToggleMenu(gui.StatsFrame) as this binds the icon, not the dropdown item itself.
For instance, if you wanted to open the dropdowns parent icon, you would do:
clicked = function()
icon:select()
end,
For your example it appears you want to open other pages, so you can do something like this instead:
clicked = function()
gui.StatsFrame.Visible = true
end,
In terms of theming, dropdowns aren’t supported by themes. You instead have to do:
dropdown:set(setting, value).
For instance:
dropdown:set("backgroundColor", Color3.fromRGB(100, 100, 100))
You can learn more about dropdowns here and here.
Make sure to right-click on PC or long-press on mobile to open a dropdown.
2 Likes
local icon = iconController:createIcon("Shop", 4882429582, 1)
icon:setToggleMenu(playerGui.ShopGui.ShopFrame)
Make sure the GuiObject you’re binding persists on respawn:
1 Like
Okay now I understood, and successfully did it! Thanks!
Great! How would I make it so that you can left-click for the dropdown and not right-click?
That isn’t directly supported, however you can achieve it by doing:
local dropdown = icon:createDropdown()
icon.selected:Connect(function()
dropdown:show()
end)
icon.deselected:Connect(function()
dropdown:hide()
end)
Clicking away from the dropdown may cause it to hide. If this is a problem we can look at introducing a setting to stop the dropdown closing by default.
2 Likes
Wow thanks!
The icon won’t appear, still. Do I need to enable HTTPService or something?
Is it possible to make a topbar button only appear locally?
Yes.
All icons should be created locally on each client. If that’s what you meant?
Okay I have the icon appearing now but when I click on it nothing happens except it selecting itself.
EDIT: I got it workin but when I click on my ‘performance’ button it shows my performance menu, but when i click on it again, it doesn’t close. any suggestions?
Thanks for your patience, I’ve changed a lot of the internal workings of dropdowns and introduced some new settings to help with your specific use-case:
(Original behaviour left, new customisable behaviour right)
To achieve the new behaviour after creating a dropdown, simply do:
dropdown:set("bindToIcon", true)
dropdown:set("closeWhenClicked", false)
dropdown:set("closeWhenClickedAway", true)
I’ve completed your pastebin example to work with this update:
local replicatedStorage = game:GetService("ReplicatedStorage")
local topbarPlus = replicatedStorage:WaitForChild("HDAdmin"):WaitForChild("Topbar+")
local iconController = require(topbarPlus.IconController)
local localPlayer = game:GetService("Players").LocalPlayer
local playerGui= localPlayer:WaitForChild("PlayerGui")
local statsGui = playerGui:WaitForChild("StatsGui")
local infoIcon = iconController:createIcon("Info", 5826692725, 1)
local dropdown = infoIcon:createDropdown({
{
name = "About",
icon = "rbxassetid://5826692978",
clicked = function()
print("Navigate to About")
end,
events = {}
},
{
name = "Controls",
icon = "rbxassetid://5826692189",
clicked = function()
print("Navigate to Controls")
end,
events = {}
},
{
name = "Performance",
icon = "rbxassetid://5826365424",
clicked = function()
statsGui.StatsFrame.Visible = not statsGui.StatsFrame.Visible
end,
events = {}
},
{
name = "Settings",
icon = "rbxassetid://5826220117",
clicked = function()
print("Navigate to Settings")
end,
events = {}
},
{
name = "Feedback",
icon = "rbxassetid://2746112353",
clicked = function()
print("Navigate to Feedback")
end,
events = {}
},
})
dropdown:set("bindToIcon", true)
dropdown:set("closeWhenClicked", false)
dropdown:set("closeWhenClickedAway", true)
4 Likes
Hello @ForeverHD
I have a request to make.
Would it be possible to make a design system to use, for example, modules such as dropdown or captions in a menu? (TextLabel, Frame etc…). I.e., add the features that Topbar+ has in a module or plugin to use them in UI.
I’m seriously considering using this. Does mobile currently support captions or tips when holding down an icon, like you’d expect in an Android app?
Additionally, does this work well in portrait mode on a phone? I tried the test place but you don’t have sensor orientation enabled.
Thanks man!
Don’t feel bad about the delay, it happens to the best of us. As for the dropdowns, I believe that the new system is perfect for what I am trying to achieve!
@ForeverHD
Absolutely Amazing! I look forward to using this in my current project.
Thank you for contributing to the community!
Amazing, but some of the features of the script don’t work. I did everything correctly…
Which features are you trying to setup? Can you provide code snippets?
1 Like
Unfortunately, I have managed to delete the project, but I remember which features doesn’t work. So the output was filled with errors starting from HD admin, with sounds, and connection lost at something like SubscribeAsync, and in Topbar+, I did not tried every feature of the system, but the thing with setTheme for all UI objects gived me an error. I specified in the local script everything was supposed to be there. Also, the dropdown, the 2nd example, gived me an error.