我试图复制一个折叠的 Sider
而没有声明 collapsed={true}
纯粹是为了获得工具提示效果。
问题是,当我将 Menu.Item
包裹在 Tooltip
中时,它似乎不再被定义并且特殊触发器没有出现
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Layout, Menu, Icon, Tooltip } from "antd";
import { sidebar } from "./nav";
const { Header, Sider, Content } = Layout;
class SiderDemo extends React.Component {
state = {
collapsed: false
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed
});
};
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsedWidth="0" breakpoint="sm">
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
{sidebar.map(menu => (
<Tooltip placement="right" title={menu.name}>
<Menu.Item
style={{ borderRadius: 2, width: "72px" }}
item={menu.name}
key={menu.key}
>
<Icon type={menu.icon} />
</Menu.Item>
</Tooltip>
))}
</Menu>
</Sider>
<Layout>
<Header style={{ background: "#fff", padding: 0 }}>
<Icon
className="trigger"
type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
onClick={this.toggle}
/>
</Header>
<Content
style={{
margin: "24px 16px",
padding: 24,
background: "#fff",
minHeight: 280
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
}
ReactDOM.render(<SiderDemo />, document.getElementById("container"));
最佳答案
将您的工具提示
移到里面并包裹Menu.Item
的Icon
。我发现这是最快的方法。
{sidebar.map(menu => (
<Menu.Item
style={{ borderRadius: 2, width: "72px" }}
item={menu.name}
key={menu.key}
>
<Tooltip
placement="right"
title={menu.name}
className="tooltip"
>
<div className="my-icon-wrapper test">
<Icon type={menu.icon} />
</div>
</Tooltip>
</Menu.Item>
))}
CSS
.my-icon-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.test {
border: 1px solid red;
}
关于css - Antd 在非折叠的 Sider 上将工具提示应用于 Menu.Item,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59085357/