@eisgs/tabs

Компонент Tabs

В параметре active задается ID активного таба. При изменении активного таба вызывается метод onChange с ID выбранного таба.

import { Tabs, Tab } from '@eisgs/tabs';

const options = [
  {
    id: 1,
    name: 'Tab 1', 
  },
  {
    id: 2,
    name: 'Tab 2',
  },
];

const [active, setActive] = React.useState(1);

const onChange = (tabId) => {
  setActive(tabId);
  // Any custom logic
};

<Tabs 
  active={active} 
  options={options} 
  onChange={setActive} 
  type="default"
>
  <div style={{padding: 16}}>
    <Tab id={1}>
      Опция 1
    </Tab>
    <Tab id={2}>
      Опция 2
    </Tab>
  </div>
</Tabs>;

Типы (ЕИСЖС)

Доступны два значения - default (значение по умолчанию) и fullWidth.

Для каждого таба можно указать disabled-состояние (параметр isDisabled) и наличие ошибки (параметр hasError, только для типа default).

import { Tabs, Tab } from '@eisgs/tabs';
import { Radio } from '@eisgs/radio';

const types = ['default', 'fullWidth'];

const [activeTab, setActiveTab] = React.useState('1');
const [type, setType] = React.useState(types[0]);

const divider = type === types[0] ? <br/> : null;
const radioOptions = types.map((type) => ({id: type, description: type, code: type}));
const tabOptions = [
  {
    id: '1',
    name: (
      <>
        Реквизиты
        {divider}
        контрагента
      </>
    ),
    hasError: true,
  },
  {
    id: '2',
    name: (
      <>
        Реализация
        {divider}
        полномочий
      </>
    ),
    isDisabled: true,
  },
  {
    id: '3',
    name: (
      <>
        Общий
        {divider}
        план-график
      </>
    ),
    hasError: true,
  },
  {
    id: '4',
    name: (
      <>
        Планировка
        {divider}
        территории
      </>
    ),
  },
  {
    id: '5',
    name: (
      <>
        Реализация
        {divider}
        земельных участков
      </>
    ),
  },
];

<>
  <Radio options={radioOptions} onChange={setType} value={type}/>
  <Tabs
    active={activeTab}
    options={tabOptions}
    onChange={setActiveTab}
    type={type}
  >
    <div style={{padding: 16}}>
      {tabOptions.map(({id}) => <Tab key={id} id={id}>{`Опция ${id}`}</Tab>)}
    </div>
  </Tabs>
</>

Типы (ИЖС)

Доступны два значения - default (значение по умолчанию) и switch.

Для каждого таба можно указать disabled-состояние (параметр isDisabled) и наличие ошибки (параметр hasError, только для типа default).

import { Tabs, Tab } from '@eisgs/tabs';
import { Radio } from '@eisgs/radio';

const types = ['default', 'switch'];
const tabs = ['Аккредитация', 'Реестр требований', 'Предоставление документов', 'Конкурсное производство'];

const [activeTab, setActiveTab] = React.useState(1);
const [type, setType] = React.useState(types[0]);

const divider = type === types[0] ? <br/> : null;
const radioOptions = types.map((type) => ({id: type, description: type, code: type}));
const tabOptions = tabs.map((tab, index) => ({id: index + 1, name: tab, hasError: index === 0, isDisabled: index === 0}));

<>
  <Radio options={radioOptions} onChange={setType} value={type}/>
  <Tabs
    active={activeTab}
    options={tabOptions}
    onChange={setActiveTab}
    type={type}
  >
    <div style={{padding: 16}}>
      {tabOptions.map(({id}) => <Tab key={id} id={id}>{`Опция ${id}`}</Tab>)}
    </div>
  </Tabs>
</>