Question

如果<Tabs内有display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;，那么将标签放在父母底部的最佳做法是什么，就像在标题的底部一样？

目前我的标题分为3个部分：top-bar-left，top-bar-tabs，top-bar-right。我将以下样式应用于选项卡的父级

image:
  name: my-imge:and-version
pipelines:
  default:
    - step:
        name: first
        script:
          - echo 'something' >> my_file.txt
     - step:
        name: second
        script:
          - cat my_file.txt

这有效，但不确定材料-ui的最佳实践是什么

Answer 1

您是否考虑通过将AppBar的内容移动到工具栏并将Tabs作为AppBar的第二个孩子来处理此问题？

        <AppBar position="fixed">
          <Toolbar>
            <Typography variant="title" color="inherit">
              App Title, implement flexbox here
            </Typography>
          </Toolbar>
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" href="#basic-tabs" />
          </Tabs>
        </AppBar>

使用此设置，您可以根据需要划分上方工具栏，并且Tabs将始终位于其下方。

有关工作示例，请参阅此codesandbox。

如何将Material UI选项卡移动到像AppBar这样的父级底部？

1 个答案: