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.
The first issue won’t be related to Topbar+. For the second, you can find documentation here if you’re interested in learning about V1 themes. The current theme system is quite confusing to work with, so we’ve developed a new one we’ll hopefully have released soon.
3 Likes
This resource is great! I love when we can make our interfaces fit in with the style Roblox is going for.
I do have a problem with dropdowns though. Whenever I attempt to interact with the dropdown I created, (except for when I set a button assigned to the dropdown, which makes me believe there isn’t really an error with the dropdown table…) the script errors out on attempting to call a nil value.
The code I’m attempting to run:
Dropdown Table
local tutDropdown = {
{
name = "Join Group",
icon = "rbxassetid://2746105644",
clicked = function()
print("soon")
end,
events = {}
},
{
name = "Activities",
icon = "rbxassetid://2746074974",
clicked = function()
print("soon")
end,
events = {}
},
{
name = "About",
icon = "rbxassetid://2746077483",
clicked = function()
gui.About.Visible = not gui.About.Visible
end,
events = {}
},
}
Part of the script that errors out (trying to set some properties of the dropdown)
tutDropdown:set("closeWhenClicked", false)
tutDropdown:set("closeWhenClickedAway", true)
Defining the button
local tutorialIcon = iconController:createIcon("Tutorial", 5908536412, 3)
tutorialIcon:setLabel("Help")
tutorialIcon:setTip("Join Group & Guide & About")
tutorialIcon:createDropdown(tutDropdown) -- I tried with and without this part, still the same result.
Another part which errors out (trying to bind left-click to open the dropdown in a ‘hacky’ way.)
local function forceDropdown()
local bool = tutDropdown:isOpen()
if bool then
tutDropdown:hide()
else
tutDropdown:show()
end
end
tutorialIcon:setToggleFunction(forceDropdown)
I really have no idea what exactly is the issue. The table seems fine, and I’ve already said an argument to my reasoning, and it’s not very easy for me to debug anything in the TopBar+ module considering the error comes from the LocalScript that makes the top bar and doesn’t bring any details.
PlayerScripts.TopBarGenerator:102: attempt to call a nil value
pls help