Panel

Check out the function of the panel element.

In application development processes, the Panel element is frequently used in user interface (UI) design and development. The Panel element is used to organize and present groups of elements.

You can use the Panel element to create dynamic backgrounds for cards, page layouts, sections, and more. For example, in a weather app, you can use a Panel to display a visual corresponding to the location and weather conditions, or as an indicator in a list. Since a Row element can be added inside a Panel element, it can contain complex content.

The Panel Element has the following functionalities:

Content Grouping: Used for grouping and organizing a certain type of content.
Display Area: Panels can be used to display specific information or functionality within a certain screen or area. They are especially useful for fitting more content into a smaller space.
Customization and Style: Panels can be customized in terms of design and style.

You can use the Panel element in the web or mobile applications you develop.

Panels are an important element in making the user interface more functional and user-friendly during the application development process. They help users access content in an organized manner and assist in better organizing certain functionalities. Therefore, the design and functionality of panels are an important part of the application development process.

Adding Panel

Adding a Panel element to your application is quite straightforward. To add a Panel, follow these steps:

In the UI Design view, open the Elements panel on the left side.
From the Container category in the Elements panel, select Panel.
Drag and drop the Panel element onto the screen.
You can customize the Panel element using the Properties panel.
When you drag and drop a Panel element to an empty space on the screen, it is added with a Row element. If you drag it into a Column, only the Panel element is added.

Since a Row element can be added inside a Panel element, you can include other elements except for Header and Footer to design your screens.

1. Properties

When the Panel element is selected, parameters such as Scrolling, Scroll Back Color, Scroll Width, Scroll Radius, Dynamic Background Color, Dynamic Font Color, Dynamic Bg Image, Hover Background Color, Hover Font Color, Authorization, Visibility, and Actions are displayed in the Properties panel. These parameter areas allow for customization of the panel, special authorization settings, and visibility adjustments.

You can directly add an element inside a Panel, or it can be part of different elements

Scrolling

In the Properties panel, open the Scrolling section. If the height of the Panel element is set shorter than the elements inside, you can enable scrolling of the content. The Scrolling area has a Selectbox with options like Hidden, Vertical, Auto, and Horizontal. These options allow you to adjust the direction and state of the Panel element.

Scroll Back Color / Width / Radius

You can enable scrolling when the content of the Panel element is longer than its width/height. You can customize the style of the scroll bar that appears on the horizontal/vertical edge of the Panel.

Dynamic Background Color

You can make the background color of the element change depending on the data received through a data table. For instance, in a list of student exam scores, you can set scores below 70 to appear red and those 70 and above to appear green. You can add this as a Container element to a Label element. When adding the relevant function, you can also use additional features found in the Symbol Picker.

Dynamic Font Color

Similarly, in a student exam result list, you can adjust the font color of the Label element inside the Panel element.

Dynamic Background Image

In a weather app, you can use the Panel element to display an image in the background corresponding to temperature and wind data or to show an added image in social media applications.

It is not recommended to add very high MB images for Dynamic BG images.

Hover Background Color

In web applications, you can set the color change in the background when the cursor hovers over the Panel element.

Hover Font Color

In web applications, you can determine the color that the Label element inside the panel element will take when the cursor hovers over it

Authorization

You can use authorization options for the Panel 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

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 Panel 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 Panel will be adjusted according to your selections.

Actions

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 Administration and String Operations.

In addition to system actions, you can use your own SQL actions.

You can add actions to the Panel element with +Add Action

2. Styling

You can customize the Panel element with the Styling panel.

You can make additional adjustments by adding a Layout, Text, Fill, Border or Shadow to the Panel element with the Styling panel.

Layout

You can make visual adjustments such as padding and sizing within the Panel element. You can align the elements inside it based on the size of the panel.

The Panel element does not support Size, Min Size, Max Size, and Display fields. It partially supports Align.

For detailed information on adding layout to elements, click here.

Last updated 3 months ago