0:04
[Music]
0:10
so in this video we're going to be
0:11
looking at the share launch or the share
0:14
Launchpad stack um within sheret so here
0:18
we have three examples here and let's
0:21
have a look at what sherit Launchpad
0:23
does right so as you see we can have it
0:25
open on scroll um and then it will when
0:28
we hover over basically all of these
0:31
actions um can be configured okay so
0:35
let's look at this existing
0:36
implementations that we have inside this
0:38
demo project that ships with the
0:41
stack when we look at share launch um
0:45
the top section allows us to configure
0:47
the Launchpad okay that is the main icon
0:50
that triggers the actual action so here
0:53
we can customize the icon so we have
0:56
four different icons that we can use uh
0:58
three different types of share icons
1:00
link as well as a custom SVG that you
1:03
can Define so like here is example here
1:05
in this demo I used a custom SVG that
1:08
has the question mark I just pasted that
1:10
directly into um the custom setting so
1:14
here for the Launchpad you can then
1:16
Define the size of that icon okay it's
1:18
actually the size the the total size of
1:21
the actual button so the icon size
1:23
itself will actually be half the size of
1:25
this because we need a little bit of
1:26
padding for everything to look good then
1:29
you can configure your colors so your
1:31
background your border options your SVG
1:34
color as well as Shadow now if you don't
1:37
want a border or a shadow it's simply
1:40
just go into the color settings and set
1:42
the opacity all the way to zero that
1:44
will effectively remove the border and
1:47
the shadow then if you're a foundation
1:49
user or a CSS Guru you can go ahead and
1:52
create your own custom classes and then
1:54
style this button even farther okay with
1:57
swatches and your own
1:58
CSS then the next setting has to do with
2:01
the direction or the layouts of the
2:04
satellites this has to do with the the
2:07
actual positions of the share it and
2:09
share link Stacks that can be added
2:12
around your
2:13
Launchpad fan option defines the scope
2:17
at which how far around the circle are
2:20
we going to evenly distribute our
2:24
satellites so in case one and case three
2:28
here I have actually the set to 180 okay
2:32
whereas this middle example here is set
2:34
to 360° because the limitation it they
2:38
will be spread all around the circle
2:42
okay um and then we the distance is how
2:45
far away from the Launchpad do you want
2:47
them to go and then the direction here
2:50
the direction allows us to Define where
2:52
do we want this makes most sense if we
2:55
have it less than 360 so for these
2:57
particular 180° implement ations where
3:00
do we want that to be to Fan out from
3:05
right so do we want it to be up down
3:08
left right or a custom value now if you
3:11
notice when you choose a direction up
3:14
down left or right I give you a value in
3:18
radians that is being used um I do this
3:21
to kind of help you out to if you want
3:23
to define a custom you can kind of get
3:26
an idea of what the radian values Define
3:30
right there's a lot of tricky
3:32
trigonometry going on here and depending
3:35
on your distance um sometimes these
3:38
default values might not be exactly what
3:41
you want so this is why um you know
3:44
depending on what distance and sizes
3:46
values you have set um you might need to
3:49
go to custom and then tweak the value
3:51
till you get the alignment of your
3:54
satellites just right the next settings
3:57
have to do with our satellites
4:00
themselves so these allow us to define
4:02
the size and the colors of all the
4:06
satellites so in this first example here
4:09
um I have the size of my satellites to
4:11
be 48 pixels and then here's the colors
4:14
that are going to be used for every
4:15
satellite Now by default the SVG color
4:18
here is not used if we want the
4:21
standardized if we want the svgs to have
4:23
a standard color we go ahead and check
4:25
this and what you'll notice is those
4:28
icon colors are now all the same okay
4:31
let's have a look at this SE second
4:33
example here if I were to turn off
4:35
standard color you'll see that we
4:37
actually get the the native colors of
4:39
each icon rather than um you know having
4:44
one uniform color so depending on what
4:47
layout you want um you might want them
4:49
to have different colors or the same
4:52
color and lastly we can customize the
4:54
animations so there's several different
4:56
animations that we can utilize here um
4:59
my favorite is Bounce I think it just is
5:01
a really nice elegant animation you can
5:03
customize the speed of the animation now
5:06
you can also Define a Clos delay and
5:09
what that is is let's say I scroll down
5:12
the page or click on something else on
5:15
the page this will cause the actual
5:17
satellites to automatically close you
5:19
can add a delay to that close instead of
5:22
them actually going
5:23
immediately next is we can open on Hover
5:26
which uh you know I think is a great way
5:28
to actually trigger it but you can
5:31
always click on the Launchpad to open
5:34
and close the Launchpad so I I think
5:37
open on Hover is great because it gives
5:39
a lot of you know discoverability um as
5:42
well as you can open on scroll so as we
5:45
see here on this page if I go ahead and
5:47
do preview if I scroll down the page
5:50
this particular one will actually load
5:53
on
5:55
scroll now in terms of the Launchpad
5:58
satellites I have already talked about
6:01
how share it and the share link Stacks
6:03
work and the share and Link satellite
6:06
Stacks work exactly the same however I
6:10
should note that when you can override
6:13
the styles that are defined globally in
6:15
the share launch stack so in the share
6:18
launch you can go ahead and customize
6:20
the default color of all your satellites
6:22
however you can override that at the
6:25
individual satellite level as
6:28
well
6:32
now lastly we can actually add a Content
6:35
stack to share launches well and what
6:38
this allows us to do is you can add
6:40
whatever content you want as a
6:43
standalone satellite as well now granted
6:46
our satellites are tiny so you can't add
6:48
a lot of content into here but I wanted
6:51
to give you the flexibility to add your
6:53
own stack content inside of an
6:56
individual
6:58
satellite
7:03
[Music]
7:07
oh