极客教程Angular PrimeNG侧边栏组件
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用侧边栏组件。我们还将学习属性、事件和造型，以及在代码中使用的语法。
Sidebar组件：它用于制作一个在屏幕边缘重叠的元素。
属性:
- visible:它指定了对话框的可见性。它是布尔数据类型，默认值为false。
- position。它指定了侧边栏的位置，有效值是 “左”、”右”、”下 “和 “上”。它是字符串数据类型，默认值是左。
- fullScreen。它用于在标题上添加一个关闭图标以隐藏对话框。它的数据类型为布尔型，默认值为false。
- appendTo。它是附加对话框的目标元素，有效值是 “body “或另一个元素的本地ng-template变量。它接受任何类型的数据，默认值为空。
- style。它用于设置组件的内联风格。它的数据类型为字符串，默认值为空。
- styleClass。它用于设置组件的风格类别。它的数据类型为字符串，默认值为空。
- blockScroll。它用于指定当侧边栏处于活动状态时是否阻止文档的滚动。它的数据类型为布尔型，默认值为false。
- baseZIndex。它用于设置分层时使用的基础ZIndex值。它是数字数据类型，默认值是0。
- autoZIndex。它用于指定是否自动管理分层。它是布尔数据类型，默认值为真。
- modal: 它用于指定是否在侧边栏后面显示一个叠加掩码。它是布尔数据类型，默认值为真。
- dismissible:它用于指定是否在点击掩码时取消侧边栏。它是布尔数据类型，默认值为真。
- showCloseIcon：它用于指定是否显示关闭图标。它是布尔数据类型的，默认值是true。
- transitionOptions。用来设置动画的过渡选项。它是字符串数据类型，默认值是150ms cubic-bezier（0, 0, 0.2, 1）。
- ariaCloseLabel。它被用来设置关闭图标的阿里亚-标签。它是字符串数据类型，默认值是关闭。
- closeOnEscape: 它用于指定按转义键是否应该隐藏侧边栏。它是布尔数据类型，默认值为真。
事件:
- onShow。它是一个回调，当一个对话框被显示时被触发。
- onHide。它是一个回调，当一个对话框被隐藏时被触发。
样式:
- p-sidebar：它是容器元素。
- p-sidebar-left。它是左侧边栏的容器元素。
- p-sidebar-right：它是右侧边栏的容器元素。
- p-sidebar-top: 它是顶部侧边栏的容器元素。
- p-sidebar-bottom。它是底部侧边栏的容器元素。
- p-sidebar-full。它是一个全屏侧边栏的容器元素。
- p-sidebar-active。它是侧边栏可见时的容器元素。
- p-sidebar-close : 它是关闭锚元素。
- p-sidebar-sm : 它是一个小尺寸的侧边栏。
- p-sidebar-md : 它是中等大小的侧边栏。
- p-sidebar-lg : 它是一个大尺寸的侧边栏。
- p-sidebar-mask : 它是侧边栏的模式层。
创建Angular应用程序和模块安装。
- 第1步：使用以下命令创建一个Angular应用程序。
ng new appname
- 第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
- 第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
例子1：这是一个基本的例子，说明了如何使用侧边栏组件。
<p-sidebar [(visible)]="gfg" [baseZIndex]="10000">
<h1 style="font-weight: normal">GeeksforGeeks</h1>
<p>Angular PrimeNG Sidebar Component</p>
<p-button
type="button"
(click)="gfg = false"
label="OK"
styleClass="p-button-info">
</p-button>
<p-button
type="button"
(click)="gfg = false"
label="Cancel"
styleClass="p-button-danger">
</p-button>
</p-sidebar>
<p-button (click)="gfg = true"
label="Click Here!">
</p-button>
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 { ButtonModule } from "primeng/button";
import { SidebarModule } from "primeng/sidebar";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
SidebarModule,
ButtonModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
例子2：在这个例子中，我们将知道如何在侧边栏组件中使用position属性。
<p-sidebar [(visible)]="gfg"
[baseZIndex]="10000" position="right">
<h1 style="font-weight: normal">GeeksforGeeks</h1>
<p>Angular PrimeNG Sidebar Component</p>
<p-button
type="button"
(click)="gfg = false"
label="OK"
styleClass="p-button-info">
</p-button>
<p-button
type="button"
(click)="gfg = false"
label="Cancel"
styleClass="p-button-danger">
</p-button>
</p-sidebar>
<p-button (click)="gfg = true"
label="Click Here!">
</p-button>
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 { ButtonModule } from "primeng/button";
import { SidebarModule } from "primeng/sidebar";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
SidebarModule,
ButtonModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
