ReactJS 语义 UI 转换门户插件

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

在本文中，我们将了解如何在 ReactJS 语义 UI 中使用 TransitionablePortal 插件。 TransitionablePortal 附加组件用于在页面上的任何位置呈现它。

财产：

• 受控：受控属性用于制作受控的TransitionablePortal。对于控件，它用于定义转换。
• bsPrefix：这个属性用来表示 CSS 中组件的变化。它用于自定义引导 CSS。默认值为微调器，类型为字符串。
• size：道具的大小，用来展示spinner的大小。 props 的大小用于组件大小的变化。尺寸的类型是 sm。
• color：颜色道具用于表示微调器的颜色。
• className： className 属性用于表示在 CSS 中为组件设置样式的类名。
• children：用于在 React JS 中将子元素传递给该组件。孩子的类型是一个元素。

句法：

Children 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：这是展示如何使用 TransitionablePortal 插件的基本示例。

  App.js

  import React, { Component } from 'react'
  import { Button, Grid, Header, Segment, 
      TransitionablePortal } 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 
    TransitionablePortalExampleTransitionablePortal 
    extends Component {
    state = {
        
      open: false,
    }
    
    Open = () => {
      this.setState({ open: true })
        
    }
    
    Close = () => {
      this.setState({ open: false })
        
    }
    
    
    render() {
      const {  open } = this.state
    
      return (
        
  
        
          
            
              }
              onOpen={this.Open}
              onClose={this.Close}
            >
              
                
  GeeksforGeeks
                
  Computer Science Portal
              
            
          
        
        
      )
    }
  }

  
  
  
  
  

  索引.css

  #gfg {
      margin: 40px;
  }
  

  输出：

  

  示例 2：在此示例中，我们在 TransitionablePortal 插件中将转换设置为 1000。

  应用程序.js

  import React, { Component } from 'react'
  import { Button, Grid, Header, Segment, 
      TransitionablePortal } 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 
    TransitionablePortalExampleTransitionablePortal 
    extends Component {
    state = {
        
      open: false,
    }
    
    Open = () => {
      this.setState({ open: true })
        
    }
    
    Close = () => {
      this.setState({ open: false })
        
    }
    
    render() {
      const {  open } = this.state
    
      return (
        
  
        
          
            
              }
              onOpen={this.Open}
              onClose={this.Close}
            >
              
                
  GeeksforGeeks
                
  Computer Science Portal
              
            
          
        
        
      )
    }
  }
  

  索引.css

  #gfg {
      margin: 40px;
  }
  

  输出：

  

  参考： https://react.semantic-ui.com/addons/transitionable-portal