Question

是否有可能将活动标签放置在屏幕的水平中心，除非选择了第一个或最后一个标签？

        <Tabs 
          className={classes.tabs}
          indicatorColor='primary'
          scrollButtons='auto'
          textColor='primary'
          value={activeTab}
          variant='scrollable'
        >
          {tabs.map(({ label, url, icon = '', id, action } => (
            <Tab
              key={id}
              label={label}
              icon={icon}
              onClick={onClick}
            />
          ))}
        </Tabs>

activeTab 根据当前路径计算。

onClick 只是通过点击的标签 ID 推送路径更改

Active tab not in center screenshot

Active tab in center screenshot

是否可以在选项卡单击后自动生成第二个示例情况？

Answer 1

是的，这是可能的。您只需要创建一个运行 onClick 的 onclick 事件（或者，在 vanilla Javascript 中为 function 事件）。它正在运行的 function 应该隐藏要隐藏的选项卡并显示要显示的选项卡，只要索引不是 0 并且不是长度 - 1。

想必您已经有了一个事件处理程序，因为您的问题表明选项卡激活有效。您只需实现我上面描述的 function 并在事件中触发它。

材质 UI 活动选项卡居中对齐

1 个答案: