使用图像选项卡而不是文本标签创建Material-UI选项卡 [英] Creating a Material-UI tab with image tabs instead of text labels

问题描述

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

I'm trying to use the Material-ui tab component for a vertical tab. The problem I am having is how to use an image other than the pre-defined icons rather than a text label?

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

I tried using an Avatar component, breaking Tab like this:

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

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

The Avatar works when I put it in the TabPanel so I know it is right and points to the image correctly, but when I put it in the Tab, as shown above, I get no image, just the "Item Two" label. Is it possible to create a tab with an image using the ButtonBase? I couldn't find any sample of using the ButtonBase. Or do I need to submit a feature request and look elsewhere for now?

推荐答案

我不确定这是否是您要的内容，但是您可以通过 Tab icon 属性以将它们用作图标.它们不必是Material-UI图标.

I'm not entirely sure if this is what you are asking, but you can pass your own images through the Tab icon property to use them as an icon. They don't have to be Material-UI icons.

<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选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！