Up next in 10
Buy the full source code of application here:
https://procodestore.com/index.php/product/evergreen-ui-react-ui-framework-crash-course/
Subscribe for more Videos: https://www.youtube.com/channel/UCR6d0EiC3G4WA8-Rqji6a8g?sub_confirmation=1
Watch next –
[Popular Videos on the Channel]
[Login with Google Account using Javascript]
https://www.youtube.com/watch?v=qzq0kEUa5lU
[What is AJAX and How it Works | Short Tutorial for Beginners]
https://www.youtube.com/watch?v=ugiFpA03B6c
[Javascript Fetch Api Example]
Show More Show Less View Video Transcript
0:00
hello friends today in this tutorial I will be telling you about evergreen this is a user interface library for react
0:06
this will be a crash course of one hour complete one hour I will be walking
0:12
through all the examples of this library this is a official website of this
0:17
library evergreen UI I have given the link in the description so you can just
0:23
execute this command npm install - - save evergreen UI if you are using a
0:29
node application i will be implementing this with react so if you just go to components here you will see that it has
0:35
various components buttons tabs badges after i will be showing you all these components by examples in this video so
0:43
first of all we will create the react project so just go to google and type
0:48
your code sandbox so this is kind of a online IDE for react or also angular so
0:58
just click on create sandbox you need not have to create any kind of account for using it you will see that various
1:04
technologies are there angular react vanilla JavaScript few torches I will select react here and it will instantly
1:12
load my reactor application you can see that and in order to install my
1:19
dependency very easy just click this button add dependency and this will open
1:24
this box for us so I will just write here ever green UI - UI so this is a
1:32
library name you can see that this is a react user interface gate by segment so
1:37
just click it and it will be installing it in the background you can see that it is foking it so now you can see that it
1:46
is installing so now it is successfully installed now in order to include it it
1:51
is very easy import instead of curly brackets and then we will write from evergreen UI that's it so this is the
1:59
way by which we can install it and now we just need to include some components
2:04
so basically I will be first of all be showing a very basic component which is button how to create a basic button
2:10
inside this I will delete all this stuff from here in order to declare a button it is very
2:16
easy guys just declare capital B button here so this is a button and now if i
2:23
refresh it nothing will happen because i haven't provided the label so if i provide the neighbored register you will
2:29
see that guys this is the register button that we have here you can also see this app in the browser just copy
2:35
this URL and paste it here just you have to save your file before you access this
2:41
let me just go to file here and click on save and then you can just refresh this and
2:48
it will have the changes it will run
2:53
that you can see that this is a register button this is a not clickable we have not binded any kind of listener out to
2:59
it there you can see that the styling is applied to it which is evergreen UI so this is your button there are various
3:05
options that you can pass to this button obviously the first option is appearance so this is options is appearance so
3:12
basically appearance it takes three values you can provide primary so it will make the button blue blue in color
3:19
you can also change this to minimal so
3:24
you can see that it has removed the background it has caught a transparent background now you can see that and the
3:30
default value is default so if no value is provided then it will take this default value so I will change this to
3:39
primary because I think that it looks good blue blueish color and also we have
3:46
some various options which is intent so basically intent is kind of a what is
3:52
success we have success option here so if I just show you change just log in
3:58
here so you will see that guys it is this label is appearing in greenish
4:03
color because of this success I can even change this to danger this is for reddish it will change to reddish color
4:09
and now I can just concatenate the appearance attribute also here appearance and I can just change this to
4:16
primary so you will change that you can see that it will change to reddish color because we have applied danger here so
4:22
if I just change it to success it will change to greenish so how easily we can just create buttons
4:29
in react using the slide body you can see that basic button that we are using
4:34
here and also if I change this to minimal so you will see that it will not
4:40
have any kind of background transparent background it will have and if you have the greenish color if I change this to
4:46
danger it will have the reddish color we have also a warning also warning so this
4:53
will change this to yellowish color so you can see that warning you can just go
4:59
to documentation of this evergreen so there they have good good documentation
5:05
if you go to button here so this will list all the attributes that we have you can see that we have provided default
5:12
success warning danger so if you provide default here that means just show you if
5:19
you provide here default in the intent it will change to the you can see that
5:27
bluish color so basically intent default is the default so if you don't provide anything it will take the if I just
5:33
remove it so he will you will see that nothing will happen here it will take the intent default as default so I will
5:39
change this to success so basically this is interred guys so basically if you are
5:46
making a logic log into distillation system you have to have different colors for login and register button then you
5:52
can use this property then if you have to have some spacing for that we have a
5:58
property which is margin left so here in the curly brackets you can provide let
6:04
us suppose a value in to value 16 if I just wrap this and call this button as
6:10
margin so you will see that it has got some space from the left here margin 16
6:17
if I just increase the space guys 26 you will see that it has caught some more space 26 so it will be if I want to have
6:25
some space from the right so I will change this to margin right so it will have some space from the right similarly
6:31
I can just change this to top here so it will have some margin from the top
6:37
position and similarly we have the bot position that's it so this will apply to
6:43
also padding here so you can also provide padding from the bottom position
6:48
and let me just padding from the top
6:54
position you can see that it has got some padding from the top position left
7:01
and right so these are the if you have
7:07
if you want to have some spacing you can just use this margin and padding properties which are correctly David
7:13
within this evergreen UI you can obviously change the intent to success
7:21
so this is a margin that you can apply here so if I also we need to change the
7:30
appearance to prime DS for the greenish color to happen so you can see that so now this is the spacing guys so the next
7:36
if you have to have a back button this is very easy guys if you want to integrate back button in your
7:42
application it is very easy there is a component for that which is back button that's it
7:47
so you can see that from this single line of code we have provided our back
7:53
button you can see that I can even change the background color by having appearance to primary and let me have
8:02
the intent as warning so you can see here it has changed this color to yellow
8:09
so you can just play with these properties every component has these properties available to them which is
8:15
intent appearance so this is a back button and now if you want to integrate
8:20
if you want to change the height of the button it is very easy guys let me have
8:26
the height of the button if you want to
8:33
change the height it is very easy you will be having a height property similar
8:39
to margin so height so here in this curly brackets you can just provide any value at suppose I provide 40 here so it
8:45
you can see that it has changed the property to 40 let me have a brake track so that it goes into the second line
8:54
so if I want to change the height to let suppose 80 so you can see that 80
9:01
similarly you can also have the width also so width you can provide let's suppose 125 so 205 you can see that it
9:13
is changing the width also so you can just play around with these values if you want to change the width and the
9:18
height of the button so this is basically how you change the width and height and now the next step that I will
9:25
tell you guys is how to integrate icons with your with your buttons if you want to create buttons with icons it is very
9:32
easy so just create first of all your basic button and let me just have a
9:42
label which is delete if you want to integrate a icon
9:48
it is very easy there is a property which is icon before so this is a
9:53
property guys so with the help of this property you can have various icons available inside this so there is icon
10:00
which is trash so you can just include this you can see that guys a dustbin icon is appearing here optilead so this
10:08
is kind of a icon button and now if I just change this copy this button one
10:14
more time and there is a Settings icon which is see og and let me just
10:22
change the label to settings you can see that this is a settings button so how
10:28
easy to is this liability guys I find this very easy that is why I wanted to
10:33
make complete with you on this topic of this library so there is a edit also so you can see
10:42
that the pencil pencil icon is appearing here and also we have the manual so
10:48
documentation you can see that a book icon is appearing so you can just change this to talks and next we have the
10:57
download also so download so if I change this to download you will see that a
11:04
download icon is appearing here so if you a download icon is much there in website so you can just
11:10
use this button here obviously we can just change the appearance also by
11:16
having appearance to primary and in turn to you can see that we need not have to
11:23
provide intent here so appearance just change the appearance to primary and we are done here and let me just take it in
11:31
the next line and let me provide some
11:38
more icons let me tell you about some more icons I have a list here you can
11:43
also have the search icon guys so just change this to search search and also
11:51
you can see that a search icon is appearing here so this is the search I
11:57
can even see that search button and one last icon that why I have remembered
12:04
here so caret down so you can see that
12:10
if you want to have a drop-down menu you can just use this icon here guys this is
12:15
a drop down icon so these are the icons that I remembered so there is a list on
12:21
this website here you can just check out the documentation documentation is very good you can just read the documentation
12:27
and find out the icons that you need so this is it how can you integrate the
12:33
icons within your buttons so basically if you want to have the only the icons appearing you don't want the text to be
12:40
appearing so there is a another component out there in this library which is icon button so there is a way
12:46
by which you can declare it which is icon button so I can button you need to
12:51
provide the icon for it so I will provide a trash icon once again and let
12:56
me change the intent to danger so now if you see that guys now the only
13:03
the icon is appearing what the text so obviously you can just change the background color by having the
13:08
appearance property to primary so you can see that it has changed to red color
13:14
obviously if I change this to success it will change to greenish color so it is
13:20
very easy you can just repeat this for any icon if you want if I want let's suppose a icon
13:27
of download appearance will be let's suppose you can just follow the syntax
13:34
it is very easy guys the syntax is very easy I remembered the syntax very easily intent let's suppose I provide success
13:41
once again so you will see that this download button is also there let me
13:47
just change this to warning so how easily this is the UI guys I really
13:54
appreciate this whoever built this live ready I really like this live already so I will be using this library in the
14:00
future projects of react in my videos so you will be seeing this and lastly guys
14:05
if you want to make your button clickable there is the option here in this just declare your button first of
14:11
all let me just change this to link here so this will be a link here we can just click on this link we will be changing
14:17
this to anchor tag so basically there is a property there which is is and just initialize it to a a stands for anchor
14:25
tag and then you just need to initialize the HRF property to whatever link that
14:30
you want to go to so I am just initializing to hash symbol so if I just click it you will see that it is
14:36
clickable it is fill it will go to the hash symbol if I just show you the URL so you will see that it is going to the
14:41
hash symbol so if I just click it once again and show you it will go to the
14:49
actual URL so let me just see if it is working or not if I provide a URL HTTP as google.com if I click it it should
15:00
redirect me to so this is basically it's not a browser so let me just to copy
15:06
paste this in a real browser and hopefully I will see that it is
15:12
transpiring modules here in the background so just wait and I forgot to say so just save it autosave so
15:20
and if I just refresh it so just wait
15:28
just wait it will Auto transpile you will see that is a link here if I click it you will see that it is working now
15:35
because this is a real browser so it is going to google.com so obviously it is very easy guys to create a link if you
15:42
want to have a link in your application you can just create this using this so this is all about button guys so now we
15:50
will be seeing some more components using this library so now basically guys I will be showing you that how you can
15:55
integrate layout functionality inside this evergreen UI library so basically for this there is a component called as
16:02
pane pane component and obviously we just need to include this so put a comma
16:07
and include this capital P a and E pane and comma V will also be integrating the
16:14
text also so text just import it right here at the top so inside this pane we have a text property so if I write this
16:22
text this is capital T here so text so
16:28
inside this even just write anything hello won't so you will see that it is showing up that it is hello world you
16:35
can also provide some properties to the space how much height it will take so height is equal to let's suppose height
16:44
is in the curly brackets 120 width let me change this to 240 background color
16:53
let me change this to blue so you will see that it has changed the background
17:00
color and let me just align it in the center by providing a line items to Center and also justify content and also
17:16
we just need to change the display property to flex that's it so you will see that it will be having the text in
17:22
the center vertically or also in the horizontal manner so you just need to add these properties and obviously you
17:29
can just provide some border also let me provide the default water that is available
17:34
it is default so this is a way by which you can just create a basic pain element
17:40
inside this evergreen UI element and obviously you can have a button also so
17:47
it just changes to button button so you
17:57
can see that it can also hold buttons text elements all these elements and let
18:03
me just change this to a text input so we have not covered this text input so
18:10
let me just show you this text input element so text input we can just
18:19
provide the width of let's suppose 100% and a height of 48 pixel 48 and a
18:32
placeholder value also enter text so
18:41
this is the text area so you can see that in inside this text area you can write here anything here so this is a
18:47
text area so obviously I haven't covered this inside this video so we are seeing
18:53
this for the first time so basically this is the Bay by which you can just create some complex layouts inside
19:00
evergreen so now basically guys I will be showing you that how you can just
19:06
place these panels next next to each other you can just float them so basically there is a technique out there
19:12
so you just need to declare a parent div container so this is pane here so you
19:18
just need to fix this property just attach this property which is clear fix so inside this parent div we will be
19:25
declare your child containers here so there is a first pane so we will be
19:32
attaching the fixed width here bit off let us suppose 80 and a height Rob let's
19:40
suppose also 80 and I will be attaching a floor property to it which is float is
19:47
equal to left and I will be changing the background color to blue so this is the
19:56
first element you can see that it is appearing here and now I can just copy this let's suppose paste it here in the
20:04
next slide three more times and now you can see that it's appearing in the next
20:11
to each other if I change this to green and red so you can see that now these
20:21
boxes are appearing next to each other using this float property of left and also this parent which has this clear
20:28
fixed property attached to it and now if I want to have some space I can just provide a margin left property which is
20:37
let's suppose 25 or sorry I need to have this places so 25 I think that this - is
20:47
not here I need to change this capital error so I just need to repeat this for
20:55
the rest - not these first one so margin left margin depth so you can see that it
21:02
has created some spaces around it so now this is a technique by which you can just align them next to each other
21:09
these paints so now basically guys you can also add some elevation effect to it
21:15
border shadow effect to it these paints here so there is a property which is elevation can provide this property
21:21
inside braces you can just provide this value so you will see that it has got some border shadow effect elevation
21:28
effect and similarly you can just copy-paste this value for the rest one
21:36
and if I just change these values so let's suppose 60 you will see the effect
21:42
here 10
21:48
so in this way you can just change the elevation property add some box shadow
21:54
effect to it so now basically guys we will be seeing some typography components which is there inside this
22:00
evergreen UI library so there is a heading tag which is available so inside
22:08
this heading you can first of all changes sides by providing a size
22:14
property which is you can provide any value let's suppose I provide 100 so
22:21
inside this you can write anything so if you refresh it heading is not defined
22:27
because we need to include this so right at the top here just include this
22:32
heading so you will see that this heading is there and if you want to
22:39
provide some margin also you can just provide margin left property 56 so it
22:45
will be having some margin from the left position and if you want to change the color of this heading you can just
22:52
provide color let's suppose I change this to blue it has changed to blue here so in this easy way you can just have
22:59
your heading and if you want to change this heading to that supports h1 tag or
23:04
h2 tag you can just use this is attribute and then you can just provide
23:10
let's suppose I want to change this to h3 so it will change to h3 so the next
23:18
component which is there is text so there is a text component so we have
23:26
already looped this component earlier so this is similar you can just write
23:32
anything here inside this text and same you can just change the size also to 500
23:39
let's suppose you can also change the color so this is just the same that we
23:49
have looked with the heading also so this is again a text component and next
23:54
we have the paragraph so if you want to write a paragraph there is a separate component for it which is paragraph so
24:02
inside this para you can just again have the size and
24:10
also you can change the color to purple
24:17
and inside this you can just write anything so this is a paragraph and next
24:27
we have the link if you want to place any kind of link into your website you can just use this link component sending
24:35
and then you have the active property so here you can just provide any link here
24:41
let's suppose HTTP google.com so inside you can just wrap this so just provide a
24:50
label let's suppose goggle so now you will see that a underline is appearing
24:55
so it is showing that it is a link you can just click on this link so this is a
25:02
link component and also we have a strong tag inside this strong so inside the
25:12
strong tag you can write anything here it will just change the text to bold so
25:19
obviously we just need to include this right at the top here include strong and
25:30
next we have the small component small tag so if you want to change anything to
25:39
small you can just wrap this inside small tag so just include this right at
25:46
the top here so it will change the text to small and next tag we have this code
25:53
so if you want to write code into your application we have this code component
26:00
and you can just write anything here and just include it right at the top code
26:07
here so you will see that a separate background a transparent background has
26:12
been added to this with this element the next time we have is free so you can
26:22
just write anything here again we just need to include this so here you can
26:30
just have some spaces here so it will be showing the spaces also so you can see
26:37
that we have some space between these two letters so it is showing the space also so this is the functionality of the
26:44
Spree tag and now the next tag we will be having is the if you want to display
26:52
any kind of list into your application then we have this unordered list component so inside this unordered list
26:59
you can display any kind of list item so we have the list item component let's
27:07
suppose India and there is a bullet sign
27:12
you can see that which is appearing here so this is the list item so you can see
27:18
that this is an unordered list so that is why these bullet signs are appearing and same you can just create a ordered
27:25
list so just change this to from
27:31
unordered to ordered and also just
27:38
change it here also we just need to
27:44
include it right at the top here ordered list so you will see that it has changed
27:51
two numbers one two three four so this is ordered list component and now if you
27:57
want to integrate some icons within this list here you can just provide right
28:03
here at the top here you can just add a property which is icon so here you can just provide any icon of your choice
28:09
let's suppose I provide tick here and additional property of icon color you
28:15
can just provide any any color which is success let me provide and if you
28:21
refresh it
28:28
just change this order to unordered so
28:49
just wrap this inside the unordered list here so it doesn't support ordered list so just wrap this unordered list so you
28:56
will see that these stick options appearing here with every list item you can also change this the icon from tick
29:03
to let's suppose trash so it does spin icon will be appearing here you can see
29:10
that obviously you can just change the color to from green to red and just change this to gardening so it will see
29:17
you can see dad the check the color is also changed so these are the typography
29:23
components which are there inside this evergreen dy library so you can obviously check out the documentation I
29:30
cannot just list out all the components so now we will be looking at the icons
29:36
here which you can just use inside this evergreen UI library so if you go to the icon section here you will see that
29:42
there are various icons available that you can use in your application and let
29:48
me just show you a basic way by which you can just integrate icons so just declare the icon tagged and here you
29:55
just need to provide the icon value so let me just have this band circle and
30:02
apart from that you also have to provide the size of it in something like this
30:07
and just include it right here at the top here icon so this is half
30:15
capitalized so you will see that this
30:22
icon is appearing here so you can just change the color to
30:28
according to your choice here so let me just change to that so it will change to red so also you can just change the
30:38
color by having the color as success success means green danger means a red
30:47
and there is option which is warning warning means yellow so you can also
30:53
provide these constants this will change
30:58
the color for you and you can also have the margin so just
31:03
a wide margin left or margin right so these attributes will work with these
31:10
icons also so margin padding all these stuff and you can always disable the
31:18
icon also there is a separate property for this so when you provide the color of it so inside this color you can just
31:26
provide disable it so you will see that the icon is disabled here so you can see
31:40
that it is looking at it as if the icon is disabled so this is all about the
31:46
icons that this is a syntax by which you can just integrate icons so now basically guys we will be seeing another
31:52
component which is avatar avatar basically is kind of a if you want to have a image profile button inside your
31:59
application just include avatar here right here at the top in order to declare it it is very easy you will have
32:07
a tag which is a component which is avatar and inside this first of all just
32:13
make it a solid and give it a name let's suppose I give my name and and also
32:22
provide a size to it let's suppose 40 and close this tag here
32:28
you will see that guys it has taken the two left two letters G and s and it has
32:33
created an avatar and here you can just change the color also color let's
32:39
suppose I change this to red it will change the color to red so it is
32:45
very easy also you will you can just change to success sorry
32:52
background color so you can you can also just change this color to purple you can
33:00
see that in this way you can just provide a avatar into your application so now I will be showing you that how to
33:08
create an image avatar it is very easy you declare your avatar tag here and then you just provide a
33:15
source attribute and then you copy paste your image let's suppose I copy my image here and pasted the link here and then I
33:23
will provide a name which is myname and this is the name attribute and also just
33:34
provided size 40 once again and if I close it you will see that it has taken
33:42
my image and convert it into rounded corners and changes it to at our image you can obviously change the size let's
33:49
suppose I change just to 80 so that you can see that the size is long here the
33:55
size is large you can also change this to 150 so you can see that in a very
34:01
easy way you can just create this avatar component inside this and let's suppose
34:06
I have a button here and this is profile
34:13
change the appearance property you just
34:22
need to include this button right here at the top here appearance is equal to
34:38
primary so and also we have some other button I
34:47
forgot here so this is a button you can just create here your avatar image and profile here so this is a very easy way
34:54
by which you can just create it so now we will be seeing the batch component
35:00
which is there inside it so just include right here at the top here badge and there is a batch tag which is there so
35:09
this takes the color let's suppose I provide the green color so if you
35:15
refresh it you will see that it's badge appearing here obviously you can just change the color from green to red or
35:24
yellow so this is batch for you and now
35:30
we will be using a another component which is text input so it is generally
35:36
used to receive input so let me just give it a name attribute or for text
35:41
input name you can just give it text here that's it a placeholder value also
35:49
text and close it so you can see that
35:54
this is a text input here you can just write anything here so this is the default styling that comes with evergreen and obviously you can also
36:03
disable this by having the disable property so you will see that I cannot
36:09
write anything here because this is disabled and also there is one other
36:15
attribute which is there which is very helpful for validation which is is invalid so it will add some border to it
36:22
so if you have some validation on you can just add this is invalid attribute
36:29
to it so next we have the search input so if you want to add some searching
36:35
functionality in your application then you can just use search input component and it takes the placeholder let me
36:45
provide search and also let me just provide the width of 100% close it so
36:54
you will see that this is search box here I can just write anything here this comes with the search
36:59
icon and this is the place holder so this is the search input for us and now
37:06
I will talk about the the toaster
37:11
so toaster is very easy we have a button and we will attach a on click attribute
37:18
to it one click so whenever the button is clicked we need to execute this function which is
37:24
arrow function so which is toaster dot
37:35
notify so this is a way by which you can just call the toaster so I will pass
37:42
this message of toaster that's it and I just need to have this button as
37:52
register so if I click it I obviously I
37:58
just need to include this toaster here I
38:07
think that this is capital T there is
38:18
some kind of problem is coming here
38:24
toaster is not defined so the next
38:33
component we have is the alert so this is if you want to display any kind of
38:38
alert you can just use this component so this takes some options first is intent
38:44
you can justify NIST to none and there is the title of the alert you can just
38:49
give alert title color it is not defined
38:55
so we just need to define it at the top here so just add this right here at the
39:00
top put a comma and type alert so you will see that guys this is the
39:07
alert title which showing you and obviously even just
39:13
change the color of let's suppose to read it will not work so this is
39:19
basically a alert by which you can just display the alert and next we have you
39:26
can also add some appearance to it appearance property and you can just use
39:33
card here so it will change to card here you can see that it has got some box shadow effect to it and now I will show
39:41
you the spinner if you want to integrate spinner into your application this is
39:47
the component so this is the loading spinner you can see that and if you want
39:54
it to be appearing right here at the middle then you can just use a simple
39:59
brick inside pane you just need to display you could just
40:05
need to change the display property to flex so this needs to go inside this so
40:13
change the display property to flex and
40:22
also this align items property to Center and justify content
40:30
also to Center and let me just give it a
40:35
height of 400 so inside this pane you can just have your spinner so it will be
40:48
having this here at the center here so this is a spinner component and now
40:54
after this we will be having some other components which is a file because so if you want to integrate file picker into
41:02
your application you can just write file picker here you can have this option multiple you can also provide a bit
41:09
let's suppose I provide 250
41:14
and a placeholder file picker that's it
41:24
so if I just show you if I just want to
41:31
include this file to go you can see that if I just copy this and paste it here if
41:44
I save all changes here so you will see that the spinner is there it right here
41:49
at the center here so this is a technique by which you can just do it and this is your file picker so here you
41:57
can just select file any kind of file here and upload it so this is a file
42:03
picker so let me just remove the spinner so that I can see all the elements let
42:15
me just remove it so this is our file
42:21
picker you can see that that's it guys so these are the components that I
42:26
wanted to show you about this awesome library which is evergreen UI so thanks for watching thanks for watching this
42:33
crash course and keep watching this these videos and please subscribe the channel for more videos like this