Skip to content

Platform: Carousel Technical Design

Jump to bottom
kavya-b edited this page May 13, 2020 · 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    [displayType]="thumbnails|multi-slide|single-slide"
                        [animationType]="slide|fade"
                        [isControlable]="true|false"
                        [interval]="'3000'"
                        [(onSlide)]="'0'">
         <fdp-carousel-item [items-list]="slides">
                   <!--user can define there won't information-->
        </fdp-carousel-item>
      </fdp-carousel>

Property Bindings

displayType: thumbnails|multi-slide|single-slide:String

Slide display by default it is single-slide thumbnails- tiles will be placed in down on select of tile respective image will be shown multi-slide- at a time 2 slides will be shown.

isControlable: true|false:Boolean

Slides movement can be controllable by user when it has true value. If it false then slides will be displayed with 3000 time interval once after another.

animationType: slide|fade:String

Tells whether the animation should be in slides or faded

interval: number

Time delay between slides display user can enter there own time interval. By default value will be 3000.

Event Bindings

Two-Way Bindings

onSlide: EventEmitter<any>

which slide to consider active. By default 0th index slide will be active but when can pass another index which will be shown as active.

Content Projection

N/A

Related Modules

Additional Notes

Carousel-item Component

Summary

it will have list of images along with there location details.User can customize this elements inside this component as per there wish.

can add divs, class, with any other new look or content.

Property Bindings

slides: any = [[]];

slides can add slides,location, width, content as per there wish.

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

  • fdp-carousel-item can be supported as:
<fdp-carousel-item i18n="@@carouselItemContent1">..Item content 1..</fdp-carousel-item>
<fdp-carousel-item i18n="@@carouselItemContent2">..Item content 2..</fdp-carousel-item>
<fdp-carousel-item i18n="@@carouselItemContent3">..Item content 3..</fdp-carousel-item>

Redesign Required: No

Notes

  1. Will be using "slick-carousel" library which is built on jquery and has the basic features of carousel. -Won't be using it. it has compatibility issues with fundamental-ngx.

  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 Needed confirmation for fundamentals team, so added this question here. In fundamentals group I did not get any confirmation on this from Deno or other memebers yet
  • 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.

** Manju**: Is user going to add image by default? if yes then we can have one interface which will have image,ariab-label as properties.

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.

       ` Created them as a sperate attribute and update the same above`
  • When it contains internal action to move forward, and backwards, are they going to have a label ? updated above, added a control attribute, if user make it as true, forward and backward controller (buttons) will be displayed for them.

What about i18n?- Carousel is mainly used for visual representation, so image navigation will be changed from right to left as mentioned in FRD for arabic kind of language. If user is displaying text inside it then user has to take care of specific language they are going to support.

  • 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. Updated, added onSlide, which will take the index of the slide and make it active and user can move forward or backward based on their wish.

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 containers and they should share the same characteristics.. Will make sure to do the same while creating styles.

Clone this wiki locally