Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing UXPin Merge!
You have completed Introducing UXPin Merge!
Preview
Explore how to integrate Material-UI (MUI) React components into UXPin using UXPin Merge. Learn to customize component properties, set up interactions, and enhance your UX designs efficiently. Ideal for designers seeking to combine the functionality of MUI with the flexibility of UXPin.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome to video three.
0:00
In this video, we'll be exploring
the magic of UXPin Merge.
0:02
We'll get to see how React
components like the MUI components,
0:07
are handled in UXPin when using Merge.
0:11
If you're already familiar with MUI
5 components, then you'll be quite
0:14
familiar with the names and properties
that will come across in this video.
0:19
If you're not familiar with MUI5,
don't worry.
0:23
We'll be having a brief look at how we can
jump over to the documentation from UXPin
0:26
so that you can familiarize yourself with
a component and how it's built for React.
0:32
Now, I'm personally someone who
doesn't use MUI much in my own work,
0:38
but I am familiar with design systems, so
just know that we're in this together.
0:43
Let's have a look at MUI's page
that lists all their components.
0:48
These are all building blocks created
by MUI that help us developers
0:53
create user interfaces quickly.
0:58
These are all very common and
1:00
familiar web patterns that we see
all over the internet ourselves.
1:01
So we can see this card,
we can say pagination menu,
1:05
tabs, all very familiar components.
1:10
Using this huge library of building
blocks we can create something that is
1:14
uniquely ours.
1:19
For us, thanks to UXPin Merge,
1:20
we can use these very building
blocks directly in UXPin.
1:23
All of these components that we see
on this page are the exact same
1:27
components that we see in the design
systems library over here.
1:32
Everything here is pulled
directly from MUI, code and all.
1:37
So these are not just pre-built
visual components, but
1:42
actual MUI React components
that really work.
1:46
So for example, if we come back up here,
this card right here is the exact
1:50
same card that we've been playing
with this whole time in UXPin.
1:56
Now, because we're playing with
MUI React components here in UXPin,
2:01
we can utilize MUI's documentation to
check out the different react props and
2:06
play by their rules.
2:11
So let's pick up where we left off in the
last video and click on the card component
2:12
in our canvas and make sure it is
highlighted with that orange outline.
2:17
And we were just talking about
this section right here,
2:22
which tells us more about the MUI
component that we've selected.
2:25
As you might remember, we can also
click on this icon on the bottom
2:29
right hand corner, and
the documentation from MUI will pop up.
2:33
Scrolling down a little bit,
you'll find this props heading.
2:38
Now I've got the table view selected.
2:42
So if it looks different to you,
you can head on to the top right here and
2:44
select this icon.
2:48
And we can see four props
listed on the website.
2:49
There's children, classes, raised and sx.
2:52
These are the MUI card
components React props.
2:57
So if you're familiar with
using MUI components in React,
3:00
these will look super familiar to you.
3:04
Now these props are what
changes the look and
3:06
feel of this particular card component.
3:09
And here we can see the name, the type,
the default value and a short description.
3:11
Now if we head back to UXPin,
where we have our card component selected,
3:17
we can see those four props right here.
3:22
There's children, classes, raised,
and all the way at the bottom, sx.
3:24
But what about these?
3:30
There's elevation, variant, and square.
3:31
Let's hop back to the docs and
come down here.
3:34
It says the props of the paper
component are also available in card.
3:37
So let's click through to that, and
here we see our missing three props.
3:41
There's elevation, square, and variant.
3:46
So if you're ever confused
as to why a component
3:50
doesn't have a certain prop in the docs,
3:53
be sure to check the small text to see if
it shares a prop with another component.
3:56
Now one more thing that's really
cool is that UX can merge.
4:01
When you hover over the prop, it will
actually give you the short description.
4:04
So here it says children,
the content of the component.
4:09
And if we come back here to the card page,
we'll see the content of the component.
4:12
And it's the same for classes as well.
4:18
So let's try and remember, override or
4:20
extend the styles applied
to the component.
4:22
And over here it says, override or extend
the styles applied to the component.
4:25
So that's pretty cool.
4:30
So now let's play around with
the card components props to see
4:31
UXPinMagic in action.
4:36
So first we have these children.
4:38
This is what we would like to assign
as the children for this element.
4:40
However, there is a warning here.
4:44
It says this element contains
another component from code and
4:46
adding text will remove
the nested component.
4:50
So that's not ideal.
4:53
In fact, if we put anything in here,
let's say, hello world.
4:55
All the contents disappear.
4:59
So let's undo that and we'll leave
the children alone for this element.
5:01
Next up, we have classes.
5:07
Now, this is where we can assign
CSS classes to this element and
5:08
override any that come
with the MUI component.
5:13
Now, we won't be doing this because we
want to take full advantage of these ready
5:16
made for React components.
5:21
Next up we have raised.
5:23
Now this simply lets us give a little
shadow or no shadow to the card.
5:24
Next up, we've got elevation.
5:30
Now it says here the shallow
depth of paper surface and
5:32
it accepts values between zero and 16.
5:36
Now, this actually changes
how strong the shadow is.
5:39
So if we put 16,
we've got a really strong shadow.
5:42
And if we do two,
it's something that's a lot more subtle.
5:44
Next up there's variant.
5:48
Now this just lets us choose if we
want the elevation variant which has
5:50
the shadow,
5:54
or if we want the outline variant which
is just an outline with no shadow.
5:55
And next we've got square.
6:00
And for this one,
we'll zoom in a little bit.
6:02
And this one lets us choose
whether the corners are squared or
6:04
if the corners are rounded.
6:08
And finally,
sx allows us to override props or styles.
6:10
So here we can apply
CSS styling using JSON.
6:15
The key should be the CSS property and
the value is the property value.
6:19
So for example, background color is green,
and we can see here
6:23
that the entire cards background is turned
to green, just as we would expect it to.
6:28
But just like before,
6:35
we want to take full advantage of these
already designed React components.
6:36
So we'll just remove the JSON and
I can do that by pressing this X or
6:41
pressing this back to default button.
6:45
Okay, so
let's make this design interactive.
6:48
So I've got a button here,
so let's make it clickable.
6:53
You'll remember from the last video
that the button interacted or
6:55
reacted when we clicked on it
based on where the cursor was.
7:00
But now let's make it do something,
let's make it open something.
7:04
So let's head on over here and
search for a dialogue.
7:08
We'll use dialogue here and
we'll just drag it down here.
7:14
Now, by default the MUI dialog component
will fill the space of a prototype,
7:19
but for ease, we'll just place
it directly below for now and
7:24
you'll actually see this in action
when we load up the prototype later.
7:28
Now, the important prop that I want to
point out here is this one the open prop.
7:33
Now this determines whether the dialogue
is showing or if it's not showing, and
7:38
we can see this in action
if we click between the 2.
7:42
So for now,
we'll give it the default of true.
7:45
Now let's select this button component and
I'll be using the command click method,
7:49
and let's play around with some of these
props to make it look like what we want.
7:54
Now if you've forgotten what a prop
does remember you can hover over it or
7:59
open up the MUI documentation.
8:04
So first let's change the text
from share to click me and
8:06
I'll do this in the children prop.
8:09
So I'll do click me.
8:11
Now we can edit the children prop this
time because the only child of a button is
8:15
the text content within it, and we'll come
down here and change this to success.
8:20
Now these are all movie color schemes.
8:25
So we like success.
8:28
So let's choose success.
8:29
And for full width I will make it full
width true and size will make it big.
8:31
So I like a big chunky button.
8:37
Now I also want to add an icon
to the left of click me and
8:39
this is something I have actually
discovered just in the last few days and
8:43
we can actually pass an icon component
into the button component as a prop.
8:48
So I'll show you what I mean.
8:53
So first I will create I'll
create an icon component and
8:54
I'll just put it here for now.
8:59
So this is an icon component, and
then I'll click on the button and
9:02
I'll come here to start Icon.
9:06
And here there's these cross hairs and
I can actually select a merge
9:08
component from the library or
canvas to pass it JSX code as a prop.
9:13
So I will select this icon over here and
9:18
we can see that it pops up
right here in the button.
9:22
And it's being passed in as JSX and
now we can delete this.
9:26
And I thought that was really cool and
I wanted to share.
9:30
So now that we're happy with what
the button looks like let's head up to
9:34
the properties panel again,
we'll click on this button, select it,
9:37
and we'll add an interaction.
9:41
So once we click this interaction,
we can add a new one.
9:43
So we want this button when
it's clicked to do something.
9:47
So the trigger will be clicked.
9:50
And conditions,
we don't have any right now.
9:52
And the action, we want the dialogs
open prop to change to true.
9:54
Remember that open prop?
10:00
So that's actually under here more, come
down to Coded Components and Set Property.
10:01
Now here we'll get to select an element
and we will select the dialog.
10:08
And the property is open and
10:12
we'll set it to true because we want
it to open when the button is clicked.
10:14
And then we'll add it.
10:20
So now we've got the interaction
set up one way, and
10:21
we'll set up a closing interaction
from the dialog component.
10:24
So we'll select the dialog component,
and before we add an interaction,
10:28
we'll actually change this open to false.
10:33
Because when the app loads, we don't
want there to be the dialog showing,
10:35
so we'll set it to false and
we'll add an interaction.
10:40
Now this time we have two trigger options.
10:43
We've got backdrop click and close, and
these are pulled directly from MUI.
10:45
So I'll choose backdrop click,
10:50
which is when that translucent
background is clicked.
10:52
And again, we'll go to more and set
property, and we'll select the dialogue,
10:55
and we'll change the open property
to false cuz we want it to close.
11:02
So now let's click this preview
prototype to see what it looks like.
11:07
Okay, and now we're here.
11:13
We can click the button, and
we'll see that the dialogue opens and
11:15
then when we click outside
of this dialogue it closes.
11:19
So that is quite fun.
11:22
Now while we're still here in the
prototype view let's have a play of this
11:25
writing component.
11:30
Now this component is already packed
with interactivity thanks to MUI.
11:31
When we hover over the stars, the
highlighted stars follow our movement, and
11:35
when we click on a star and
then move away,
11:40
we can see that it's saved to state
because the stars are still there.
11:43
We've selected four and we've moved away.
11:47
Or we select two and we move away.
11:50
So let's have a look at what component
specific interactions the rating
11:53
component comes with.
11:57
So we'll close the prototype window and
11:59
we'll select the ratings
component with command Click.
12:02
Now the properties panel should
fill up with a lot of props for
12:06
the rating component.
12:10
Now, if this seems like a lot,
don't worry.
12:11
Remember that you can hover over the prop
names to see a short description or
12:13
you can hop straight to the MUI
documentation if you need to,
12:19
something of note is this
value prop right here.
12:23
Now this determines
the rating that's showing.
12:26
So for example,
if we enter three as a value,
12:29
then three stars will
be selected by default.
12:32
So let's add an interaction
to see what we can play with.
12:36
So we'll select that and
add an interaction.
12:39
It looks like we have three
options this time and
12:43
we're interested in this last one, value.
12:46
So this will trigger when
the value of the rating component,
12:48
which is how many stars are selected
with that value prop when that changes.
12:52
So we'll select that.
12:57
Now let's say I want to show the dialog
component if someone gives a 5-star
12:59
rating.
13:04
It might be like, thanks for
giving us a five-star rating thing.
13:04
And we can actually use
the conditions to do that.
13:08
So we'll click on conditions.
13:11
And we're after the value of a property.
13:13
So I'll actually just use this drop down.
13:15
So it was like the rating and the property
that we're after is the value.
13:17
So if the value equals a value of five.
13:22
So this is if someone clicks five
stars and changes the value to five.
13:26
So if the rating is five then
we want to show the dialog.
13:30
So we know how to do that.
13:34
We'll set property and we'll target
this invisible dialog here and
13:36
we'll set the open value to true, okay?
13:42
So that is done.
13:46
Now, let's view the prototype.
13:47
Okay, now when we click on any rating that
isn't five it just behaves as normal but
13:53
when we click on five,
13:59
the dialog component shows up as well,
which is super cool.
14:00
The card, button, dialogue, and
14:04
rating components are only four of
the awesome offerings from MUI.
14:07
And each of its components have so
much to offer.
14:12
This video was just an introduction to
how props are handled using UXPin Merge,
14:16
and how MUI components have special
interactivities for us to play with.
14:22
So be sure to refer to MUI's docs all the
time if you're ever confused about a prop.
14:28
And most importantly, play around with
the components and options as well.
14:35
You'll be amazed by what you can
discover if you just tinker.
14:40
In the next video,
14:45
we'll build our employee portal
together using MUI components.
14:46
I'll see you there.
14:51
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up