Skip to content

Carousel Docs Review #439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Carousel Docs Review #439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ceb00f9
Update README.md
vladimirbackendless Apr 3, 2023
7d7a952
added component assets
v-excelsior Apr 5, 2023
ac90292
Update components/bl-carousel-component/README.md
v-excelsior Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions components/bl-carousel-component/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
# Carousel

Carousel is a component of Backendless UI-Builder designer. This allows you to add some image and switch between them.
Carousel component represents an area where you can add images and switch between them using control buttons. This component is based on [Bootstrap Carousel](https://getbootstrap.com/docs/5.2/components/carousel/). Available in the UI-Builder.

The component based on external [Carousel](https://getbootstrap.com/docs/5.2/components/carousel/).
<p align="center">
<img src="./thumbnail.png" alt="main thumbnail" width="780"/>
Copy link
Contributor

@v-excelsior v-excelsior Apr 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove ./example-images/carousel_component_1.png, component already have thumbnail

</p>

Images for Carousel can be set in the Settings of the UI Builder. The component uses a list of JSON objects where base64-encoded images or URLs to images are stored. Besides the image data, the JSON object contains the **"title"** and the **"content"** properties to display text. As you can see in the image below, the base64-encoded image or the URL to the image is stored in the **"url"** property.

<p align="center">
<img src="./example-images/carousel_component_2.png" alt="main thumbnail" width="780"/>
</p>
Comment on lines +9 to +13
Copy link
Contributor

@v-excelsior v-excelsior Apr 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have JSON which could be copied and XML that needed for logic.

No need in image of JSON as it useless.

As for description. I believe approach where short and compressed documentation comes first and examples comes after it - is only one right solution for every level software engineers.
So we need to move that down(near already existed example with JSON)

For example Web Bible - MDN


You can also set images, titles and content by using the Codeless Logic presented below:

![](example-images/imagesData-example.png)
Comment on lines +15 to +17
Copy link
Contributor

@v-excelsior v-excelsior Apr 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it just duplication of what we already have below?

Copy link
Collaborator Author

@vladimirbackendless vladimirbackendless Apr 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes. It is there just to describe the context better.


## Properties

| Property | Type | Default Value | Logic | Data Binding | UI Setting | Description |
| ------------------------------------------- | --------------------------------------- | ------------------------------------- | --------------------------- | ------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Images Data:`imagesData` | JSON | [Defalut Value](#images-data-default) | Image Data Logic | YES | YES | Allows determinate data for carousel. Watch [Codeless Examples](#examples). Signature of polygon: `{"url": string, "title": string, "content": string }` |
| Height:`height` | Text | "400px" | Height Logic | YES | YES | Allows determinate height for images. |
| Width:`width` | Text | "700px" | Width Logic | YES | YES | Allows determinate width for images. |
| Autoplay Delay(ms):`autoplayDelay` | Number | 5000 | Autoplay Delay | YES | YES | Allows determinate delay(ms) for autoplay. |
| Animation Type:`animationType` | Select [Slide:`slide`, Smooth:`smooth`] | Slide: `slide` | | NO | YES | Allows select type of animation (slide, smooth). |
| Animation Duration (ms):`animationDuration` | Number | 600 | Animation Duration Logic | YES | YES | Allows determinate duration for animation. |
| With Controls:`withControls` | Checkbox | `false` | Controls Visibility Logic | NO | YES | Allows determine if the control buttons should be visible. |
| With Indicators:`withIndicators` | Checkbox | `false` | Indicators Visibility Logic | NO | YES | Allows determine if the indicators should be visible. |
| Property | Type | Default Value | Logic | Data Binding | UI Setting | Description |
|---------------------------------------------|-----------------------------------------|---------------------------------------|-----------------------------|--------------|------------|---------------------------------------------------------------------------------------------------------------|
| Images Data:`imagesData` | JSON | [Defalut Value](#images-data-default) | Image Data Logic | YES | YES | Sets the data for the carousel. JSON object structure: `{"url": string, "title": string, "content": string }` |
| Height:`height` | Text | "400px" | Height Logic | YES | YES | Sets the height for images. |
| Width:`width` | Text | "700px" | Width Logic | YES | YES | Sets the width for images. |
| Autoplay Delay(ms):`autoplayDelay` | Number | 5000 | Autoplay Delay | YES | YES | Sets the delay in milliseconds(ms) for autoplay. |
| Animation Type:`animationType` | Select [Slide:`slide`, Smooth:`smooth`] | Slide: `slide` | | NO | YES | Sets the animation type (slide, smooth). |
| Animation Duration (ms):`animationDuration` | Number | 600 | Animation Duration Logic | YES | YES | Sets the duration for animation. |
| With Controls:`withControls` | Checkbox | `false` | Controls Visibility Logic | NO | YES | Sets the visibility for control buttons. |
| With Indicators:`withIndicators` | Checkbox | `false` | Indicators Visibility Logic | NO | YES | Sets the visibility for indicators. | |

## Events

Expand Down
Binary file added components/bl-carousel-component/example-images/carousel_component_1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added components/bl-carousel-component/example-images/carousel_component_2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.