使用图像选项卡而不是文本标签创建 Material-UI 选项卡

Question

我正在尝试将 Material-ui 选项卡组件用于垂直选项卡。我遇到的问题是如何使用预定义图标以外的图像而不是文本标签？

我尝试使用 Avatar 组件，打破 Tab 像这样：

    <Tab label="Item Two" {...a11yProps(1)}>
      <Avatar alt="test avatar" src="/logo192.png" />
    </Tab>

当我把头像放在 TabPanel 中时它可以工作，所以我知道它是正确的并正确指向图像，但是当我把它放在 Tab 中时，如上所示，我没有图像，只有“项目二”标签。是否可以使用 ButtonBase 创建带有图像的选项卡？我找不到任何使用 ButtonBase 的示例。还是我现在需要提交功能请求并在别处寻找？

Answer 1

我不完全确定这是否是您所要求的，但您可以通过 Tab icon 属性传递您自己的图像以将它们用作图标。它们不一定是 Material-UI 图标。

<Tab icon={<Avatar alt="test avatar" src="/logo192.png" />} />

const {Tabs, Tab, Avatar} = MaterialUI;

function Demo() {
  const [selected, setSelected] = React.useState(0);

  return (
    <div style={{display: "flex"}}>
      <Tabs
        orientation="vertical"
        value={selected}
        onChange={(_, selected) => setSelected(selected)}
      >
        <Tab icon={<Avatar />} />
        <Tab label="second" />
      </Tabs>
      <div></div>
    </div>
  );
}

ReactDOM.render(<Demo />, document.querySelector("#root"));

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@4/umd/material-ui.production.min.js"></script>
<div id="root"></div>

Answer 2

Ciao，你有这个问题是因为Tab 不支持children。 Material UI docs 说：

不支持此道具（儿童）。如果需要，请使用组件道具 改变子结构。

所以你必须使用component props，例如这样：

<Tab
   label="Item One"
   {...a11yProps(0)}
   value={value}
   component={() => (
      <Button onClick={() => setValue(0)}> // this button to select the Tab (the first one in this case) when you click the Avatar 
         <Avatar src="<an image>" />   // Avatar here
      </Button>
   )}
/>

Here 一个代码框示例。