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 el módulo de calificación en la interfaz de usuario semántica de ReactJS. El módulo de calificación se utiliza para mostrar la calificación otorgada por el usuario.
Propiedades:
- Estrella: podemos usar el ícono de estrella para calificar
- Corazón: podemos usar el ícono del corazón para calificar
- Borrable: Podemos borrar la calificación haciendo clic en ella
- Deshabilitado: esta propiedad se utiliza para deshabilitar
- Controlado: Podemos hacer rating como un componente controlado.
- onRate Callback: es una función de devolución de llamada que se activa para cambios de calificación.
Sintaxis:
<rating />
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: este es el ejemplo básico que muestra cómo usar el módulo de calificación usando el módulo de calificación de IU semántica de ReactJS.
App.js
import React from 'react'
import { Rating } 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);
const btt = () =>
<div>
<br/>
<Rating icon='star' defaultRating={5}
maxRating={8} size='huge' clearable/>
</div>
export default btt
Producción:
Ejemplo 2: En este ejemplo, mostramos la propiedad disabled en un módulo de calificación mediante el módulo de calificación de IU semántica de ReactJS.
App.js
import React from 'react'
import { Rating } 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);
const btt = () =>
<div>
<br/>
<Rating icon='star' defaultRating={5}
maxRating={8} size='huge' disabled/>
</div>
export default btt
Producción:
Referencia: https://react.semantic-ui.com/modules/rating