繁体   English   中英

Material UI active Tab 居中对齐

[英]Material UI active Tab center align

除了选择第一个或最后一个选项卡的情况外,是否有可能将活动选项卡放在屏幕的水平中心?

        <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 的路径更改

活动标签不在中心屏幕截图

中心屏幕截图中的活动选项卡

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

是的,这是可能的。 您只需要创建一个运行functiononClick事件(或者,在普通的 Javascript 中,一个onclick事件)。 它正在运行的function应该隐藏要隐藏的选项卡并显示要显示的选项卡,只要索引不是 0 且长度不是 - 1。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM