Tab

Check out the function of the Tab element.

The Tab element facilitates the creation of tab-based interfaces, allowing users to switch between tabs to display different content. Like the Collapse element, it can display the content of the selected tab within a single frame. Tab titles can be positioned at the top/right/bottom/left of the element. By adding a Row element to the TabItem areas, you can create complex interfaces.

The Tab element is an essential tool in the application development process for improving user interface design and usability. It enables users to easily find and navigate content and functions.

Adding Tabs

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

1. In the UI Design view, open the Elements panel on the left side.

2. From the Container category in the Elements panel, select Tab.

3. Drag and drop the Tab element onto the screen.

4. You can customize the Tab element using the Properties panel.

5. If you drag and drop the Tab element to an empty space on the screen, it is added with a Row element. If you drag it into a Row, it is added to the column where it is placed.

6. Like other elements, this Container-type element is generally added within a Row. However, it can also be used by adding it to other Container elements. You can prepare tabs with complex content by adding a Row element to the TabItem.

The Tab element is supported in both mobile and web applications.

1. Properties

When the Tab element is selected, parameters such as Tab, Type, Tab Position, Selected Tab Color, Authorization, and Visibility are displayed in the Properties panel. These parameter areas allow for customization of the Tab element, special authorization settings, and visibility preferences.

You can assign role-based authorizations to the element and adjust its visibility using show/hide/conditional options.

Tab

You can add new tabs and remove existing ones. Tab contents that you remove are also deleted along with the tab. You can also change the order.

Type

You can use predefined view types for tab titles.

Tab Position

You can specify which side of the Tab element frame the tabs should rest on. You can choose one of the top / right / bottom / itself left directions.

Selected Tab Color

This is the area where you edit the font and line colors of the selected tab.

TabItem - Label

This is the section where you add the text you want to be in the selected tab title. With the tab element selected, select the tab whose title you want to change from the Properties panel and change its text.

Authorization

You can use Authorization options for the Tab 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 Tab element always visible, hidden, or visible/hidden depending on a condition.

Click here for detailed information about adding Visibility to elements.

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 Tab element with +Add Action

Styling

You can customize the Tab element with the Styling panel.

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

Layout

In the Tab element, you can make visual adjustments such as Padding and Sizing with Layout.

Click here for detailed information about adding Layout to elements.

Text

No textual editing is done within the Tab element. For textual editing, different elements (like labels) must be added inside the Tab element.

Click here for detailed information about adding Text settings to elements.

Fill

You can add color or an image to the background of the Tab element with Fill.

Click here for detailed information about adding Fill to elements.

Border

You can add a Border to the outer edges of the Tab and give Radius.

Click here for detailed information about adding Borders to elements.

Shadow

In web applications, you can add a shadow effect to the Tab element with Shadow.

Shadow is not used in mobile applications.

Click here for detailed information about adding Shadow to elements.