In the last video we started working on our dashboard component.
So here's the kind of scaffolding for our dashboard right now.
At the end of the section we started up our server and so at this point inside my browser I should see
something that more or less looks like this.
When I go to the slash surveys route remember we are showing the dashboard component whenever the user
goes to slash service.
Now right now we're focusing on making sure that there is this big red button down here with the big
plus on it that a user can click to get some form to pop up on the screen that they can use to create
a new survey.
Now to figure out how to make this big red button and put it down here at the bottom right.
I think that maybe we should take a look at the materialized CSSA documentation and see if they have
any helpers for creating this big red button and showing it down here.
So inside of a new browser tab I'm going to need to navigate to materialize see SS dot com.
Remember that we installed materialized the SS way earlier inside this course and so we have access
to all the components in CSSA that is included inside this project.
In the search bar on the left hand side I'll search for buttons and one of the results that pops up
should be buttons h t m l in this document.
We can go down towards the second section right here and you'll find a section marked as fixed action
button.
So this fix action button will show a button at the bottom right hand side exactly like this one right
here.
You'll notice that when I mouse over this one I get these kind of sub actions popping up.
And so this little section right here this little blurb is what gets all this pop up stuff to appear.
Now we don't want any of the pop up stuff we really just want to have that one singular button.
So if we just use the div that is listed here that will place a button down at the bottom right hand
of the screen and then the anchor tag will show the actual button.
And then the tag will show an actual icon inside of the button.
So we don't need all this other stuff and all the lies because those are the list items that pop up
here.
So I think that we should flip on over to our dashboard component and try placing a div with an anchor
tag.
And then I tag inside of it.
OK.
So flip back over to the dashboard or find the text that just says dashboard.
I think we'll leave this in here for right now.
Just to kind of give ourselves something to work with.
And as a sibling to it a place the div that's going to be used to position the button on the screen.
So I'll give it a class name.
And these are the same class names that we're just reading inside the documentation.
So we're going to get this fixed action DTN inside of here will place an anchor tag hoops anchor tag
and we'll give that a class name of DTN dash floating and DTN dash large and red and then finally inside
of the anchor tag will place in its act which is being used to place the icon and this will give a class
name of material.
Dush icons.
And then to make sure that we show an actual ad icon like an actual Plus something that makes it really
obvious to users that hey if you click on this thing right here you're probably going to add something
to the application.
We will give the e-TAG some text inside of your of at like so now we're going to talk about exactly
where this tag is coming from in just a second.
But I want to make sure that we're going down the right path here first and then we'll come back and
kind of investigate some of this Marka.
OK.
So back inside of our application.
All right well we got a big red button on the bottom.
You'll notice that it has the text add on it which is definitely not what we want.
We want to have a nice looking icon appear on the screen.
So let's talk a little bit about materialized.
Yes.
And the icons that it makes use of.
So I'm really excited about this talk that we're going to have right now about icons because this is
a very common question I get all the time.
Really excited to just clarify things and make sure that it's really clear how icons work with materialize.
So I get to flip back over to the materialized documentation over here and I'm going to do a search
for icons.
So here's icons.
Each team pops up OK.
So we had some very clear documentation here on exactly how this works.
First off in order to use any icons with materialize we have to include this link tag inside of our
root h T.M. file.
So yes we did install the NPM package with materialized DSS but that does not include any icons inside
of it.
So right now we have no access to any icons whatsoever.
After we wire this thing up to our HTL documents we can then place any icon we wish inside of our application
by using an IDE tag with a class of material icons.
Let me zoom in here and make sure it's parts legible.
So as I tag with the class of material icons and then here's the real magic.
This is the part that throws people off big time.
You see the text inside this tag.
It says at.
Right.
Well if we scroll down a little bit you'll find a list of all the different icons that you get access
to with the icon library to show any of these icons inside your application.
You take the word right underneath the icon.
So like info outline and then you place it inside of the tag.
Then when the library loads up it will automatically find all the different tags inside your application.
It will look at the text inside the tag and it will replace that text with the icon that you want to
use.
So that's the magic.
That's how things are just magically working for us.
When this font library loads up any e-tag that has a word inside of it.
If this word corresponds to one of these icons in this list right here it will be automatically replaced
with the icon.
So let's give this a shot let's see how it works.
First off we're going to make sure that we add in the font library.
So I'm going to grab the entire link tag right here or copy it.
Or go back over to my code editor and then inside of our we want to find our html document.
And remember it's inside of our public directory.
Now you might have one inside the build directory as well.
But that is the built version of the app that is not the development version that we are actively working
on right now.
So make sure you find the index H.C. mail file inside of your public directory.
So open it up and then basically anywhere on here like probably beneath the existing tootling tags.
We can test it on this brand new link tag.
So you should see something that says Google API is Icon blah blah blah while all the stuff I look at.
Let's save this.
Now go back over to my code editor or verify that I do have an IDE tag right here.
It has the text add right here.
So I'm going to expect that when the IDE tag is rendered the font library that we just loaded up will
replace the word ad with an ad icon.
So now when we go back over I will manually refresh the document.
And as you can see down here we've got the nice plus symbol inside the button that makes it really obvious
to a user.
Hey if you click on this you'll probably be adding something to the application.
Now just to give you a quick demo we could just as easily come back over here look at our icon list
and say oh well you know what I kind of like this chat bubble outline.
So we will take the exact string right here.
Copy it.
We can find our tag.
Here it is right here and then instead of the word add we can replace it with Ciat bubble outlines so
the exact string that we just saw inside the documentation.
So now we say this and go back over to our out now you're going to see that little shot outline icon.
So in practice using these icons is really straightforward.
It is just understanding the magic that you have.
You've got to put the right word inside the italics to get them to actually show up.
OK.
So obviously we don't really want to chat icon here.
Let's go back and change the word back to ad and we'll use out instead.
And that's all worked out just fine.
And we'll just verify that we still have the plus.
OK cool.
That looks good.
All right.
So I think the dashboard is looking pretty good.
Now one last thing we have to take care of inside the next section.
At present we have an anchor tag inside of here.
And remember any time we want to navigate between routes inside of our re-act router application we
do not use anchor tags we use link tags.
So in the next section we're going to come back.
We're going to fix up this anchor tag and make sure that it uses a linked tag instead to properly route
or redirect or user inside of the reactor outside of our.
So quick break and I'll see you in the next section.