Blueprint.js Tabs Example - Blueprint-js Typing CST Test

Blueprint.js Tabs Example — Blueprint-js Code

Shows tab navigation using Blueprint.js Tabs component.

import React, { useState } from 'react';
import { Tabs, Tab, H2 } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const TabsExample = () => {
	const [selectedTab, setSelectedTab] = useState('tab1');
	return (
		<div style={{ textAlign: 'center', marginTop: '50px' }}>
		<H2>Blueprint Tabs</H2>
		<Tabs id='TabsExample' selectedTabId={selectedTab} onChange={setSelectedTab} renderActiveTabPanelOnly>
		<Tab id='tab1' title='Tab 1' panel={<div>Content of Tab 1</div>} />
		<Tab id='tab2' title='Tab 2' panel={<div>Content of Tab 2</div>} />
		<Tab id='tab3' title='Tab 3' panel={<div>Content of Tab 3</div>} />
		</Tabs>
		</div>
	);
};

export default TabsExample;

Blueprint-js Language Guide

BlueprintJS is a React-based UI toolkit for building complex, data-dense, desktop-focused web applications. It emphasizes performance, usability, and a consistent design language for enterprise applications.

More Blueprint-js Typing Exercises

Practice Other Languages