in this video we'll demonstrate how you
can use the new
container types uh in a ux component so
these container types are card card
navigator
card header and card footer so we'll
start out by just demoing
and then we'll go back and look at how
we built this component so you can see
here we have
a card navigator and then inside this
card we have two
cards and we're going to basically
navigate within the card navigator using
um transitions so in this case we're
going to use the flip
transition so you can see we're flipping
from card one to card two
we can also basically slide from card
one to card two
or we could so this is basically doing a
slide
left to right and this is going to be
doing a slide up
so we're sliding between card 1 and card
2 over here
so let's go back now to the designer and
see how this was done
so you can first of all you can see when
we add in a card
container sorry when we add a container
to a component
we have a whole bunch of new container
types we have card
card footer card header and card
navigator so a card
navigator can only contain cards
in addition to a card header and card
footer and then a card
a card itself can have a card header a
card footer
and then any other controls that you
want so you can see
here's our first card from there to
there
and this card has a header which is
one inch high and has a background color
of blue and
it also has actually it doesn't have
anything in the footer
and then it has a list control which is
set to fill the container so in this
case when we say fill the container
we only mean the space between the
header and the
and the footer so then we have the next
card over here called card three and
this also has a list control
that is also set to fill the card and
then finally we have this card
navigator over here which
is
set to basically uh center horizontally
and also center vertically and also
it has a border around it that is a gray
box with a box shadow and rounded
corners so
you can basically choose from these
predefined border styles
or you can go to the card style
and define any border style that you
want so
in in this case this you can see here it
says
border solid 2 pixel green but that's
not being used because it's being
overwritten by the container
border defined there if we had gone and
chosen a default
then we would have been using the the
style that's defined over there
so so now what we have is um a
card header inside this card navigator
and then so this card head is going to
stay fixed as we transition from one
card to the next
then we have the first card and then we
have the second card
and then we have these buttons that do
the transition so you can see
these buttons are done through action
javascript so you can see there's a card
navigator action
and the card navigator action can either
basically navigate to a different
card or get information about the state
of the card navigator
and by by the state we mean which
which card would be the card that you
navigate to
if you click the next button whether
you're currently on the first or the
last
card within the card navigator etc
so in this case we're choosing a
navigate to card action
the card navigator that we're talking
about is card navigator number one
our target card can be either any of the
physical cards within the card navigator
or these special targets called
alpha anywhere next alpha anywhere next
loop so next loop
means that if you're currently on the
last card
and you go to the next card it'll go to
the first card automatically
whereas if you're on the last card and
you and you say next it'll
do nothing because you're already on the
last card then
previous previous loop first last and
then the physical cards card one card
card two and card three and then we can
specify what our transition
type is so the transition can be either
slide left slide right slide up slide
down
or flip left to right flip right to left
flip top to bottom
or flip bottom to top so we've chosen
flip
right to left here we've specified that
the duration of the transition is 300
milliseconds
and we've also we could but we haven't
needed to
define an on transition complete event
which will
fire once the transition has been
completed
so then we can see we have another
button over here
which is doing the exact same thing but
it's using a different transition type
it's using
slide left so let's go ahead now and
run this so if we go
flip and then slide so these are doing
slides this is doing slide up
over there and then if we go look over
here we can see that card
2 has a header
and the header has basically been set to
center the text horizontally and also
center the text
vertically etc so the ability to add
cards with and card navigators
allows you to create some very nice
looking
user you know user effects in your ux
components thanks very much for watching
Customer Support