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.