Tabs #4

Component Structure

  • TB4 COMPONENT (Section): Serves as the main wrapper for the tabs component, facilitating alignment and spacing. It is styled with the CSS class tb4__component, which may define height, alignment, or other properties to ensure the component occupies the full viewport height and is centered.

  • TB4 CONTAINER (Container): Nested within the TB4 COMPONENT, this container holds the tabs and content sections. It is associated with the tb4__container CSS class for additional styling flexibility.

  • TB4 ACCORDEON (Tabs-nested): This element acts as the accordion for holding tabs content, ensuring a responsive layout. Styled with tb4__tabs, it defines the border, layout direction, and spacing between tabs.

  • TB4 CONTENT (Block): These blocks contain the individual content for each tab, hidden or shown based on active tab selection. Each content block is styled with tb4__content for consistent borders and padding.

  • TB4 CONTENT INNER (Block): Inside each TB4 CONTENT, this layer serves to structure the content further, providing a foundation for images and text. It uses the tb4__content-inner class for width, height, and positioning.

  • TB4 IMAGE (Image): These elements display images within each content section. The tb4__image class applies styles for width, height, and object-fit properties.

  • TB4 TEXT WRAPPER (Div): Wraps text elements, such as headings and paragraphs, within the content sections. Styled with tb4__content-text, it positions and styles the text content.

  • TB4 MENU (Block): Contains the navigation for the tab component, including menu headings and navigation items. Styled with tb4__menu for layout adjustments.

  • TB4 MENU TITLE (Div): Individual titles within the menu, allowing for interaction with the tabs. These are styled with tb4__menu-title for width and positioning.

Animation Structure

  • TB4 - CONTENT IMAGE: Targets images within the tabs, animating from a clipped state to fully visible. The animation emphasizes the content's appearance with a subtle scale effect, enhancing visual interest.

  • TB4 - CONTENT TEXT: Animates the text content's appearance within each tab. It scales and fades text in for a smooth transition, making the content appear dynamically as the tab is selected.

Events

  • TB4 - IMG: Utilizes a mutation observer to trigger animations when the tab's content changes. It restarts the "TB4 - CONTENT IMAGE" and "TB4 - CONTENT TEXT" animations, ensuring that content transitions are initiated by user interaction with the tabs.

PreviousTabs #3NextPROJECTS

Last updated