(Ver 1.0) MaterialPlus | Create professional looking interface for your games

Tom_atoes · May 30, 2020, 1:41pm

MaterialPlus | The best way to create material interface.

Me and my partner @fivefactor teamed up to create MaterialPlus in an effort to recreate his old module, MaterialR.

All UI elements in this module were created by fivefactor.

What is MaterialPlus?

MaterialPlus is a framework developed by myself and fiveFactor aimed at creating material user interface. It is similar in likes to Roact and studio widgets. MaterialPlus isn’t intended for normal games, but instead intended for:

Portfolios
Application Centers
Restaurants / other Roblox companies
Admin Panels / other things similar.

However, you may use MaterialPlus in whichever way you desire!

What features does MaterialPlus offer other than MaterialUI?

MaterialPlus provides MaterialUI that can be customised to your liking. We currently offer three custom UI instances, all made with one function. These include:

All of these custom instances are fully customisable with their own custom properties. Also all of the UI you see in these videos were made with MaterialPlus (except CoreGUI). We plan on adding in more custom UI Instances in the future, drop suggestions in the replies if you have any!

MaterialPlus also offers two new universal properties for every UI Instance currently supported! These are Style (Dark, Light) and Shadow (true / false). We plan on adding more universal properties in the future, feel free to suggest any in replies!

Most importantly, MaterialPlus is easy to customise to your liking. You can add in your own UI Instances and edit current ones without having to edit the main module! If you have created a custom UI instance / property and want to share it with others, message me or fiveFactor and we will add it if we think it is good!

Where do I get MaterialPlus?

MaterialPlus is available as a free model. You cannot use require(id) for MaterialPlus as the client cannot load modules from id.

https://www.roblox.com/library/5101861904/MaterialPlus

You can view documenation for MaterialPlus here: MaterialPlus | Documentation

Thanks for reading this post, we hope you enjoy using our framework!

Demo Place:
MaterialPlus_DemoPlace.rbxl (48.3 KB)

Special thanks to: @brokenVectors @Streeteenk @Snowskateer @codes4breakfast @mircostaff for helping test this framework before release.

Abhay216 · May 30, 2020, 1:44pm

Thanks soo much I been looking for this for hours now!!!

ZacBytes · May 30, 2020, 2:12pm

Look smooth and fluid, not a big fan of the dropdown menu though.

TheDemoDeveloper · May 30, 2020, 2:15pm

Thank you Tom, very cool

i like switches

PizzaWillEatUs525 · May 30, 2020, 5:41pm

This will help me with some of my projects! Thank you very much!

chainreactionist · October 6, 2021, 11:02pm

Buttons are broken Has this issue been fixed yet?

SillyMeTimbers · October 7, 2021, 1:38am

Glad this post was bumped, I may use it for Plugins as it seems it would fit that very well. Just have to wait for those buttons to be fixed.

chainreactionist · October 7, 2021, 7:59pm

I don’t think they plan to fix this anytime soon

SillyMeTimbers · October 7, 2021, 8:11pm

If they don’t I’ll have to look into it myself, Its a neat system for plugin development.
Can’t let it go to waste.

edit

If they ever do fix it they need a Color3 picker too, That’d be useful.

chainreactionist · October 7, 2021, 8:13pm

I’ll help you out. We can make it a Github Repo and allow others to add on if they Chainreactionist#1067

NickIsANuke · January 20, 2022, 1:55am

*Fixed; see bottom of post.

Hi there, I seem to be having an issue. I’m using a dropdown, but I wanted it to disable after an option is clicked to give some user feedback. (This may be an idea for an update to the module?) I used the following for the dropdown options:

local DROPDOWN_OPTIONS = {
	["SELECT TYPE"] = function()
		dropdownChoice = "SELECT TYPE"
		DropdownText.Text = dropdownChoice
		
		if DropMenu then
			DropMenu:Disable()
			wait(0.5)
			DropMenu:Enable()
			
			print("enabled")
		end
	end, 
	
	["Feedback"] = function()
		dropdownChoice = "Feedback"
		DropdownText.Text = dropdownChoice
		
		if DropMenu then
			DropMenu:Disable()
			wait(0.5)
			DropMenu:Enable()
			
			print("enabled")
		end
	end, 
	
	["Bug"] = function()
		dropdownChoice = "Bug"
		DropdownText.Text = dropdownChoice
		
		if DropMenu then
			DropMenu:Disable()
			wait(0.5)
			DropMenu:Enable()
			
			print("enabled")
		end
	end
}

Everything works fine, but it will print out “enabled,” and then mousing over the dropdown it does not re-appear. Am I doing something wrong?

ISSUE FIXED
I got around this by just deleting the old drop menu and creating a new one whenever the menu is pressed.

ShxdowLIVE · February 8, 2022, 1:13am

Not the best looking UI, but I love the sliders!

Gustavo10Destroyer · August 27, 2022, 4:52pm

Please add support for Edit the theme, and the options that are not set, do not change.

Later, if I don’t get lazy, I will add variables to this, it will work similar to AngularJS

Gustavo10Destroyer · August 27, 2022, 4:53pm

I like the library, it is simple but functional and beautiful.

d5_ax · September 16, 2023, 1:47pm

Very clean UI although it seems the MouseButton1Click Event for TextButton isn’t working? But the MouseEnter works fine

VSCPlays · September 16, 2023, 2:36pm

Is it just me or when I press the model link it sends me to an error page

sorry if it took 14 seconds I have trouble using the hotkeys