Ngx-Bootstrap - Açılır Bilgi Penceresi

ngx-bootstrap açılır bilgi bileşeni, bir bileşen hakkında küçük bilgiler sağlamak için küçük bir kaplama bileşeni sağlar.

PopoverDirective

seçici

  • popover

Girişler

  • adaptivePosition - boolean, ayarlar uyarlanabilir konumu devre dışı bırakır.

  • container - string, Açılır bilgi penceresinin eklenmesi gereken öğeyi belirten bir seçici.

  • containerClass - dize, popover kapsayıcı için Css sınıfı

  • delay - sayı, araç ipucunu göstermeden önce gecikme

  • isOpen - boolean, Açılır bilgi penceresinin o anda gösterilip gösterilmediğini döndürür

  • outsideClick - boole, Dış tıklamada açılır pencereyi kapat, varsayılan: false

  • placement- "üst" | "alt" | "sol" | "doğru" | "otomatik" | "sol üst" | "sağ üst" | "sağ üst" | "sağ alt" | "sağ alt" | "sol alt" | "sol alt" | "sol üst", Açılır bilgi penceresinin yerleştirilmesi. Kabul eder: "üst", "alt", "sol", "sağ".

  • popover- dize | TemplateRef <any>, açılır pencere olarak görüntülenecek içerik.

  • popoverContext - herhangi bir, açılır bilgi penceresi bir şablonsa kullanılacak bağlam.

  • popoverTitle - string, Açılır bilgi penceresinin başlığı.

  • triggers- string, Tetiklemesi gereken olayları belirtir. Olay adlarının boşlukla ayrılmış bir listesini destekler.

çıktılar

  • onHidden - Açılır pencere gizlendiğinde bir olay yayar.

  • onShown - Açılır pencere gösterildiğinde bir olay yayar.

Yöntemler

  • setAriaDescribedBy() - eleman yönergesi için aria-descriptionBy özelliğini ayarlayın ve açılır bilgi için id'yi ayarlayın.

  • show()- Bir elemanın açılır penceresini açar. Bu, açılır bilgi penceresinin "manuel" olarak tetiklenmesi olarak kabul edilir.

  • hide()- Bir öğenin açılır penceresini kapatır. Bu, açılır bilgi penceresinin "manuel" olarak tetiklenmesi olarak kabul edilir.

  • toggle()- Bir öğenin açılır penceresini açar / kapatır. Bu, açılır bilgi penceresinin "manuel" olarak tetiklenmesi olarak kabul edilir.

Misal

Biz popover kullanacağız gibi, biz kullanılan app.module.ts güncellemesine ettik NGX-önyükleme Sayfalandırmayı kullanımına bölümPopoverModule ve PopoverConfig.

PopoverModule ve PopoverConfig'i kullanmak için app.module.ts dosyasını güncelleyin.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Kalıcıyı kullanmak için test.component.html'yi güncelleyin.

test.component.html

<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint." [outsideClick]="true">
   Default Popover
</button>
<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint."
   popoverTitle="Tutorialspoint" 
   [outsideClick]="true"
   placement="right">
   Right Aligned popover
</button>

İlgili değişkenler ve yöntemler için test.component.ts dosyasını güncelleyin.

test.component.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   constructor() {}
   ngOnInit(): void {
   }
}

Oluşturun ve Sunun

Açısal sunucuyu başlatmak için aşağıdaki komutu çalıştırın.

ng serve

Sunucu çalışmaya başladığında. Http: // localhost: 4200'ü açın. Modal aç düğmesine tıklayın ve aşağıdaki çıktıyı doğrulayın.