How to create a vertical sliding page composed by different Components?

Archived
1

Hi,
I’ve been trying to find some examples or documentation on how to create a vertical page with different components. For example:

  • At the very top a Highlight poster with a CTA button for more details
  • Just after 2x horizontal carousels (small 16:9 square, with a poster image, as what we see commonly in other changels)
  • Followed by a 1x horizontal carousel that has a bigger Height but similar to the previous carousel

I thought that I’d have to put it as children of a LayoutGroup but didn’t work as I expected, so I’m clueless:

  <children>
    <LayoutGroup
      layoutDirection="vert"
      vertAlignment="top"
      itemSpacings="[10, 10]"
      addItemSpacingAfterChild="true">
      <HighlightBigPosterSingle id="filmHighlight"/>
      <CarouselMultiThumbnails id="filmCarousel"/>
      <CarouselMultiThumbnails id="filmCarousel"/>
      <HighlightMultiBigPosterCarousel id="filmHighlight"/>
    </LayoutGroup>
  </children>

Basically, I want to navigate the interface up and down, where each Component is either a MarkupGrid that lets you navigate left and right, a Component that is a single Poster, a Component that is a Carousel of Posters, etc. Does this make sense? The Netflix interface is a good example, some times you have small carousels, other times bigger poster carousels and stuff like that.

I’ve also spent quite a lot of time trying to figure this out looking around but haven’t found any details.

2

Do you still need help with this or rather following this post still?

On a side note, never use the same id on different components.

3

I end up creating a custom component that takes child components dynamically, and then used the animation feature to move the viewport to the focused component.

Thanks for checking!