Skip to content

Platform: Carousel Technical Design

Jump to bottom
Frantisek Kolar edited this page Nov 27, 2019 · 16 revisions

Carousel Component

Summary

The carousel displays multiple pieces of content in the same place on a page. Users view one piece of content at a time, just like browsing through a set of cards or slides. The carousel provides navigation controls so user can easily move through it, and a paging indicator that informs users of their current position.

It’s best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items.

Design

       <fdp-carousel
                        [slides]="slides"
                        [config]="carouselConfig" 
                        (init)="carouselInit($event)"
                        (afterChange)="afterSlideChange($event)"
                        (beforeChange)="beforeSlideChange($event)">
      </fdp-carousel>

Property Bindings

slides: []

The list of slides wanted to display those paths will be given here.

carouselConfig: any

How many slides to show and slides to scroll configuration details will be set here. n`

Event Bindings

carouselInit: EventEmitter<any>

It will handle the initialization of carousel instance with the configuration details given. It handles after and before the change slide events too in the carousel instance.

afterSlideChange: EventEmitter<any>

It will handle the slide display in carousel. It will have details of current Index of the slide and what should be next slide once a current slide is changed.

beforeSlideChange: EventEmitter<any>

It will handle the slide display in carousel. It will have details of current Index of the slide and what should be next slide once a current slide is not changed.

Two-Way Bindings

N/A

Content Projection

N/A

Related Modules

Additional Notes

Notes

  1. Will be using "slick-carousel" library which is built on jquery and has the basic features of carousel.
  2. Will be overriding the functionality, css, scss and themes of this library to make sure it is as per Fiori 3.0 standards.

Questions

  • Can I place this component in core library?
    • Platform is better, core has mostly things that exists in the styles
  • Is it allowed to use 3rd party library- "slick-carousel"? for avoiding from scratch development.
    • yes. We already discussed this
  • Styles can I place in fundamental-styles or do I need to add them in fundamental-ngx/platform styles itself, css has to be developed from scratch to maintain fiori 3 standards for this component.
    • Since Styles does not have anything related to carousel, you need to have styling in the componnet
    • You could also discuss this with designer to take common pieces from Firoi 3, panels, pages, actions, etc.

Frank: - You should support routing a sits always easier to use routes instead of adding all into one template, your config has not information so you could capture some of the fields to get better idea how are you gonig to configure this. - When it contains internal action to move forward, and backwards, are they going to have a label ? What about i18n?

  • If its emitter then we should see it from the binding, maybe add On. Also you say it handles initialization of the component how?
    • You are passing $event What is going to be inside this event object.
- I have already put something in your question section, since we want to be fiori compatible and themeble thing how to use as much as styles/variables from  styles, at the end this all all containers and they should share the same characteristics..

Clone this wiki locally