用 SVG 替换语义 UI 选项卡

Question

我将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} />;
  }
}

最后的结果：

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

Answer 1

您可以将 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 成为每个菜单项的背景图像。

请务必从'semantic-ui-react' 导入Menu。