Question

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

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

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

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

Answer 1

Ciao，您遇到了这个问题，因为Tab不支持children。 Material UI docs说：

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

例如，您必须使用component道具，例如：

<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一个代码框示例。

Answer 2

我不确定这是否是您要的内容，但是您可以通过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>

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

2 个答案: