Componente divisor PrimeNG angular – Part 1

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente Divider en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

Componente Divisor: Se utiliza para hacer un componente que divide el contenido mediante un divisor.

Propiedades:

• align: Se utiliza para establecer la alineación del contenido. Es de tipo de datos de string y el valor predeterminado es nulo.
• Layout: Se utiliza para especificar la orientación. Es de tipo de datos de string y el valor predeterminado es horizontal.
• type: Es el tipo de estilo de borde. Es de tipo de datos de string y el valor predeterminado es sólido.
• estilo: Es el estilo en línea del componente. Es del tipo de datos de objeto y el valor predeterminado es nulo.
• styleClass: Es la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.

Estilo:

• p-divider : Es el elemento contenedor.
• p-divider-horizontal : Es el elemento contenedor en un diseño horizontal.
• p-divider-vertical : Es el elemento contenedor en un diseño vertical.
• p-divider-solid : Es el elemento contenedor con un borde sólido.
• p-divider-dasshed : Es el elemento contenedor con borde discontinuo.
• p-divider-dotted : Es el elemento contenedor con borde punteado.
• p-divider-left : Es el elemento contenedor con contenido alineado a la izquierda.
• p-divider-right : Es el elemento contenedor con contenido alineado a la derecha.
• p-divider-center : Es el elemento contenedor con contenido alineado al centro.
• p-divider-bottom : Es el elemento contenedor con el contenido alineado en la parte inferior.
• p-divider-top : Es el elemento contenedor con el contenido alineado en la parte superior.

Creación de aplicaciones angulares e instalación de módulos:

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

ng new appname

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

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

npm install primeng --save
npm install primeicons --save

Estructura del proyecto: se verá así:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Divider.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Divider Component</h5>
<div>
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
  
  <p-divider>
    <b>Divider</b>
  </p-divider>
  
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
  
  <p-divider>
    <b>Divider</b>
  </p-divider>
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
  
  <p-divider>
    <b>Divider</b>
  </p-divider>
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DividerModule } from "primeng/divider";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            DividerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de alineación en el componente divisor.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Divider Component</h5>
<div>
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
  
  <p-divider align="right" type="dashed">
    <b>Divider</b>
  </p-divider>
  
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
  
  <p-divider align="center" type="dashed">
    <b>Divider</b>
  </p-divider>
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
  
  <p-divider align="left" type="dashed">
    <b>Divider</b>
  </p-divider>
  <p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
  </p>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DividerModule } from "primeng/divider";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            DividerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Referencia:https://primefaces.org/primeng/showcase/#/divider