Question

是否可以“相反”显示垂直子菜单的弹出窗口？我在页面底部的固定侧栏中有一个SubMenu项。它包含用户配置文件的链接和注销链接。但是，由于它位于页面底部，因此子菜单将打开，并且部分菜单位于页面外部。

这是当前情况的屏幕截图。

我在文档中搜索了选项，但找不到适合该问题的解决方案。因此，基本上，我要实现的是弹出式窗口从底部到顶部而不是从顶部到底部的增长。

此处是补充工具栏组件的源。这是一个相当早期的阶段，因此尚需对代码进行其他改进。

import React from 'react';
import { connect } from 'react-redux';
import { Layout, Menu, Icon } from 'antd';

import { withRouter } from 'react-router-dom';

import styled from 'styled-components';

import { toggleSidebar } from '../../actions/ui';
import { logoutUser } from '../../actions/user';

const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

const Logo = styled.div`
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
`;

const UserMenu = styled(SubMenu)`
  position: fixed;
  text-align: center;
  bottom: 0;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  color: #fff;
  background: #002140;
  z-index: 1;
  transition: all 0.2s;
`;

const mapStateToProps = state => ({
  ui: state.ui
});

const mapDispatchToProps = dispatch => {
  return {
    toggleSidebar: () => dispatch(toggleSidebar()),
    logoutUser: () => dispatch(logoutUser())
  };
};

class Sidebar extends React.Component {
  componentDidMount() {}

  render() {
    const { ui, logoutUser } = this.props;
    return (
      <Sider
        collapsed={ui.sidebarCollapsed}
        //onCollapse={toggleSidebar} // toggle is disabled
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0
        }}
      >
        <Logo />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          <UserMenu
            key="sub1"
            placement="topLeft"
            title={
              <span>
                <Icon type="user" />
                <span>User</span>
              </span>
            }
          >
            <Menu.Item onClick={logoutUser} key="3">
              Logout
            </Menu.Item>
            <Menu.Item key="4">Profile</Menu.Item>
          </UserMenu>
        </Menu>
      </Sider>
    );
  }
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Sidebar)
);

有没有办法实现这一目标？

Answer 1

是的，应该有可能。 <Menu>使用rc-menu程序包，并支持该程序包中的所有属性，即使这些属性未在and.design文档页面中记录。

菜单位置由builtinPlacements属性指导，该属性依次使用https://github.com/yiminghe/dom-align，这为您在元素定位方面提供了很大的灵活性。

蚂蚁设计：垂直子菜单从下到上弹出

1 个答案: