How can I switch a tab from a button click?

Canuckaholic · March 28, 2022, 6:07pm

We are using the built-in Tabs component and would like to switch to one of the tabs when a user clicks a button in the content section of a different tab. I assume this can be done through data binding, but it’s not clear how.

ancheetah · March 28, 2022, 8:59pm

Hey @Canuckaholic, this is not possible with the built-in Tab component because active tab state is inaccessible directly from the UI. Alternatively, you can create a custom component/template/symbol to achieve this behavior. As a starting point, you may find the open source code for the Tabs component useful:

github.com

BuilderIO/builder/blob/main/packages/widgets/src/components/Tabs.tsx

import * as React from 'react';
import { BuilderBlocks } from '@builder.io/react';

// TODO: manual typings and documentation for this with typedoc and in builder guides pages
type ElementType = any;

export interface TabsProps {
  tabs: {
    label: ElementType[];
    content: ElementType[];
  }[];
  builderBlock: any;
  defaultActiveTab?: number;
  collapsible?: boolean;
  tabHeaderLayout?: string;
  activeTabStyle?: any;
}

export class TabsComponent extends React.Component<TabsProps, { activeTab: number }> {
  state = {

This file has been truncated. show original

Canuckaholic · March 28, 2022, 10:07pm

Ok thanks. Can I get this added to the feature requests?

ancheetah · March 28, 2022, 11:49pm

Sure! Feel free to submit feature requests anytime on our ideas board where the community can upvote them: https://ideas.builder.io/

Topic		Replies	Views
Where can I find the most recent source code for basic built-in components? Technical Questions	4	574	January 18, 2023
React custom component containing editable subcomponents Technical Questions react	5	4026	October 13, 2021
Svelte Tabs Custom Component with Children using Builder Blocks Technical Questions custom-components , svelte , tabs , child , blocks	0	123	May 10, 2024
Data binding for custom component Technical Questions visual-editor , react , nextjs	1	962	June 23, 2023
How to automatically open tabs widget based on URL? Technical Questions	1	328	February 3, 2022

How can I switch a tab from a button click?

Related topics