Clone Project

Custom Tabs Switcher

Created by
Patrick Urwyler
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
AI Description

The Custom Tabs Switcher is a component designed to allow users to toggle between different views, such as Grid-View and List-View, using native Webflow tab interactions. It utilizes Finsweet's mirror click attributes to enhance flexibility, making it a useful tool for developers looking to implement tabbed content on their websites.

Key Features:

  • Toggle functionality between Grid-View and List-View using native Webflow tab interactions.
  • Utilizes Finsweet's mirror click attributes for enhanced flexibility.
  • Native tabs are set to display none, ensuring a clean interface.
  • Smooth transitions with customizable easing and duration settings.

Design Elements:

  • Grid layout for displaying items in a structured format.
  • List layout for a more traditional, linear presentation of items.
  • Use of placeholder images and text to demonstrate functionality.

Potential Use Cases:

  • E-commerce websites showcasing products in different layouts.
  • Portfolio sites displaying projects in grid or list formats.
  • Blogs or content-heavy sites allowing users to switch between article summaries and detailed views.

Conclusion: The Custom Tabs Switcher is a practical component that enhances user experience by providing flexible viewing options, making it suitable for various web applications.

Description from Webflow:  
A little tab switch I built for my own new website (of course in progress)... Toggle between Grid-View / List-View (for example) with this native webflow tab interaction paired with finsweet mirror click attribute to be more flexible. The native tabs are set to display none. Switching only works when published due to mirror click attribues added to the custom tabs (trigger) and the native tabs (target). Happy cloning!
Tags from Webflow: 
tabs,  finsweetclientfirst,  finsweet,  cloneable,  interactions,  grid layout,  finsweetattributes
.