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);