MaterialR - UI Framework

Resources Community Resources
#14

UI is extremely clean! Definitely will use.

#15

Collaborating with @spooky_month to redo this and add more UI components. Feel free to comment with suggestions anyone may have.

#16

Updated to V1.3!

What we changed:

  • Converted module to package for easy updates
  • Fixed a bug with certain TextBox properties
  • Added a Switch object

https://gyazo.com/f5c293d902d4e9216a913bf1a7a9034f.gif

3 Likes
#17

While it’s nice to get notified of new updates, they should rather go into the op in a spoiler with subspoilers, example below.
The framework looks nice, but are there any plans for the future to make this a roact component for those who use roact primarily (it’s a pain to implement those frameworks into roact sometimes)?

(Now the update example)

Updates
Version 1.3

Changelog

3 Likes
#18

Will update the thread tomorrow night. Also, I am planning to collaborate with other developers to help add roach compatibility and plan to start this Thursday or maybe even earlier.

#19

YES OMG DARK MODE MY EYES ARE SAVED THX YOU

This is a module i’d use; The UI especially looks modern, and looks fitting in one of my games.

1 Like
#20

This open-sourced right? Correct me if I’m wrong.

#21

Yes, you can use the link provided to take a copy of the module

#22

Awesome UI framework and great explanations! Glad to see people contributing to the idea of open-sourcing. Developers who have difficulty using other options like Roact can probably use this for their projects.

1 Like
#23

This UI Module Is what start UI Designers need! Great work!

:+1:

1 Like
#24

Quick Suggestion for it.
I changed the mouse click to:

local connection

local Disabled, dColor = UDim2.new(0, 3, 0.5, 0), Color3.fromRGB(129, 129, 129)
local Enabled, eColor = UDim2.new(0.64, -3, 0.5, 0), Color3.fromRGB(143, 63, 193)

local function toggle(ui)
	if ui:WaitForChild("Switch").ImageColor3 == dColor then
		ui:WaitForChild("Switch"):WaitForChild("Circle"):TweenPosition(Enabled, "Out", "Quint", .3, true)
		ui:WaitForChild("Switch").ImageColor3 = eColor
		return true
	else
		ui:WaitForChild("Switch").ImageColor3 = dColor
		ui:WaitForChild("Switch"):WaitForChild("Circle"):TweenPosition(Disabled, "In", "Quint", .3, true)
		return false
	end
end

return function(ui, bindable)
	if connection then connection:Disconnect() end
	
	connection = ui:WaitForChild("Switch"):WaitForChild("Circle").MouseButton1Click:Connect(function()
		bindable:Fire(toggle(ui))
	end)
	connection = ui:WaitForChild("Switch").MouseButton1Click:Connect(function()
		bindable:Fire(toggle(ui))
	end)
end

Basically, what it does it when you toggle the switch; it also returns the status of the swicth; so that you can do this:

switch.MouseButton1Click:Connect(function(toggle)
	if toggle == true then
		print("Switch Enabled")
	end
	if toggle == false then
		print("Switch Disabled")
	end
end)
2 Likes
#25

I usually program so I am bad at UI so this helps a lot I don’t know if I will use it yet though because I don’t like writing code to see the UI after playing if there was a plugin that uses it I would use it

#26

This is already implemented in 2.0

#27

Perfect.
Thanks.
Do you have an ETA with 2.0?

#28

Suggestion:
Add Dropdown Boxes to MaterialR.

1 Like
#29

Hey guys, sorry about the lack of updates. Here is some additional updates on the MaterialR rewrite:

MaterialR is still supported. The rewrite will most likely be finished in 2 weeks. If you have any additional feedback for features you’d like to see in the new version, leave a reply here.

3 Likes
#30

Will the support for Roact be included with the rewrite?

2 Likes
#31

I’ll consider this after I finish the core of the rewrite

1 Like
#32

When I press the link given, I guess nothing comes out, the link is broken

#33

Fixed the link, (Ver 1.0) MaterialPlus | Create professional looking interface for your games