React suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.
En este artículo, aprenderemos sobre el párrafo de marcador de posición de la suite React. El componente de marcador de posición se utiliza para mostrar el estado inicial antes de que se cargue el componente. Los marcadores de posición también se pueden agregar en forma de párrafos junto con diferentes formas como círculos, cuadrados, etc.
Sintaxis:
function App() { const { Paragraph } = Placeholder; return ( <Paragraph rows={5} /> ); }
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el comando dado:
npm create-react-app projectname
Paso 2: después de crear su proyecto, muévase a él usando el comando dado:
cd projectname
Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:
npm install rsuite
Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:
Ejemplo 1: El siguiente ejemplo demuestra la implementación básica del párrafo de marcador de posición.
Javascript
import { Placeholder } from "rsuite"; import "rsuite/dist/rsuite.min.css"; export default function App() { const { Paragraph } = Placeholder; return ( <center> <div> <h2>GeeksforGeeks</h2> <h4 style={{ color: "green" }}> React Suite Placeholder Paragraph </h4> <div style={{ marginTop: 20, width: 800 }}> <Paragraph style={{ marginTop: 30 }} rows={4} /> </div> </div> </center> ); }
Producción:
Ejemplo 2: El siguiente ejemplo muestra el párrafo de marcador de posición con diferentes formas.
Javascript
import { Placeholder } from "rsuite"; import "rsuite/dist/rsuite.min.css"; export default function App() { const { Paragraph } = Placeholder; return ( <center> <div> <h2>GeeksforGeeks</h2> <h4 style={{ color: "green" }}> React Suite Placeholder Paragraph </h4> <div style={{ marginTop: 20, width: 800 }}> <Paragraph style={{ marginTop: 20 }} graph="square" rows={3} /> <Paragraph style={{ marginTop: 20 }} graph="circle" rows={3} /> <Paragraph style={{ marginTop: 20 }} graph="image" rows={3} /> </div> </div> </center> ); }
Producción:
Referencia: https://rsuitejs.com/components/placeholder/#paragraph
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA