Angular PrimeNG Button Компонент приподнятых кнопок

Опубликовано: 2 Января, 2023

Angular PrimeNG — это библиотека компонентов пользовательского интерфейса для приложений Angular. Он предлагает множество готовых тем и компонентов пользовательского интерфейса для различных задач, таких как ввод, меню, диаграммы, кнопки и т. д. В этой статье мы увидим компонент Angular PrimeNG Button Raised Buttons.

Компонент Button используется для выполнения некоторых действий при нажатии. Поднятая кнопка немного приподнята над веб-страницей с помощью свойства box-shadow. Приподнятая кнопка дает пользователю ощущение щелчка, поскольку она опускается, когда мы нажимаем на нее. Класс p-button-raised можно использовать для создания приподнятой кнопки.

Свойства компонентов приподнятых кнопок Angular PrimeNG Button:

label: это свойство компонента кнопки используется для установки текста кнопки.

Angular PrimeNG Button Поднятые кнопки Стиль компонента:

p-button-raised: этот класс используется для создания приподнятой кнопки.
p-button-rounded: этот класс используется, чтобы сделать границу кнопки закругленной.

Синтаксис:

<button pButton 
    type="button" 
    label="..." 
    class="p-button-raised">
</button>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

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

Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Запустите приведенную ниже команду, чтобы увидеть результат.

ng serve --open

Пример 1. В этом примере показано использование класса p-button-raised для создания обычной приподнятой кнопки и приподнятой текстовой кнопки.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
      Angular PrimeNG Button Raised 
      Buttons Component
    </h3>
</div>
  
<div class="buttons">
    <button pButton 
        type="button" 
        label="Raised Button" 
        class="p-button-raised">
    </button>
    
    <button pButton 
        type="button" 
        label="Raised Text Button" 
        class="p-button-raised p-button-text">
    </button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
button{
    margin-bottom: 10px;
}

app.component.ts

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

app.module.ts

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

Выход:

Пример 2. В этом примере мы использовали класс p-button-rounded вместе с классом p-button-raised для создания закругленной приподнятой кнопки.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
      Angular PrimeNG Button 
      Raised Buttons Component
    </h3>
</div>
  
<div class="buttons">
    <button pButton 
        type="button" 
        label="Raised Rounded Button" 
        class="p-button-raised p-button-rounded">
    </button>
  
    <button pButton 
        type="button" 
        label="Raised Rounded Text Button" 
        class="p-button-raised p-button-text 
        p-button-rounded">
    </button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
button{
    margin-bottom: 10px;
}

app.component.ts

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

app.module.ts

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

Выход:

Ссылка: http://primefaces.org/primeng/button

Picked AngularJS

Angular PrimeNG Button Компонент приподнятых кнопок

app.component.html

app.component.css

app.component.ts

app.module.ts

app.component.html

app.component.css

app.component.ts

app.module.ts

РЕКОМЕНДУЕМЫЕ СТАТЬИ