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 (
this.setState({selected})}
>
First tab content
Second tab content
Third tab content
Fourth tab content
Disabled tab content
);
}
}
render(, container);
: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 (
this.setState({selected})}
theme={Tabs.Theme.DARK}
>
First tab content
Second tab content
Third tab content
Fourth tab content
Disabled tab content
);
}
}
render(, container);
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 = (
First tab content
Second tab content
Third tab content
Fourth tab content
Disabled tab content
);
render(tabs, container);
: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 (
{children}
);
}
const tabs = (
First tab}>
First tab content
Second tab}>
Second tab content
Third tab (Link)} href="#href">
Third tab content
);
render(tabs, container);
: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 (
{children}
);
}
const tabs = (
{isSelected && "First tab"}}>
First tab content
{isSelected && "Second tab (Link)"}} href="#href">
Second tab content
);
render(tabs, container);