ReactJS 语义 UI 菜单集合

Semantic UI 是一个现代框架，用于为网站开发无缝设计，它为用户提供了轻量级的组件体验。它使用预定义的 CSS、JQuery 语言来合并到不同的框架中。

在本文中，我们将了解如何在 ReactJS 语义 UI 中使用菜单集合。 Menu Collections 用于制作包含一些信息的菜单。

特性：

二级菜单：我们可以使用此属性调整菜单外观以淡化内容。
Pointing：我们可以通过设置这个属性来创建一个指向其附近内容的指向菜单。
表格：我们可以使用此属性以表格形式制作菜单。
文本：我们可以使用这个属性为文本内容制作菜单。
垂直菜单：用于创建垂直菜单。
分页：用于制作分页菜单。

状态：

悬停：我们可以使用这种状态制作一个可以悬停的菜单。
活动：我们可以使用活动状态来制作活动菜单。
禁用：可以使用此状态禁用菜单。

句法：


  
    Content

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。
```
cd foldername
```
第 3 步：在给定目录中安装语义 UI。
```
npm install semantic-ui-react semantic-ui-css
```

项目结构：它将如下所示。

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

示例 1：这是一个基本示例，展示了如何使用 ReactJS 语义 UI 菜单集合来使用菜单集合。

App.js

import React,{Component} from 'react'
import { Menu } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
export default class MenuExampleBasic extends Component {
  state = {}
  
  btt = ({ name }) => this.setState({ activeItem: name })
  
  render() {
    const { gfg1 } = this.state
  
    return (
      
        
          GeeksforGeeks
        
        
          ReactJS
        
        
          SemanticUI
        
      
    )
  }
}

App.js

import React,{Component} from 'react'
import { Menu } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
export default class MenuExampleBasic extends Component {
  state = {}
  
  btt = ({ name }) => this.setState({ activeItem: name })
  
  render() {
    const { gfg1 } = this.state
  
    return (
      
        
          GeeksforGeeks
        
        
          ReactJS
        
        
          SemanticUI
        
      
    )
  }
}

输出：

示例 2：在此示例中，我们使用 ReactJS 语义 UI 菜单集合在菜单集合中显示禁用状态。

应用程序.js

import React,{Component} from 'react'
import { Menu } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
export default class MenuExampleBasic extends Component {
  state = {}
  
  btt = ({ name }) => this.setState({ activeItem: name })
  
  render() {
    const { gfg1 } = this.state
  
    return (
      
        
          GeeksforGeeks
        
        
          ReactJS
        
        
          SemanticUI
        
      
    )
  }
}

输出：

参考： https://react.semantic-ui.com/collections/menu