gpt4 book ai didi

html - 语义 ui react ,是否可以在两个部分上拆分选项卡?

转载 作者:行者123 更新时间:2023-11-28 19:31:02 27 4
gpt4 key购买 nike

是否可以像下图那样拆分选项卡,或者我需要使用 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"
/>

最佳答案

虽然有点乱,但确实有效。诀窍是使用 custom menu tab并使用 flexbox 技巧将最后一项右对齐(受 this post 启发)。

像这样:

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

Working example

关于html - 语义 ui react ,是否可以在两个部分上拆分选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55030662/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com