TabLink

The TabLink component acts as a clickable trigger that changes the active tab. By providing a location prop that corresponds to a Tab’s location, clicking a TabLink updates the tab state in the Tabs context, thereby switching the displayed content. The TabLink component shouldn’t be used outside of the Tabs component.

Installation

Every component ships with the boilerplate. If you are working in your own project, add TabLink with the Gameface CLI:

npx gameface-cli add TabLink

The CLI pulls in whatever TabLink depends on. To refresh an existing copy, update it instead.

Usage

To use the tab system, wrap your tab links and tab content with the Tabs component. Assign a unique location string to each Tab and its corresponding TabLink. Optionally, set a default tab using the default prop.

import Tabs from '@components/Layout/Tabs/Tabs'
import Tabs from '@components/Layout/Tab/Tab'
import TabLink from '@components/Layout/TabLink/TabLink'
import Block from '@components/Layout/Block/Block';
import Flex from '@components/Layout/Flex/Flex';
import styles from './App.module.css';

const App = () => {
    return (
        <Tabs default='Local'>
            <Flex >
                <TabLink class={styles.link} location='Local'>Local</TabLink>
                <TabLink class={styles.link} location='Online'>Online</TabLink>
            </Flex>
            <Tab location='Local'>
                <Block>Local Multiplayer</Block>
            </Tab>
            <Tab location='Online'>
                <Block>Online Multiplayer</Block>
            </Tab>
        </Tabs>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	HTMLDivElement	undefined	A reference to the component that gives you access to the underlying HTML element.
location	string	undefined	The target tab’s identifier. This value must match the location prop of a corresponding Tab component. When clicked, the TabLink updates the active tab state in the Tabs component, making the associated Tab visible.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Allows you to add custom navigation action handlers to the component. See the Navigation component documentation for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, this component’s actions will execute. Can be a CSS selector or HTMLElement.