Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
16 changes: 14 additions & 2 deletions components/bl-collapsiblePanel-component/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
# Collapsible Panel

Collapsible Panel is the component that can be used in Backendless [UI-Builder](https://backendless.com/developers/#ui-builder). This component displays summary information and upon selecting the panel, it expands to display the full expansion panel.
Collapsible Panel acts as a container for different elemenets that can be used in the Backendless [UI-Builder](https://backendless.com/developers/#ui-builder). By default, this component always loads in the nonexpanded state, and when it is clicked, the panel gets expanded. Once the panel is expanded it displays the content that must be set in the UI-Builder.

<p align="center">
<img src="./thumbnail.png" alt="main thumbnail" width="780"/>
</p>

You can add any elements supported in the UI-Builder to the component by dragging-and-dropping them to the content area of the Collapsible Panel. Those elements can be text, images, and even other custom components. For instance, the example below contains two elements(**Text** and **Color Picker**) added to the Collapsible Panel:

<p align="center">
<img src="./example-images/component_collapsible_panel_1.png" alt="preview_1" width="780"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Use please meaningful alt messages, that are needed for accessibility(it voiced for blind people)

</p>

As you can see, once the page is loaded and the panel is expanded, elements added to the container are visible and fully functional:

<p align="center">
<img src="./example-images/component_collapsible_panel_2.png" alt="preview_2" width="780"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Rename images to something meaningful

</p>
Comment on lines +9 to +19
Copy link
Contributor

Choose a reason for hiding this comment

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

Move it to examples section


## Properties

| Property | Type | Default value | Logic | Data Binding | UI Setting | Description |
|---------------------------------|--------|---------------|--------------------|--------------|------------|-------------------------------------------------------|
| Title <br> `title` | *Text* | `Panel Title` | Title Logic | YES | YES | The logic to determine the title of the panel. |
| Title <br> `title` | *Text* | `Panel Title` | Title Logic | YES | YES | Sets the title for the panel. |
Copy link
Contributor

Choose a reason for hiding this comment

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

Please, fix markup for table


## Events

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.