用SVG替换语义UI的选项卡

问题描述

我正在为某些表使用Tab from Semantic UI。

问题在于它的设计应该看起来有所不同，为此我准备了一个SVG：https://svgur.com/s/Nnu

这是代码：

const clientsTab = (
  <ContentContainer>
    <div className="clients-table">
      <div className="clients-table-utils">
        <SearchBox
          placeholder="Search client"
          onChange={this.searchHandler}
        />
        <Dropdown
          className="hello-dropdown"
          placeholder="Company"
        />
        <Dropdown
          className="hello-dropdown"
          placeholder="Turnover"
        />
        <Dropdown
          className="hello-dropdown"
          placeholder="Status"
        />
      </div>
      <GenericTable
        headers={headers}
        rows={rows}
        entityName="clients"
        idList={idList}
      />
    </div>
  </ContentContainer>
);

const panes = [
  {
    menuItem: 'Clients',render: () => <Tab.Pane>{clientsTab}</Tab.Pane>,},];

return (
  <Layout>
      <TabContainer panes={panes} />
  </Layout>
);

TabContainer是一个简单的组件，看起来像这样：

import React from 'react';
import { Tab } from 'semantic-ui-react';
import './TabContainer.scss';

export default class TabContainer extends React.PureComponent {
  render() {
    const { panes } = this.props;
    return <Tab panes={panes} />;
  }
}

最后的结果：

我不知道是否可以用SVG替换Tab。有办法吗？

解决方法

您可以将svg作为图像包装在Menu.Item组件中，如下所示：

const panes = [
  {
    menuItem: (
      <Menu.Item
        key="Tab 1"
        style={{
          display: 'block',background:
            'url(https://svgshare.com/i/Nnu.svg) left center no-repeat',backgroundSize: 'cover',textAlign: 'center',minWidth: 300,borderColor: 'transparent',}}>
        <p>Tab One</p>
      </Menu.Item>
    ),render: () => // The content you want to render...,}
];

因此，这种方法使svg成为每个菜单项的背景图像。

请确保从Menu导入'semantic-ui-react'。