如何解决用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'
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。