Skip to content

README.md

Latest commit

 

History

History
120 lines (97 loc) · 4.3 KB

README.md

File metadata and controls

120 lines (97 loc) · 4.3 KB
Raw

Tabs

Tabs component for switching between sections with optional delete functionality. Built on top of Gravity UI's Label component.

Features

  • Tab Selection: Click to switch between tabs with active state indication
  • Icon Support: Display icons alongside tab titles
  • Delete Functionality: Optional delete button with async callback
  • Horizontal Scroll: Automatically scrolls when tabs overflow with hover-visible scrollbar
  • Theming: Uses Gravity UI's Label component themes (info for active, clear for inactive)
  • Responsive: Shrinks tabs as needed, maintains readability

Usage

import {Tabs} from '@/components/molecules/Tabs';
import {Icon} from '@gravity-ui/uikit';
import {ChatIcon} from '@gravity-ui/icons';

// Basic tabs
<Tabs
  items={[
    {id: '1', title: 'Chat name 1'},
    {id: '2', title: 'Chat name 2'},
    {id: '3', title: 'Chat name 3'},
  ]}
  activeId="1"
  onSelectItem={(id) => console.log('Selected:', id)}
/>

// Tabs with icons
<Tabs
  items={[
    {id: '1', title: 'Chat name 1', icon: <Icon data={ChatIcon} size={16} />},
    {id: '2', title: 'Chat name 2', icon: <Icon data={ChatIcon} size={16} />},
  ]}
  activeId="1"
  onSelectItem={(id) => console.log('Selected:', id)}
/>

// Tabs with delete functionality
<Tabs
  items={[
    {id: '1', title: 'Chat name 1'},
    {id: '2', title: 'Chat name 2'},
  ]}
  activeId="1"
  onSelectItem={(id) => console.log('Selected:', id)}
  onDeleteItem={async (id) => {
    await deleteTab(id);
  }}
  allowDelete={true}
/>

// Tabs with custom styling
<Tabs
  items={basicItems}
  activeId="1"
  allowDelete={true}
  style={{
    '--g-color-base-info-light': '#ff9100',
    '--g-color-base-info-light-hover': '#aa9100',
    '--g-color-text-info-heavy': '#ffffff',
  }}
/>

Props

Prop Type Required Default Description
items Array<{id: string; title: string; icon?: React.ReactNode;}> ✓ - Array of tab items to display
activeId string - - ID of the currently active tab
onSelectItem (id: string) => void - - Callback when a tab is clicked
onDeleteItem (id: string) => Promise<void> - - Async callback when delete button clicked
allowDelete boolean - false Whether to show delete buttons on tabs
className string - - Additional CSS class
style React.CSSProperties - - Inline styles (can include CSS variables)
qa string - - QA attribute for testing

Styling

The component uses CSS variables for theming. Since it's built on Gravity UI's Label component, you can customize the active tab appearance using Label theme variables:

Spacing

--g-spacing-1 /* Vertical padding */
--g-spacing-2 /* Gap between tabs */

Active Tab (theme="info")

--g-color-base-info-light /* Active tab background */
--g-color-base-info-light-hover /* Active tab background on hover */
--g-color-text-info-heavy /* Active tab text color */
--g-color-base-simple-hover /* Close button hover background */

Inactive Tab (theme="clear")

--g-color-text-complementary /* Inactive tab text color */
--g-color-line-generic /* Inactive tab border */

Scrollbar

--g-color-base-generic-medium /* Scrollbar color (visible on hover) */

Behavior

  • Scrollbar: Hidden by default, appears on hover for better UX
  • Overflow: Tabs scroll horizontally when they don't fit in the container
  • Tab Width: Tabs shrink to fit content but don't wrap text
  • Delete Action: Async, allowing for server-side operations before removal