sematic ui реагирует, возможно ли разделить вкладки на две части? - PullRequest
Новая
       6

sematic ui реагирует, возможно ли разделить вкладки на две части?

1 голос
/ 06 марта 2019

Можно ли разделить вкладки, как на рисунке ниже, или мне нужно использовать компонент Menu вместо?

Я действительно понятия не имею, как это сделать.

enter image description here

const panes = [
    {
        menuItem: "Информация",
        render: () => <Tab.Pane attached={false}>Информация</Tab.Pane>,
    },
    {
        menuItem: "Добавить кандидатов",
        render: () => (<Tab.Pane attached={false}><AddCandidates /></Tab.Pane>),
    },
    {
        menuItem: "Календарь собеседований",
        render: () => (<Tab.Pane attached={false} className="custom-tab">
        <Calendar /></Tab.Pane>),
    },
]

<Tab
  menu={{ secondary: true, pointing: true }}
  panes={panes}
  menuPosition="right"
/>

1 Ответ

0 голосов
/ 06 марта 2019

Это вроде хак, но работает.Хитрость заключается в том, чтобы использовать вкладку пользовательского меню и использовать flexbox уловку, чтобы выровнять последний элемент вправо (Вдохновленный этим постом ).

Как это: 

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
  { menuItem: <Menu.Item key='messages' className="to-right">Tab 4</Menu.Item>, render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
  { menuItem: 'Tab 5', render: () => <Tab.Pane>Tab 5 Content</Tab.Pane> },
]

.to-right {
  margin-left: auto;
}

Рабочий пример

...