Paragraph Bundle Tabs

Creating a "Paragraph Bundle Tabs" in Drupal to implement a tabbed interface involves two main components: the Display and Content tabs. Each of these tabs provides different functionalities and customization options to ensure flexibility and a good user experience. Here's a detailed breakdown of what each tab entails:

Display Tab

The Display tab is focused on the aesthetic and behavioral aspects of the tabs. It includes a variety of fields to customize the appearance and interaction with the tabs:

1. Background Color: This option lets you pick a color for the background area of your paragraph. It's like choosing a paint color for the wall behind your text.
2. Background Color Hover: This is a fun feature! When you move your mouse cursor over the paragraph, the background color changes to the color you pick here. It's like a magic trick for your paragraph!
3. Text Color: Here, you can decide what color the words in your paragraph will be. It's like selecting the ink color for writing your paragraph.
4. Text Color Hover: Similar to the background hover, this changes the text color when you hover your mouse over the paragraph. Imagine the text changing color like a chameleon when you move your mouse over it.
5. Border Color: This option lets you choose a color for a thin line that surrounds your paragraph, like framing a picture.
6. Border Color Hover: When you hover your mouse over the paragraph, the border color changes to what you choose here. It's another way to make your paragraph interactive and eye-catching.
7. Border: In this section, you have the option to choose from 11 solid line styles, each varying in thickness, for your paragraph's border.
8. Border Radius: This option allows you to round the corners of your paragraph's border. You have 6 styles to choose from, ranging from slightly rounded to completely circular corners.
9. Margin: This sets the space between your paragraph and other elements on the page. You can choose from 6 options to determine how much space you want around your paragraph.
10. Padding: Padding is the space between your text and the border of the paragraph. This option gives you 8 choices to decide how much space you want inside the border.
11. Max Width: This lets you control how wide your paragraph can be. You can choose from 7 different widths in pixels, or set it to 100% which will make the paragraph stretch as wide as its container allows.
12. Box Shadow: You have 2 options here to add a shadow effect to your paragraph. This makes it look like your paragraph is slightly raised above the page, giving it some depth.
13. Background Color Opacity: This is a slider that lets you adjust how see-through the background color is. Sliding it down makes the background more transparent, allowing whatever is behind it to show through a bit.

Additionally, there are four fields to control the tab behavior and appearance:

• Add Animation While the Tab Is Opening: Enables animations when a tab is selected.
• Apply Color to the Active Background: Highlights the active tab with a distinct color.
• Change Layout for the Tab to Be Vertical: Switches the tabs from a horizontal to a vertical layout.
• Choose the Breakpoint for the Vertical Tab: Offers five breakpoints for responsive design, determining when the tabs switch to vertical layout on different screen sizes.

Content Tab

The Content tab focuses on the actual content within each tab:

1. Title: Provides a field for entering the title of the tab (Hero Title).
2. Tab Body:
   • This is a paragraph field where users can add another paragraph bundle named "Tab Section."
   • It is selected by default and serves as the main content area for each tab.
3. Content Options:
   • The tab body can include different types of content, such as images or text bundles.
   • This flexibility allows for diverse content display within each tab, catering to various use cases.

Implementation

In Drupal, implementing such a paragraph bundle would involve:

1. Creating the Paragraph Types: Define the types for "Tab Section" and the main tab paragraph bundle.
2. Field Creation and Configuration: Add all the fields listed under the Display and Content tabs and configure them according to the requirements.
3. UI Implementation: Develop the front-end aspect to reflect the settings in the Display tab, using CSS for styling and JavaScript for behaviors like animation and breakpoints.
4. Integration with Content Types: Allow these paragraph bundles to be attached to various content types, ensuring they can be used flexibly throughout the site.
5. Responsive Design Considerations: Ensure that the tab layouts and breakpoints function correctly across different devices and screen sizes.

This setup provides a comprehensive, customizable tabbed interface suitable for various content presentation needs in Drupal, enhancing both user experience and website aesthetics.