Collapse
Check out the function of the Collapse element!
The Collapse element allows content with horizontal blocks to be displayed in an expandable and collapsible area. It is often used in designs where the titles of sections are displayed, and other content within becomes visible when expanded. For example, it's used in content with multiple explanatory headings and frequently asked questions. The Collapse element enables users to hide and reveal specific content. It is commonly interactive with a Show More or Show Less button.
The Collapse element is an important user interface element that helps users manage content more orderly, hide excessive information, and access it when needed. In the application development process, it should be carefully designed to enhance user experience and usability.
Adding Collapse
Adding a Collapse element to your application is quite straightforward. To add a Collapse, follow these steps:
Drag and drop the Collapse element onto the screen.
You can customize the Collapse element using the Properties panel.
Collapse supports only Web applications. It does not support mobile applications
When you click on one of the titles of the Collapse element, a detail panel opens. You can add an element directly to it or add a Row to create more complex sections.
The Collapse element, like other elements, must be added within a Container element. Although it is generally added within a Row for screen design, it can also be added to other Container-type elements.
1. Properties
When the Collapse element is selected, parameters like Collapse, Destroy Inactive Panel, Accordion, Collapse Panel, Authorization, Visibility, and Actions are displayed in the Properties panel. These parameter areas allow for customization of the Collapse element, special authorization settings, and visibility preferences.
You can give role-based authorizations to the element and adjust its visibility using show/hide/conditional options.
You can add text and icons inside the Collapse element. Role-based permissions can be given to the element.
Collapse
Open the Collapse section in the Properties panel. From here, you can add new Collapse panels, delete them, change their order, and select existing Collapse panels.
Destory Inactive Panel
This option keeps the open panel in the Collapse open and closes the other panels.
Accordion
When one of the panels in the Collapse is opened, you can collapse the others that are open.
Collapse Panel
You can manage the panels you add to the Collapse. When you select a panel, you can change the Header, Key, and Show Arrow features. You can also make style adjustments on the selected Collapse panel.
You can use authorization options for the Collapse element.
Click here for a detailed examination of adding Authorization processes in elements.
Click here for a detailed examination of Authorization processes based on user roles or screen roles.
Visibility in elements is a feature used to control its visibility or accessibility in certain situations. This feature is often used in application design or functionality.
You can use visibility options to make the Collapse element always visible, hidden, or visible/hidden depending on a condition.
Click here for detailed information about adding Visibility to elements.
The visibility of the Collapse will be adjusted according to your selections.
Kuika includes system actions such as Arithmetic, Authorization, Condition, Device, Export, GeoLocation, Local Storage, Multi Language, Navigation, Notification, Payment Stripe, UI Control, Trigger,Process Automation, Process Administraion and String Operations.
In addition to system actions, you can use your own SQL actions.
You can add actions to the Collapse element with +Add Action.
2. Styling
You can customize the Collapse element with the Styling panel.
You can make additional edits to the Collapse element by adding Layout, Text, Fill, Border, or Shadow.
In the Collapse element, you can make visual adjustments such as Padding and Sizing with Layout. Depending on the size of the Collapse, you can align the elements inside it.
The Collapse element does not support Size, Min size, and Display fields. It partially supports Align
Click here for detailed information about adding Layout to elements.
You can adjust features like font family, style, size/color, spacing, and options for the text and icon of the Collapse in the Text section. The Collapse element supports all features of the Text.
Click here for detailed information about adding Text settings to elements.
You can add color or an image to the background of the Collapse element with Fill.
Click here for detailed information about adding Fill to elements.
You can add a border to the outer edges of the Collapse and give radius.
Click here for detailed information about adding Borders to elements.
In web applications, you can add a shadow effect to the Collapse element with Shadow. Since the Collapse element is not present in mobile applications, the Shadow feature is also not available.
Click here for detailed information about adding Shadow to elements.
Last updated
