You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
Version 1
Next »
Card
The Card directive lets you render the data in the form of a card component. This directive can be used for various purposes, besides Provider or Location cards. This could hold any HTML content within it.
Snippet
The bootstrap carousel will render only one carousel item, with design changes with navigation arrows, irrespective of the page width.
Parameters used for Carousel
Property | Description |
---|
"type": "carousel"
| This property accepts carousel , bootstrapcarousel , and card options. |
"items": [{ "reviews": {...} "title": "title", "description": "desc", "image": {...}, "detailView": {...} }
}]
| The items property is used to fill the carousel options. Each carousel option can have the below properties. reviews title description image detailView
|
"title": "Title for Carousel",
| The Title of the carousel option. |
"reviews": { "rating": 2.5, "label": "Reviewslabel", "count": 20000
}
| This is an optional property. You can show the rating on the carousel options and in the detailed view using this property. rating - This is the calculated rating value. The rating stars will get filled based on the number given here. (hardcoded in the sample code). label - You can set a custom name to the rating icon. (Can only be seen in Detailed view) count - The total number of ratings received. (Can only be seen in Detailed view)
|
"description": "Description for Carousel Option",
| The description of the Carousel Option. |
"image": { "alternateText": "altimg", "url": "Imageurl"
}
| Paste the appropriate image URL that you uploaded to Orbita. Recommended size is 225px width and 135px height. |
"detailView": { "title": "Detailed title", "description": "Detail Desc", "image": { "url": "ImgURL", "alternateText": "OE" }, "buttons": [{ "text": "Button Text", "type": "link", "value": "URL" }]
}
| Clicking on the Carousel option will open the detailed view window. The below mentioned are the properties it contains. title - Title of the detailed view page. description - Description of the detailed view page. image - Recommended size is 620px width and 290px height. buttons -You can set an optional floating button at the end of the detailed view using this property. review - The review object will be rendered in the detailed view to show the rating.
|
Carousel options
The below image shows where each property would be rendered on a carousel.
detailedView of the carousel
The below image shows where each property would be rendered on the detailedView of the carousel.
Sample flow
Related Articles
-
Page:
-
Page:
-
Page:
-
Page:
-
Page: