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

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

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

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