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