Tabs

Tabs

<div id="tabs"></div>

import {render} from 'react-dom';
import React, {Component} from 'react';

import {Tabs, Tab} from '@jetbrains/ring-ui/components/tabs/tabs';

const container = document.getElementById('tabs');

class TabsExample extends Component {
  state = {selected: 'first'};

  render() {
    return (
      <Tabs
        selected={this.state.selected}
        onSelect={selected => this.setState({selected})}
      >
        <Tab
          id="first"
          title="First tab"
        >
          First tab content
        </Tab>
        <Tab
          id="second"
          title="Second tab"
        >
          Second tab content
        </Tab>
        <Tab
          id="third"
          title="Third tab"
        >
          Third tab content
        </Tab>
        <Tab
          id="fourth"
          title="Fourth tab (Link)"
          href="#href"
        >
          Fourth tab content
        </Tab>
        <Tab
          disabled
          id="disabled"
          title="Disabled tab"
        >
          Disabled tab content
        </Tab>
      </Tabs>
    );
  }
}

render(<TabsExample />, container);

Dark Tabs

<div id="dark" class="dark-wrapper"></div>

:global(.dark-wrapper) {
  background: #000;
  padding: 8px;
}

import {render} from 'react-dom';
import React, {Component} from 'react';

import {Tabs, Tab} from '@jetbrains/ring-ui/components/tabs/tabs';

const container = document.getElementById('dark');

class TabsExample extends Component {
state = {selected: 'first'};

render() {
  return (
    <Tabs
      selected={this.state.selected}
      onSelect={selected => this.setState({selected})}
      theme={Tabs.Theme.DARK}
    >
      <Tab
        id="first"
        title="First tab"
      >
        First tab content
      </Tab>
      <Tab
        id="second"
        title="Second tab"
      >
        Second tab content
      </Tab>
      <Tab
        id="third"
        title="Third tab"
      >
        Third tab content
      </Tab>
      <Tab
        id="fourth"
        title="Fourth tab (Link)"
        href="#href"
      >
        Fourth tab content
      </Tab>
      <Tab
        disabled
        id="disabled"
        title="Disabled tab"
      >
        Disabled tab content
      </Tab>
    </Tabs>
  );
  }
}

render(<TabsExample />, container);

Smart tabs

<div id="tabs"></div>

import {render} from 'react-dom';
import React, {Component} from 'react';

import {SmartTabs, Tab} from '@jetbrains/ring-ui/components/tabs/tabs';

const container = document.getElementById('tabs');

const tabs = (
  <SmartTabs>
    <Tab title="First tab">
      First tab content
    </Tab>
    <Tab title="Second tab">
      Second tab content
    </Tab>
    <Tab title="Third tab">
      Third tab content
    </Tab>
    <Tab title="Fourth  tab (Link)" href="#href">
      Fourth tab content
    </Tab>
    <Tab
      disabled
      title="Disabled tab"
    >
      Disabled tab content
    </Tab>
  </SmartTabs>
);

render(tabs, container);

Custom titles

<div id="tabs"></div>

:global(.icon.icon) {
  vertical-align: 3px;
  line-height: normal;
  margin-right: 4px;
}

import {render} from 'react-dom';
import React, {Component} from 'react';

import {SmartTabs, Tab, CustomItem} from '@jetbrains/ring-ui/components/tabs/tabs';
import {SearchIcon, WarningIcon} from '@jetbrains/ring-ui/components/icon';
import Button from '@jetbrains/ring-ui/components/button/button';

const container = document.getElementById('tabs');

function Title({Icon, children}) {
  return (
    <span>
      <Icon
        className="icon"
        size={Icon.Size.Size16}
      />
      {children}
    </span>
  );
}

const tabs = (
  <SmartTabs>
    <Tab title={<Title Icon={SearchIcon}>First tab</Title>}>
      First tab content
    </Tab>
    <Tab title={<Title Icon={WarningIcon}>Second tab</Title>}>
      Second tab content
    </Tab>
    <Tab title={<Title Icon={WarningIcon}>Third tab (Link)</Title>} href="#href">
      Third tab content
    </Tab>
    <CustomItem>
      <Button text>Action</Button>
    </CustomItem>
  </SmartTabs>
);

render(tabs, container);

Custom titles (function)

<div id="tabs"></div>

:global(.icon.icon) {
  vertical-align: 3px;
  line-height: normal;
  @nest :global(.has-content) & {
    margin-right: 4px;
  }
}

import {render} from 'react-dom';
import React, {Component} from 'react';

import {SmartTabs, Tab} from '@jetbrains/ring-ui/components/tabs/tabs';
import {SearchIcon, WarningIcon} from '@jetbrains/ring-ui/components/icon';

const container = document.getElementById('tabs');

function Title({Icon, children}) {
  return (
    <span className={children ? 'has-content' : ''}>
      <Icon
        className="icon"
        size={Icon.Size.Size16}
      />
      {children}
    </span>
  );
}

const tabs = (
  <SmartTabs>
    <Tab title={isSelected => <Title Icon={SearchIcon}>{isSelected && "First tab"}</Title>}>
      First tab content
    </Tab>
    <Tab title={isSelected => <Title Icon={WarningIcon}>{isSelected && "Second tab (Link)"}</Title>} href="#href">
      Second tab content
    </Tab>
  </SmartTabs>
);

render(tabs, container);