IU semántica de ReactJS Confirmar complementos

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.

En este artículo, sabremos cómo usar Confirmar complementos en ReactJS Semantic UI Confirmar complementos se usa para confirmar o cancelar la acción realizada por los usuarios.

Propiedades:

• Devoluciones de llamada:

• Encabezado: Podemos definir un encabezado en confirmar.
• Contenido: Podemos definir el contenido en confirmar.
• Texto del botón: Podemos cambiar el texto del botón usando confirmar.
• Confirmar tamaño: podemos definir el tamaño usando confirmar

Sintaxis:

<Confirm header='header' content='content'/>

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

• Paso 3: instale la interfaz de usuario semántica en su directorio dado.

   npm install semantic-ui-react semantic-ui-css

Estructura del proyecto : Se verá como lo siguiente.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: en este ejemplo, mostramos la variación del encabezado y el contenido en complementos de confirmación mediante el uso de complementos de confirmación de IU semántica de ReactJS.

import React, {Component}from 'react'
import { Button, Confirm } 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);
  
<br/>
  
export default class gfg extends Component {
  state = { gfg1: false }
  
  gfg1 = () => this.setState({ gfg1: true })
  close = () => this.setState({ gfg1: false })
  
  render() {
    return (
      <div>
        <Button onClick={this.gfg1}>Show</Button>
        <Confirm
          open={this.state.gfg1}
          header='GeeksforGeeks'
          content='Semantic UI Confirm Addons'
          onCancel={this.close}
          onConfirm={this.close}
        />
      </div>
    )
  }
}

Producción: 

Ejemplo 2: en este ejemplo, mostramos la variación del texto del botón en un complemento de confirmación mediante el uso de complementos de confirmación de IU semántica de ReactJS.

import React, {Component}from 'react'
import { Button, Confirm } 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);
  
<br/>
  
export default class gfg extends Component {
  state = { gfg1: false }
  
  gfg1 = () => this.setState({ gfg1: true })
  close = () => this.setState({ gfg1: false })
  
  render() {
    return (
      <div>
        <Button onClick={this.gfg1}>Show</Button>
        <Confirm
          open={this.state.gfg1}
          cancelButton='GeeksforGeeks'
          confirmButton='Semantic UI Confirm Addons'
          onCancel={this.close}
          onConfirm={this.close}
          size='large'
        />
  
      </div>
    )
  }
}

Producción:

Referencia: https://react.semantic-ui.com/modules/transition