Tabs

Tabs

TABS Interactive

The primary goal of Tabs Interactive is to present users with a grouped view of related data, which in turn allows content builders to modularize groups of information in a compact manner, saving valuable screen real estate.

Here is a short video on how Tabs Interactive works:

How to create Tabs Interactive:

To create a Tabs interactive, follow these steps:
  1. Click on the "Create" button located in the Tabs interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Tabs interactive.


 Once the form is open, you'll find the following fields to fill out:

Interactive Title: Input a title or name for the Tabs interactive.

Section Header: Enter a title for each section, which can be expanded or collapsed by users.

Section Body: Input content to be displayed when the section is expanded.
'Add Section' for Tabs Interactive:
  1. The Tabs interactive form has collapsible sections. To add a new section, click 'Add Section,' and a '+' icon will appear on the section line stating 'Add Section' below. Refer to the images.
  2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
  3. To delete a section, click the 'Delete' icon on the Section Line and confirm the deletion by selecting 'Remove.'

Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
Customize Options: Customization options allow for users to personalize and adjust visual aspects like fonts, colors, styles, and spacing to fit preferences or branding. They improve appearance and usability to meet user requirements, with options for Section Headers, Borders, and Icons provided.

Section Header: 

  1. The section header customization options allow users to tailor the appearance of headers or titles within their content: font family, font style, font size, font weight, alignment, font color, active tab background color, inactive tab background color, separator color, and separator size.

  2. You can customize headers for visually appealing and organized content presentation.
   


 


Border:

 1. A border outlines and separates content, adding structure and enhancing appearance.
 2. You can customize its color and thickness and choose from different border styles.
 3. The border radius allows for rounded edges.

Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.




THANK YOU


    • Related Articles

    • Release notes for Loree A2401.7

      Bug Fix List Bullet Alignment Issue Issue: Earlier users encountered difficulty when trying to use the list bullets in interactives (all interactives with the exception of Accordions and Tabs), while the bullets would align correctly on the edit ...

    • Release notes for Loree A2401.3

      24 January, 2024 Feature Enhancements Enhanced customization options for "Tabs" Interactive: Ability to add a separator line between Tabs: A new style in Loree Interactive allows you to customize your tabs and enhance their visual appeal. With this ...

    • Release Notes for Loree A2403.3

      Published on: 31/07/2024 Feature Enhancements 1. Enhance Customization for Active and Inactive Tab Text Colour Earliers, when Loree users created a Tabs Interactive, the customize section applied the same font color style to both Active and Inactive ...

    • Release notes for Loree A2101.4

      Loree Issue fixed in Loree editor Page name mismatch inside the editor As a user, When I use special characters for page name doesn’t display the special characters on Loree editor. Instead, it shows % for all the used special characters. This issue ...

    • How to map Roles and Features in Loree?

      Unlocking the Mysteries of Role Mapping in Loree: A Comprehensive Guide After installing Loree, our team will establish two Loree roles: Teacher and Designer. These roles will have all permissions enabled, allowing users to access all features. The ...