MaterialPlus | The best way to create professional interface.
It is recommended that you have good knowledge in scripting to use this framework.
This post will contain all the information you need to know about MaterialPlus, if you want to know how to do something that isn’t listed here please shoot me a message on the DevForum.
If you find a bug or anything similar message me on the DevForum.
To find a specific UI instance and it’s properties use Ctrl + F and enter the instance you would like to view.
Module: https://www.roblox.com/library/5101861904/MaterialPlus
MaterialPlus Functions
MaterialPlus:Create()
Creating a new UI Instance is simple with MaterialPlus. The main MaterialPlus module contains a function called :Create(UIInstanceName, Properties). This will create the UI instance and return it’s functions.
There are currently two ways to get the name of an instance, either simply use the name of the instance or use one of the custom Enum items in the module by doing:
MaterialPlus.Instances.UIInstanceName
To choose the instance to create set the first argument to the name of the instance.
The second argument is a table containing the properties of your instance. The only required property is “Parent”.
Once you have created a UI instance, you can edit its properties with :Edit() or UIInstance.Property.
To set an instance as a parent you will have to use UIInstance.UIInstance
Example:
local MaterialPlus = require(RepStorage.MaterialPlus)
local TextLabel = MaterialPlus:Create(MaterialPlus.Instances.TextLabel, {
Name = "Test Label";
Parent = script.Parent;
Text = "Hello world!";
Position = UDim2.new(0.5, 0, 0.5, 0);
AnchorPoint = Vector2.new(0.5, 0.5);
Size = UDim2.new(0, 300, 0, 100);
Style = "Dark";
Shadow = true;
ZIndex = 2;
})
print(TextLabel.Text)
TextLabel.Text = "Hey :D"
UIInstance:Edit()
Once you have created your instance you can edit it’s properties using :Edit(table). The first argument is a table of the properties you want to change. :Edit() is intended for editing properties in bulk.
Example:
local TextLabel = MaterialPlus:Create(MaterialPlus.Instances.TextLabel, {Parent = script.Parent})
TextLabel:Edit({
Name = "Test";
BackgroundColor3 = Color3.fromRGB(255, 0, 0)
})
UIInstance:Tween()
To tween your instance you can use UIInstance:Tween(TweenInfo, table, bool). Set the first argument to your desired TweenInfo. The second argument is the tween goal. The third argument determines if your script should wait until the tween has finished.
Example:
local TextLabel = MaterialPlus:Create(MaterialPlus.Instances.TextLabel, {Parent = script.Parent})
local Goal = {
Position = UDim2.new(0.5, 0, 0, 0);
BackgroundColor3 = Color3.fromRGB(0, 255, 0)
}
TextLabel:Tween(TweenInfo.new(1), Goal, false)
Supported UI Instances
TextLabel
Has all the default properties of a TextLabel instance.
Has all the same functions / events of a TextLabelinstance.
MaterialPlus.Instances.TextLabel
TextButton
Has all the default properties of a TextButton instance.
Has all the same functions / events of a TextButton instance.
MaterialPlus.Instances.TextButton
TextBox
Has all the default properties of a TextBox instance.
Has all the same functions / events of a TextBox instance.
MaterialPlus.Instances.TextBox
Frame
Has all the properties of a frame instance.
Has all the same functions / events of a Frame instance.
MaterialPlus.Instances.Frame
Custom Properties:
- RoundedCornerPix - Determines if the instance is rounded or not. Set to 0 for no rounded corners.
ScrollingFrame
Has all the properties of a ScrollingFrame instance.
Has all the same functions / events of a ScrollingFrame instance.
Note: to get the scrolling frame instance you will have to do ScrollingFrame.Frame
MaterialPlus.Instances.ScrollingFrame
Custom Properties:
- RoundedCornerPix - Determines if the instance is rounded or not. Set to 0 for no rounded corners.
Custom UI Instances
Drop Down Menus
MaterialPlus includes a custom UI instance known as “DropMenu”. This creates a drop down menu under any UI instance (frame, textlabel, imagelabel, etc), and is activated by hovering over it.
This DropMenu instance has three of it’s own properties, one of which is required. These are listed below.
DropMenu.Options (Required)
A table containing the options names and clicked functions.
You can edit the way the buttons look with the following properties:
- TextButtonTransparency
- Font
- TextColor3
- AutoButtonColor
- ButtonSize
- TextSize
- BorderColor3
- BorderSizePixel
- TextXAllignment
- TextYAllignment
Example:
local DropMenu = MaterialPlus:Create(MaterialPlus.Instances.DropMenu, {
Options = {
["ButtonName"] = function()
print("Hello World!")
end;
}
})
DropMenu.OpenTweenInfo (Optional)
The TweenInfo of the opening / closing sequence in the menu. (Default = TweenInfo.new(0.25))
Example:
local DropMenu = MaterialPlus:Create("DropMenu", {
OpenTweenInfo = TweenInfo.new(0.5);
})
DropMenu.Placement (Optional)
This determines the position of where the DropMenu will come from. Default = “BottomRight”
Currently supported placements:
- BottomRight
- BottomMiddle
- BottomLeft
- TopRight
- TopMiddle
- TopLeft
Example:
local DropMenu = MaterialPlus:Create(MaterialPlus.Instances.DropMenu, {
Placement = "TopMiddle";
})
You can enable / disable a drop menu with DropMenu:Enable() and DropMenu:Disable(). By default it is disabled.
Example:
local MatPlus = require(RepStorage.MaterialPlus)
local TextLabel = MatPlus:Create(MaterialPlus.Instances.TextLabel, {Parent = script.Parent})
local DropMenu = MatPlus:Create(MaterialPlus.Instances.DropMenu, {
Parent = TextLabel.UIInstance;
Options = {
["Test1"] = function()
print("Clicked!")
end
};
Placement = "TopLeft";
OpenTweenInfo = TweenInfo.new(0.25);
})
DropMenu:Enable()
Switches
MaterialPlus includes a “Switch” instance. It has some of its own properties, all of which are optional. These are listed below:
- OnColor3 - The background colour of the switch when it is set to true.
- OffColor3 - The background colour of the switch when it is set to false.
- SwitchColor3 - The colour of the switch icon.
- BorderSizePixel - The size of the border around the switch.
- BorderColor3 - The colour of the border.
- SwitchTweenInfo - The TweenInfo for the switches toggle movement. Default TweenInfo.new(0.15)
The switch instance has three of it’s own functions, these are listed below.
Switch:Toggle(boolean)
This will force toggle the switch to true / false.
Switch:Toggle(true)
Switch:Enable()
Enables the switch.
Switch:Disable()
Disables the switch.
The switch instance also has an event for when a player interacts with it.
Switch.ValueChanged
An event that fires whenever the switch is interacted with.
Switch.ValueChanged:Connect(function(NewValue)
print(NewValue) -- // prints true / false
end)
Example:
local Switch = MatPlus:Create(MaterialPlus.Instances.Switch, {
Parent = script.Parent;
SwitchTweenInfo = TweenInfo.new(0.5);
})
Switch:Toggle(true)
Switch:Enable()
Sliders
Some code from the slider was provided by @Fm_Trick . All credit goes to him, get his slider module here: Basic Slider Element
MaterialPlus includes a “Slider” instance. It has four of its own properties, these are listed below.
- Round - Rounds to the nearest integer. When false will round to 1 d.p. False by default.
- MinValue - Minimum Value
- MaxValue - Maxmium Value
- SliderColor3 - The colour of the slider.
The slider instance has three functions. These are documented below.
Slider:MoveSlider(value)
Moves the slider to the desired value.
Example:
Slider:MoveSlider(0.5)
Slider:Enable()
Enables the slider.
Slider:Disable()
Disables the slider.
The slider instance also has its own event, ValueChanged.
ValueChanged
Fires whenever the slider is moved.
Example:
Slider.ValueChanged:Connect(function(NewValue)
print(NewValue)
end)
Example:
local MaterialPlus = require(game.ReplicatedStorage.MaterialPlus)
local Slider = MaterialPlus:Create(MaterialPlus.Instances.Slider, {
Parent = script.Parent;
Position = UDim2.new(0.5, 0, 0.5, 0);
AnchorPoint = Vector2.new(0.5, 0.5);
MaxValue = 5;
MinValue = 0;
})
Slider:MoveSlider(2.5)
Slider:Enable()
Custom Universal Properties
UI Styles
As of 22/05/2020 (DD/MM/YYYY) MaterialPlus includes the following styles for UI Instances:
- Dark - Gives the UI instance a dark theme.
- Light - Gives the UI instance a light theme. (default theme)
These styles can be overridden by setting your own properties when creating an instance, any properties that weren’t defined by you will default to your chosen theme.
Shadows
As of 22/05/2020 (DD/MM/YYYY) MaterialPlus offers one type of shadow. This can be applied by setting Shadow as a property when creating or editing a UI instance.
MaterialPlus_DemoPlace.rbxl (48.3 KB)