如何使用下拉菜单制作语义 Ui React 侧边栏

Question

我正在尝试实现`语义化Ui React Sidebar With Dropdown

我想要这样：

我知道有很多要求，但我希望你能帮助我...我正在尝试在我的菜单上添加一个下拉菜单

这是我当前的侧边栏代码：

import React from 'react';
import cn from 'classnames';
import { Icon, Menu } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

export default function Sidebar(props) {
  const classes = cn(
    'ui',
    'sidebar',
    'push',
    'left',
    'inverted',
    'menu',
    'vertical',
    'animating',
    { visible: props.toggleMenu }
  );

  return (
    <div className={classes}>
      <Menu.Item as={Link} to="/admin">
        Dashboard <Icon name="home" />
      </Menu.Item>
      <Menu.Item as={Link} to="/admin/orders">
        Orders
      </Menu.Item>
    </div>
  );
}

看起来像这样：

顺便说一句，这是我获取边栏代码的地方...https://react.semantic-ui.com/modules/sidebar/

帮助新手？在此先感谢！！！

Answer 1

将图标向左浮动即可

    <Icon name='home' style={{float : "left"}}/>

或

你可以使用css

*** 请检查 class 姓名 ***


    i {
      float: left;
      margin-right: 12px !important;
    }
    the menu item itself just becomes an a element
    
    a {
      text-align: center;
      line-height: 40px;
    }

Answer 2

选中 this codesandbox，它实现了基本 expand/collapse 功能但没有图标。您可以使逻辑适应您的代码。

主要思想是将 expanded/collapsed 菜单存储在您所在的州

const [expandState, setExpandState] = useState({});

并根据其状态显示隐藏子菜单项。

  <Menu.Item as={Link} to="/admin">
    <i className="fa fa-home" />
    Dashboard
    <span
      style={{ float: "right" }}
      onClick={() =>
        setExpandState({
          ...expandState,
          dashboard: !expandState.dashboard
        })
      }
    >
      Expand/Collapse
    </span>
    {expandState.dashboard ? (
      <Menu.Item as={Link} to="/admin/orders">
        Orders2
      </Menu.Item>
    ) : null}
  </Menu.Item>

如何使用下拉菜单制作语义 Ui React 侧边栏

How to make a Semantic Ui React Sidebar With Dropdown

reactjs

menu

semantic-ui

sidebar