用 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} />;
  }
}

最终结果：

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

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。

用 SVG 替换语义 UI 的标签

Replace Semantic UI's Tab with an SVG

html

css

svg

reactjs

semantic-ui