Блог

Я пытаюсь использовать компонент Material-ui tab для вертикальной вкладки. Проблема, с которой я сталкиваюсь, заключается в том, как использовать изображение, отличное от предопределенных значков, вместо текстовой метки?

Я попытался использовать компонент Avatar, разбив вкладку следующим образом:

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

Аватар работает, когда я помещаю его на панель вкладок, поэтому я знаю, что он правильный и правильно указывает на изображение, но когда я помещаю его на вкладку, как показано выше, я не получаю изображения, только ярлык «Пункт два». Возможно ли создать вкладку с изображением, используя ButtonBase? Я не смог найти ни одного примера использования ButtonBase. Или мне нужно отправить запрос на функцию и пока поискать в другом месте?

Я не совсем уверен, что это то, о чем вы просите, но вы можете передавать свои собственные изображения через 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,700amp;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>  

Чао, у вас есть эта проблема, потому что Tab не поддерживает children . Вдокументах Material UI говорится:

Этот реквизит (дочерние элементы) не поддерживается. Используйте компонент prop, если вам нужно изменить структуру дочерних элементов.

Поэтому вам нужно использовать 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>
   )}
/>
  

Вот пример codesandbox.