Ngx-Bootstrap - Hızlı Kılavuz

Ngx-bootstrap, Açısal Tabanlı projelerde önyükleme bileşenlerini kullanmak için çok popüler bir kitaplıktır. Bootstrap'in neredeyse tüm temel bileşenlerini içerir. ngx-bootstrap bileşenleri tasarım gereği modüler, genişletilebilir ve uyarlanabilirdir. Bu önyükleme kitaplığının ana vurgulama noktaları aşağıdadır.

Esneklik

  • Tüm bileşenler tasarım gereği modülerdir. Özel şablonlar, Stiller kolayca uygulanabilir.

  • Tüm bileşenler genişletilebilir ve uyarlanabilirdir ve aynı kolaylık ve performansla masaüstü ve mobil cihazlarda çalışır.

Destek

  • Tüm bileşenler, kod bakımı ve okunabilirliği için en son stil kılavuzlarını ve yönergeleri kullanır.

  • Tüm bileşenler tamamen birim olarak test edilmiştir ve en son açısal sürümleri destekler.

Kapsamlı Belgeler

  • Tüm bileşenler zengin bir şekilde belgelenmiştir ve iyi yazılmıştır.

  • Tüm bileşenlerin, birden çok işlevsellik türünü sergilemek için birden çok çalışma demosu vardır.

Açık kaynak

  • ngx-bootstrap açık kaynaklı bir projedir. MIT Lisansı ile desteklenmektedir.

Bu bölümde, yerel bilgisayarınızda ngx-bootstrap çalışma ortamını kurmayı ayrıntılı olarak öğreneceksiniz. Ngx-bootstrap öncelikle açısal projeler için olduğundan, sahip olduğunuzdan emin olun.Node.js ve npm ve angular sisteminize kurulur.

Açısal bir proje oluşturun

İlk olarak, aşağıdaki komutları kullanarak ngx-bootstrap bileşenlerini test etmek için açısal bir proje oluşturun.

ng new ngxbootstrap

Ngxbootstrap adlı açısal bir proje oluşturacaktır.

Bağımlılık olarak ngx-bootstrap ekleyin

Yeni oluşturulan projede ngx-bootstrap'i kurmak için aşağıdaki komutu kullanabilirsiniz−

npm install ngx-bootstrap

Ngx-bootstrap başarıyla kurulduktan sonra aşağıdaki çıktıyı gözlemleyebilirsiniz -

+ [email protected]
added 1 package from 1 contributor and audited 1454 packages in 16.743s

Şimdi, bootstrap'in Node.js ile düzgün çalışıp çalışmadığını test etmek için aşağıdaki komutu kullanarak test bileşenini oluşturun -

ng g component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (267 bytes)
CREATE src/app/test/test.component.css (0 bytes)
UPDATE src/app/app.module.ts (388 bytes)

App.component.html içeriğini temizleyin ve içeriği takiben güncelleyin.

app.component.html

<app-test></app-test>

App.module.ts içeriğini ngx-bootstrap akordeon modülünü içerecek şekilde güncelleyin. Sonraki bölümlerde başka modül ekleyeceğiz. İçeriği takiben 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'
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

İndex.html'nin içeriğini bootstrap.css'yi içerecek şekilde güncelleyin. İçeriği takiben güncelleyin.

index.html

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Sonraki bölümde, ngx-bootstrap bileşenlerini kullanmak için test bileşenini güncelleyeceğiz.

Akordeon, katlanabilir panelleri görüntülemek için bir kontroldür ve bilgileri sınırlı alanda görüntülemek için kullanılır.

Akordeon Bileşen

Bilgileri sınırlı bir alanda sunmak için daraltılabilir içerik panellerini görüntüler.

seçici

  • accordion

Girişler

  • closeOthers - boole, eğer bir öğeyi doğru genişletmek diğerlerini kapatacaksa

  • isAnimated - boole, animasyonu aç / kapat, varsayılan: false

Akordeon Panel Bileşeni

Akordeon başlığı

Akordeon grubundaki başlık niteliğini kullanmak yerine, grubun başlık şablonu olarak kullanılacak bir grubun içindeki herhangi bir öğede akordeon başlığı niteliği kullanabilirsiniz.

seçici

  • akordeon grubu, akordeon paneli

Girişler

  • heading - dize, akordeonun grup başlığındaki tıklanabilir metin

  • isDisabled - boolean, akordeon grubunu etkinleştirir / devre dışı bırakır

  • isOpen- boolean, akordeon grubu açık mı yoksa kapalı mı. Bu özellik, iki yönlü bağlamayı destekler

  • panelClass - string, Bootstrap'in bağlamsal panel sınıflarını (panel birincil, panel başarısı, panel bilgisi, vb.) Kullanma yeteneği sağlar.

çıktılar

  • isOpenChange - Açık durum değiştiğinde yayar

AkordeonConfig

Yapılandırma hizmeti, AccordionComponent için varsayılan değerler sağlar.

Özellikleri

  • closeOthers- boolean, Bir panel açıldığında diğer panellerin kapatılıp kapatılmayacağı. Varsayılan: yanlış

  • isAnimated - boole, animasyonu aç / kapat

Misal

Akordeon kullanacağımızdan, kullanmak için app.module.ts'yi güncelledik AccordionModulegibi NGX-önyükleme Ortamı Kurulumu bölüm.

Akordeon kullanmak için test.component.html'yi güncelleyin.

test.component.html

<accordion>
   <accordion-group heading="Open By Default" [isOpen]="open">
      <p>Open By Default</p>
   </accordion-group>
   <accordion-group heading="Disabled" [isDisabled]="disabled">
      <p>Disabled</p>
   </accordion-group>
   <accordion-group heading="with isOpenChange" (isOpenChange)="log($event)">
      <p>Open Event</p>
   </accordion-group>
</accordion>

İ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';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   open: boolean = true;
   disabled: boolean = true;
   constructor() { }
   ngOnInit(): void {
   }
   log(isOpened: boolean){
      console.log(isOpened);
   }
}

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 ve aşağıdaki çıktıyı doğrulayın.

Uyarılar, bilgi, mevcut hata ve esnek uyarı mesajları gibi tipik kullanıcı eylemleri için bağlamsal mesajlar sağlar.

AlertComponent

Bilgileri sınırlı bir alanda sunmak için daraltılabilir içerik panellerini görüntüler.

seçici

  • alert,bs-alert

Girişler

  • dismissible - boolean, ayarlanmışsa, satır içi bir "Kapat" düğmesi görüntüler, varsayılan: false

  • dismissOnTimeout- dize | sayı, milisaniye cinsinden sayı, ardından uyarı kapatılacaktır

  • isOpen - boole, Uyarı görünür mü, varsayılan: doğru

  • type- dize, uyarı türü. Bootstrap destekli dört bağlamsal sınıftan birini sağlar: başarı, bilgi, uyarı ve tehlike, varsayılan: uyarı

çıktılar

  • onClose - Bu olay, yakın örnek yöntemi çağrıldıktan hemen sonra tetiklenir, $ event, Alert bileşeninin bir örneğidir.

  • onClosed - Bu olay uyarı kapatıldığında tetiklenir, $ event, Alert bileşeninin bir örneğidir

AlertConfig

Özellikleri

  • dismissible - boole, uyarılar varsayılan olarak kapatılabilir, varsayılan: false

  • dismissOnTimeout - sayı, uyarının kapatılmasından önceki varsayılan süre, varsayılan: tanımsız

  • type - dize, varsayılan uyarı türü, varsayılan: uyarı

Misal

Uyarıları kullanacağımızdan, kullanmak için ngx-bootstrap Akordeon bölümünde kullanılan app.module.ts'i güncellemeliyiz.AlertModule ve AlertConfig.

AlertModule ve AlertConfig'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';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Uyarıları kullanmak için test.component.html'yi güncelleyin.

test.component.html

<alert type="success" 
   [dismissible]="dismissible"
   [isOpen]="open"
   (onClosed)="log($event)"
   [dismissOnTimeout]="timeout">
   <h4 class="alert-heading">Well done!</h4>
   <p>Success Message</p>
</alert>
<alert type="info">
   <strong>Heads up!</strong> Info
</alert>
<alert type="warning">
   <strong>Warning!</strong> Warning
</alert>
<alert type="danger">
   <strong>Oh snap!</strong> Error
</alert>

İ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';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   open: boolean = true;
   dismissible: boolean = true;
   timeout: number = 10000;
   constructor() { }
   
   ngOnInit(): void {
   }
   log(alert){
      console.log('alert message closed');
   }
}

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 ve aşağıdaki çıktıyı doğrulayın.

ngx-bootstrap düğmelerinin, bir grup düğmenin onay kutusu veya radyo düğmeleri gibi davranmasını sağlayan iki özel yönergesi vardır.

ButtonCheckboxDirective

Herhangi bir öğeye onay kutusu işlevselliği ekleyin.

seçici

  • [btnCheckbox]

Girişler

  • btnCheckboxFalse - boolean, Falsy değeri ngModel olarak ayarlanacak, varsayılan: false

  • btnCheckboxTrue - boolean, Truthy değeri ngModel olarak ayarlanacak, varsayılan: true

ButtonRadioDirective

Radyo düğmeleri veya düğme grupları oluşturun. Seçilen bir düğmenin bir değeri, ngModel aracılığıyla belirtilen bir değişkene bağlanır.

seçici

  • [btnRadio]

Girişler

  • btnRadio - string, Radio buton değeri ngModel olarak ayarlanacaktır

  • disabled - boole, true ise - radyo düğmesi devre dışı bırakılır

  • uncheckable - boole, true ise - radyo düğmesi işaretlenmemiş olabilir

  • value - string, radyo bileşeninin veya grubun mevcut değeri

ButtonRadioGroupDirective

Bir grup radyo düğmesi. Seçilen bir düğmenin bir değeri, ngModel aracılığıyla belirtilen bir değişkene bağlanır.

seçici

  • [btnRadioGroup]

Misal

Düğmeleri kullanacağımızdan, kullanmak için ngx-bootstrap Uyarıları bölümünde kullanılan app.module.ts'i güncellemeliyiz.ButtonsModule. Ayrıca FormModule kullanarak giriş kontrolleri için destek ekliyoruz.

AlertModule ve AlertConfig'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';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Düğmeleri kullanmak için test.component.html'yi güncelleyin.

test.component.html

<button type="button" class="btn btn-primary" (click)="clicked()">
   Single Button
</button>
<pre class="card card-block card-header">
   {{clickCounter}}
</pre>
<p>Button as Checkbox</p>
<div class="btn-group">
   <label class="btn btn-primary" [(ngModel)]="checkModel.left"
      btnCheckbox tabindex="0" role="button">Left</label>
   <label class="btn btn-primary" [(ngModel)]="checkModel.right"
      btnCheckbox tabindex="0" role="button">Right</label>
</div>
<pre class="card card-block card-header">
   {{checkModel | json}}
</pre>
<p>Button as RadionButton</p>
<div class="form-inline">
   <div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
      <label class="btn btn-success" btnRadio="Left">Left</label>
      <label class="btn btn-success" btnRadio="Right">Right</label>
   </div>
</div>
<pre class="card card-block card-header">
   {{radioModel}}
</pre>

İ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';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   checkModel = { left: false, right: false };
   radioModel = 'Left';
   clickCounter = 0;
   constructor() { }

   ngOnInit(): void {
   }
   clicked(): void {
      this.clickCounter++;
   }
}

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 ve aşağıdaki çıktıyı doğrulayın.

ngx-bootstrap Carousel, resimlerin veya metnin slayt gösterisini oluşturmak için kullanılır

CarouselComponent

Atlı karınca oluşturmak için temel öğe.

seçici

  • carousel

Girişler

  • activeSlide - sayı, şu anda görüntülenen slayt dizini (0 için başlatıldı)

  • indicatorsByChunk - boole, varsayılan: yanlış

  • interval- Milisaniye cinsinden öğe döngüsünün gecikmesi. Yanlışsa, atlıkarınca otomatik olarak dönmez.

  • isAnimated- boole, animasyonu aç / kapat. Animasyon, çok listeli atlı karınca için çalışmaz, varsayılan: yanlış

  • itemsPerSlide - sayı, varsayılan: 1

  • noPause - boole

  • noWrap - boole

  • pauseOnFocus - boole

  • showIndicators - boole

  • singleSlideOffset - boole

  • startFromIndex - sayı, varsayılan: 0

çıktılar

  • activeSlideChange- Etkin slayt değiştirildiğinde yayınlanacaktır. İki yönlü bağlanabilir [(activeSlide)] özelliğinin parçası

  • slideRangeChange - Çoklu liste modunda etkin slaytlar değiştirildiğinde yayınlanacaktır

SlideComponent

seçici

  • slide

Girişler

  • active - boole, mevcut slayt etkin mi

Misal

Atlıkarınca kullanacağımız için, kullanmak için ngx-bootstrap Düğmeleri bölümünde kullanılan app.module.ts'yi güncellemeliyiz.CarouselModule.

CarouselModule'u 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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Atlı Karıncayı kullanmak için test.component.html'yi güncelleyin.

test.component.html

<div style="width: 500px; height: 500px;">
   <carousel [noWrap]="noWrapSlides" [showIndicators]="showIndicator">
      <slide *ngFor="let slide of slides; let index=index">
         <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
         <div class="carousel-caption">
			<h4>Slide {{index}}</h4>
            <p>{{slide.text}}</p>
         </div>
      </slide>
   </carousel>
   <br/>
   <div>
      <div class="checkbox">
         <label><input type="checkbox" [(ngModel)]="noWrapSlides">Disable Slide Looping</label>
         <label><input type="checkbox" [(ngModel)]="showIndicator">Enable Indicator</label>
      </div>
   </div>
</div>

İ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 { CarouselConfig } from 'ngx-bootstrap/carousel';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   providers: [
      { provide: CarouselConfig, useValue: { interval: 1500, noPause: false, showIndicators: true } }
   ],
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   slides = [
      {image: 'assets/images/nature/1.jpg', text: 'First'},
      {image: 'assets/images/nature/2.jpg',text: 'Second'},
      {image: 'assets/images/nature/3.jpg',text: 'Third'}
   ];
   noWrapSlides = false;
   showIndicator = true;
   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 ve aşağıdaki çıktıyı doğrulayın.

ngx-bootstrap Collapse yönergesi, bir kapsayıcı içeriğini göstermeye / gizlemeye yardımcı olur.

CollapseDirective

seçici

  • [collapse]

Girişler

  • collapse - boole, İçeriğin görünürlüğünü gösteren bir işaret (gösterilen veya gizli)

  • display - dize

  • isAnimated- boole, animasyonu aç / kapat. varsayılan: yanlış

çıktılar

  • collapsed - Bu olay, içerik çöktüğü anda tetiklenir

  • collapses - Bu olay çökme başladığında patlar

  • expanded - Bu etkinlik, içerik görünür hale gelir gelmez tetiklenir

  • expands - Bu olay, genişletme başladığında tetiklenir

Yöntemler

  • toggle() - içerik görünürlüğünü manuel olarak değiştirmeye izin verir

  • hide - içeriği manuel olarak gizlemeye izin verir

  • show - daraltılmış içeriği manuel olarak göstermeye izin verir

Misal

Collapse'ı kullanacağımız için, ngx-bootstrap Carousel bölümünde kullanılan app.module.ts'i kullanmak için güncellemeliyiz.CollapseModule.

CollapseModule'u 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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Daralt'ı kullanmak için test.component.html'yi güncelleyin.

test.component.html

<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="isCollapsed">Collapse</label>
   </div>
</div>
<div [collapse]="isCollapsed" [isAnimated]="true">
   <div class="well well-lg card card-block card-header">Welcome to Tutorialspoint.</div>
</div>

İ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';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   isCollapsed: boolean = false;
   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 ve aşağıdaki çıktıyı doğrulayın.

Daralt onay kutusunu işaretleyin, ardından içerik daraltılacaktır.

ngx-bootstrap DatePicker bileşeni, ihtiyacımıza göre oldukça yapılandırılabilir ve özelleştirilebilir. Tarih veya tarih aralığı seçmek için çeşitli seçenekler sunar.

BsDatepickerDirective

seçici

  • [bsDatepicker]

Girişler

  • bsConfig - Kısmi <BsDatepickerConfig>, tarih seçici için Config nesnesi

  • bsValue - Tarih seçicinin ilk değeri

  • container- dize, Tarih seçicinin eklenmesi gereken öğeyi belirten bir seçici. varsayılan: gövde

  • dateCustomClasses - DatepickerDateCustomClasses [], Date özel sınıfları

  • datesDisabled - Tarih [], Belirli tarihleri ​​devre dışı bırakın

  • datesEnabled - Tarih [], Belirli tarihleri ​​etkinleştir

  • dateTooltipTexts - DatepickerDateTooltipText [], Tarih araç ipucu metni

  • daysDisabled - sayı [], Haftanın Belirli günlerini Devre Dışı Bırak

  • isDisabled - boolean, tarih seçici içeriğinin etkin olup olmadığını gösterir

  • isOpen - boolean, Tarih seçicinin o anda gösterilip gösterilmediğini döndürür

  • maxDate - boole, Seçilebilecek maksimum tarih

  • minDate - boole, Seçilebilecek Minimum tarih

  • minMode - BsDatepickerViewMode, Minimum görüntüleme modu: gün, ay veya yıl

  • outsideClick - boole, Dış tıklamada tarih seçiciyi kapat, varsayılan: true

  • outsideEsc - boole, Çıkış tıklamasında tarih seçiciyi kapat, varsayılan: true

  • placement- "üst" | "alt" | "sol" | "sağ", Tarih seçicinin yerleştirilmesi. Kabul eder: "üst", "alt", "sol", "sağ", varsayılan: alt

  • triggers- string, Tetiklemesi gereken olayları belirtir. Olay adlarının boşlukla ayrılmış listesini destekler., Varsayılan: tıklayın

çıktılar

  • bsValueChange - Tarih seçici değeri değiştirildiğinde yayınlar

  • onHidden - Tarih seçici gizlendiğinde bir olay yayar

  • onShown - Tarih seçici gösterildiğinde bir olay yayar

Yöntemler

  • show()- Bir öğenin tarih seçicisini açar. Bu, tarih seçicinin 'manuel' tetiklenmesi olarak kabul edilir.

  • hide()- Bir öğenin tarih seçicisini kapatır. Bu, tarih seçicinin 'manuel' tetiklenmesi olarak kabul edilir.

  • toggle()- Bir öğenin tarih seçicisini açar / kapatır. Bu, tarih seçicinin 'manuel' tetiklenmesi olarak kabul edilir.

  • setConfig() - Tarih seçici için yapılandırmayı ayarla

BsDaterangepickerDirective

seçici

  • [bsDaterangepicker]

Girişler

  • bsConfig - Kısmi <BsDaterangepickerConfig>, daterangepicker için Config nesnesi

  • bsValue - Tarih, daterangepicker'ın ilk değeri

  • container- string, Tarih seçicinin eklenmesi gereken öğeyi belirten bir seçici. varsayılan: gövde

  • dateCustomClasses - DatepickerDateCustomClasses [], Date özel sınıfları

  • datesDisabled - Tarih [], Belirli tarihleri ​​devre dışı bırakın

  • datesEnabled - Tarih [], Belirli tarihleri ​​etkinleştir

  • dateTooltipTexts - DatepickerDateTooltipText [], Tarih araç ipucu metni

  • daysDisabled - sayı [], Haftanın Belirli günlerini Devre Dışı Bırak

  • isDisabled - boolean, Daterangepicker içeriğinin etkin olup olmadığını gösterir

  • isOpen - boole, Tarih seçicinin o anda gösterilip gösterilmediğini döndürür

  • maxDate - boole, Seçilebilecek maksimum tarih

  • minDate - boole, Seçilebilecek Minimum tarih

  • minMode - BsDatepickerViewMode, Minimum görüntüleme modu: gün, ay veya yıl

  • outsideClick - boolean, Dış tıklamada daterangepicker'ı kapat, varsayılan: true

  • outsideEsc - boole, kaçış tıklamasında daterangepicker'ı kapat, varsayılan: true

  • placement- "üst" | "alt" | "sol" | "sağ", Bir tarih seçicinin yerleştirilmesi. Kabul eder: "üst", "alt", "sol", "sağ", varsayılan: alt

  • triggers- string, Tetiklemesi gereken olayları belirtir. Olay adlarının boşlukla ayrılmış listesini destekler., Varsayılan: tıklayın

çıktılar

  • bsValueChange - Daterangepicker değeri değiştirildiğinde yayınlar

  • onHidden - Tarih seçici gizlendiğinde bir olay yayar

  • onShown - Tarih seçici gösterildiğinde bir olay yayar

Yöntemler

  • show()- Bir öğenin tarih seçicisini açar. Bu, tarih seçicinin 'manuel' tetiklenmesi olarak kabul edilir.

  • hide()- Bir öğenin tarih seçicisini kapatır. Bu, tarih seçicinin 'manuel' tetiklenmesi olarak kabul edilir.

  • toggle()- Bir öğenin tarih seçicisini açar / kapatır. Bu, tarih seçicinin 'manuel' tetiklenmesi olarak kabul edilir.

  • setConfig() - Tarih seçici için yapılandırmayı ayarla

Misal

DatePicker ve DateRangePicker'ı kullanacağımız için, ngx-bootstrap Collapse bölümünde kullanılan app.module.ts'i kullanmak için güncellemeliyizBsDatepickerModule ve BsDatepickerConfig.

BsDatepickerModule ve BsDatepickerConfig'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';

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

Bs-datepicker.css'yi kullanmak için index.html'yi güncelleyin.

app.module.ts

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
      <link href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet" >
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Tarih seçicileri kullanmak için test.component.html'yi güncelleyin.

test.component.html

<div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Datepicker"
         class="form-control"
         bsDatepicker
         [bsValue]="bsValue"
         [minDate]="minDate"
         [maxDate]="maxDate"
         [daysDisabled]="[6,0]"
         [datesDisabled]="disabledDates"
         [bsConfig]="{ isAnimated: true, dateInputFormat: 'YYYY-MM-DD' }">
   </div>
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Daterangepicker"
         class="form-control"
         bsDaterangepicker
         [(ngModel)]="bsRangeValue"
         [datesEnabled]="enabledDates"
         [bsConfig]="{ isAnimated: true }">
   </div>
</div>

İ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';

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

   bsValue = new Date();
   bsRangeValue: Date[];
   maxDate = new Date();
   minDate = new Date();

   constructor() {
      this.minDate.setDate(this.minDate.getDate() - 1);
      this.maxDate.setDate(this.maxDate.getDate() + 7);
      this.bsRangeValue = [this.bsValue, this.maxDate];
   }

   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 ve aşağıdaki çıktıyı doğrulayın.

ngx-bootstrap açılır bileşeni değiştirilebilir ve bağlantıların listesini vb. görüntülemek için bağlamsal kaplama sağlar. Açılır yönergelerle açılır menüleri etkileşimli hale getirebiliriz.

BsDropdownDirective

seçici

  • [bsDropdown],[dropdown]

Girişler

  • autoClose - boolean, açılır listenin öğe veya belge tıklandığında ve ESC'ye basıldıktan sonra kapatılacağını belirtir.

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

  • dropup - boolean, Bu özellik, açılır menünün yukarı doğru açılması gerektiğini belirtir.

  • insideClick - boolean, Bu özellik, autoClose true olarak ayarlandığında açılır listenin iç tıklamada kapanmaması gerektiğini belirtir.

  • isAnimated - boole, Açılır listenin animasyonlu olacağını belirtir

  • isDisabled - boole, açılır menü geçişini devre dışı bırakır ve açılırsa açılır menüyü gizler

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

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

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

çıktılar

  • isOpenChange - isOpen değişikliği olduğunda bir olay yayar

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

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

Yöntemler

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

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

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

  • setConfig() - Popover için yapılandırma ayarla

Misal

Açılır listeleri kullanacağımız için, ngx-bootstrap DatePicker bölümünde kullanılan app.module.ts'i kullanmak için güncellemeliyiz.BsDropdownModule ve BsDropdownConfig.

BsDropdownModule ve BsDropdownConfig'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';

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

Açılır menüleri kullanmak için test.component.html'yi güncelleyin.

test.component.html

<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
   <button id="button-basic" dropdownToggle type="button" 
      class="btn btn-primary dropdown-toggle"
      aria-controls="dropdown-basic">
      Menu <span class="caret"></span>
   </button>
   <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">File</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Edit</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Search</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Recents</a>
      </li>
   </ul>
</div>
<button type="button" class="btn btn-primary" 
   (click)="dropdown.isOpen = !dropdown.isOpen">Show/Hide
</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';

@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 ve aşağıdaki çıktıyı doğrulayın.

ngx-bootstrap modal bileşeni esnek ve son derece yapılandırılabilir bir iletişim komut istemidir ve birden çok varsayılan sağlar ve minimum kodla kullanılabilir.

ModalDirective

seçici

  • [bsModal]

Girişler

  • config - ModalOptions, eleman özelliği aracılığıyla modsal konfigürasyonu ayarlamaya izin verir

çıktılar

  • onHidden - Bu olay, modun kullanıcıdan gizlenmesi tamamlandığında tetiklenir (CSS geçişlerinin tamamlanmasını bekler).

  • onHide - Bu olay, hide örnek yöntemi çağrıldığında hemen tetiklenir.

  • onShow - Bu olay, gösteri örneği yöntemi çağrıldığında hemen tetiklenir.

  • onShown - Bu olay, modal kullanıcı tarafından görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).

Yöntemler

  • show() - Modeli manuel olarak açmaya izin verir.

  • hide() - Modeli manuel olarak kapatmaya izin verir.

  • toggle() - Mod görünürlüğünü manuel olarak değiştirmeye izin verir.

  • showElement() - İletişim kutusunu göster.

  • focusOtherModal() - Etkinlik hileleri.

Misal

Bir modal kullanacağımızdan, kullanmak için ngx-bootstrap Dropdowns bölümünde kullanılan app.module.ts dosyasını güncellemeliyiz.ModalModule ve BsModalService.

ModalModule ve BsModalService'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 { ModalModule, BsModalService } from 'ngx-bootstrap/modal';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule
   ],
   providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig,BsModalService],
   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-primary" (click)="openModal(template)">Open modal</button>

<ng-template #template>
   <div class="modal-header">
      <h4 class="modal-title pull-left">Modal</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
         <span aria-hidden="true">×</span>
      </button>
   </div>
   <div class="modal-body">
      This is a sample modal dialog box.
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
   </div>
</ng-template>

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

test.component.ts

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

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

   modalRef: BsModalRef;
   constructor(private modalService: BsModalService) {}

   openModal(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template);
   }

   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.

ngx-bootstrap sayfalama bileşeni, sitenize veya bileşeninize sayfalandırma bağlantıları veya sayfalayıcı bileşeni sağlar.

Sayfalandırma Bileşeni

seçici

  • pagination

Girişler

  • align - boole, eğer true her bağlantıyı çağrı cihazının kenarlarına hizalıyorsa

  • boundaryLinks - boole, false ise ilk ve son düğmeler gizlenecek

  • customFirstTemplate - TemplateRef <PaginationLinkContext>, ilk bağlantı için özel şablon

  • customLastTemplate - TemplateRef <PaginationLinkContext>, son bağlantı için özel şablon

  • customNextTemplate - TemplateRef <PaginationLinkContext>, sonraki bağlantı için özel şablon

  • customPageTemplate - TemplateRef <PaginationLinkContext>, sayfa bağlantısı için özel şablon

  • customPreviousTemplate - TemplateRef <PaginationLinkContext>, önceki bağlantı için özel şablon

  • directionLinks - boole, eğer yanlışsa önceki ve sonraki düğmeler gizlenecek

  • disabled - gerçek sayfalama bileşeni devre dışı bırakılacaksa boole

  • firstText - boole, ilk düğme metni

  • itemsPerPage- sayfa başına maksimum öğe sayısı. 1'den küçük bir değer tüm öğeleri tek bir sayfada görüntüler

  • lastText - dize, son düğme metni

  • maxSize - çağrı cihazındaki sayfa bağlantıları için sayı, sınır sayısı

  • nextText - dize, sonraki düğme metni

  • pageBtnClass - dize, <li>

  • previousText - dize, önceki düğme metni

  • rotate - boole, eğer gerçek geçerli sayfa, sayfalar listesinin ortasında olacaksa

  • totalItems - tüm sayfalardaki toplam öğe sayısı

çıktılar

  • numPages - toplam sayfa değişiklikleri saydığında tetiklenir, $ event: number toplam sayfa sayısına eşittir.

  • pageChanged - sayfa değiştirildiğinde tetiklendi, $ event: {page, itemsPerPage}, geçerli sayfa dizini ve sayfa başına öğe sayısı olan nesneye eşittir.

Misal

Sayfalandırma kullanacağımızdan, kullanmak için ngx-bootstrap Modals bölümünde kullanılan app.module.ts dosyasını güncellemeliyiz.PaginationModule ve PaginationConfig.

PaginationModule ve PaginationConfig'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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule
   ],
   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

<div class="row">
   <div class="col-xs-12 col-12">
      <div class="content-wrapper">
         <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
      </div>
      <pagination [boundaryLinks]="showBoundaryLinks" 
         [directionLinks]="showDirectionLinks" 
         [totalItems]="contentArray.length"
         [itemsPerPage]="5"
         (pageChanged)="pageChanged($event)"></pagination>
   </div>
</div>
<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="showBoundaryLinks">Show Boundary Links</label>
      <br/>
      <label><input type="checkbox" [(ngModel)]="showDirectionLinks">Show Direction Links</label>
   </div>
</div>

İ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 {
   contentArray: string[] = new Array(50).fill('');
   returnedArray: string[];
   showBoundaryLinks: boolean = true;
   showDirectionLinks: boolean = true;
   constructor() {}

   pageChanged(event: PageChangedEvent): void {
      const startItem = (event.page - 1) * event.itemsPerPage;
      const endItem = event.page * event.itemsPerPage;
      this.returnedArray = this.contentArray.slice(startItem, endItem);
   }
   ngOnInit(): void {
      this.contentArray = this.contentArray.map((v: string, i: number) => {
         return 'Line '+ (i + 1);
      });
      this.returnedArray = this.contentArray.slice(0, 5);
   }
}

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.

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, 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.

ngx-bootstrap ilerleme çubuğu bileşeni, esnek çubuklarla bir iş akışının ilerlemesini göstermek için bir ilerleme bileşeni sağlar.

İlerleme çubuğuComponent

seçici

  • progressbar

Girişler

  • animate - boolean, eğer ilerleme çubuğunun gerçek değişen değeri canlandırılacaksa.

  • max - sayı, ilerleme öğesinin maksimum toplam değeri.

  • striped - boolean, true ise, şeritli sınıflar uygulanır.

  • type - ProgressbarType, desteklenen dört bağlamsal sınıftan birini sağlar: başarı, bilgi, uyarı, tehlike.

  • value- numara | herhangi bir [], ilerleme çubuğunun mevcut değeri. {"Değer": 15, "tür": "bilgi", "etiket": "% 15"} gibi bir dizi veya nesne dizisi olabilir.

Misal

Bir ilerleme çubuğu kullanacağımız için, kullanmak için ngx-bootstrap Popover bölümünde kullanılan app.module.ts'yi güncellemeliyiz.ProgressbarModule ve ProgressbarConfig.

ProgressbarModule ve ProgressbarConfig'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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';

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

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

test.component.html

<div class="row">
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value"></progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="warning"
            [striped]="true">{{value}}%</progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="danger" 
            [striped]="true" [animate]="true"
            ><i>{{value}} / {{max}}</i></progressbar>
      </div>
   </div>
</div>

İ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';

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

   max: number = 100;
   value: number = 25;
   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.

ngx-bootstrap derecelendirme bileşeni, yapılandırılabilir bir derecelendirme bileşeni, varsayılan olarak bir yıldız çubuğu sağlar.

Değerlendirme Bileşeni

seçici

  • rating

Girişler

  • customTemplate - TemplateRef <any>, simgeler için özel şablon.

  • max- numara, hayır. simgelerin sayısı, varsayılan: 5.

  • readonly - boole, eğer true ise hiçbir kullanıcı olayına tepki vermez.

  • titles - dize [], simge başlıkları dizisi, varsayılan: ([1, 2, 3, 4, 5])

çıktılar

  • onHover - simge seçildiğinde tetiklenir, $ event: number seçilen derecelendirmeye eşittir.

  • onLeave - simge seçildiğinde tetiklenir, $ event: number önceki derecelendirme değerine eşittir.

Misal

Bir derecelendirme kullanacağımızdan, kullanmak için ngx-bootstrap ProgressBar bölümünde kullanılan app.module.ts'yi güncellememiz gerekiyorRatingModule, RatingConfig.

RatingModule ve RatingConfig kullanmak için app.module.ts 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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';

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

Derecelendirmeyi kullanmak için test.component.html'yi güncelleyin.

test.component.html

<rating [(ngModel)]="value" 
   [max]="max" 
   [readonly]="false" 
   [titles]="['one','two','three','four']"></rating>

İ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';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   max: number = 10;
   value: number = 5;
   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.

ngx-bootstrap sıralanabilir bileşeni, sürükle bırak desteğiyle yapılandırılabilir bir sıralanabilir bileşen sağlar.

SortableComponent

seçici

  • bs-sortable

Girişler

  • fieldName - dizge, girdi dizisi nesnelerden oluşuyorsa alan adı.

  • itemActiveClass - dize, aktif öğe için sınıf adı.

  • itemActiveStyle- {[anahtar: dize]: dize; }, aktif öğe için stil nesnesi.

  • itemClass - dize, öğe için sınıf adı

  • itemStyle - dize, öğe için sınıf adı

  • itemTemplate- TemplateRef <any>, özel bir öğe şablonu belirtmek için kullanılır. Şablon değişkenleri: öğe ve dizin;

  • placeholderClass - dize, yer tutucu için sınıf adı

  • placeholderItem - dize, koleksiyon boşsa gösterilecek yer tutucu öğe

  • placeholderStyle - dizgi, yer tutucu için stil nesnesi

  • wrapperClass - dize, öğe sarmalayıcı için sınıf adı

  • wrapperStyle- {[anahtar: dize]: dize; }, öğe sarmalayıcı için stil nesnesi

çıktılar

  • onChange- ngModelChange ile aynı dizi değişikliğinde (yeniden sıralama, ekleme, kaldırma) tetiklenir. Yeni öğe koleksiyonunu yük olarak döndürür.

Misal

Bir sıralanabilir kullanacağımızdan, kullanmak için ngx-bootstrap Rating bölümünde kullanılan app.module.ts'yi güncellemeliyiz.SortableModule ve DraggableItemService.

SortableModule ve DraggableItemService'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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';

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

Sıralanabilir bileşen için stilleri kullanmak için styles.css dosyasını güncelleyin.

Styles.css

.sortableItem {
   padding: 6px 12px;
   margin-bottom: 4px;
   font-size: 14px;
   line-height: 1.4em;
   text-align: center;
   cursor: grab;
   border: 1px solid transparent;
   border-radius: 4px;
   border-color: #adadad;
}

.sortableItemActive {
   background-color: #e6e6e6;
   box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.sortableWrapper {
   min-height: 150px;
}

Sıralanabilir bileşeni kullanmak için test.component.html'yi güncelleyin.

test.component.html

<bs-sortable
   [(ngModel)]="items"
   fieldName="name"
   itemClass="sortableItem"
   itemActiveClass="sortableItemActive"
   wrapperClass="sortableWrapper">
</bs-sortable>

İ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';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   items = [
      {
         id: 1,
         name: 'Apple'
      },
      {
         id: 2,
         name: 'Orange'
      },
      {
         id: 3,
         name: 'Mango'
      }
   ];
   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.

ngx-bootstrap tabs bileşeni, kullanımı kolay ve oldukça yapılandırılabilir bir Tab bileşeni sağlar.

TabsetComponent

seçici

  • tabset

Girişler

  • justified - gerçek sekmeler kapsayıcıyı dolduruyorsa ve tutarlı bir genişliğe sahipse boole.

  • type - dize, gezinme bağlamı sınıfı: "sekmeler" veya "haplar".

  • vertical - gerçek sekmeler dikey olarak yerleştirilecekse.

TabDirective

seçici

  • sekme, [sekme]

Girişler

  • active - boole, sekme aktif durum geçişi.

  • customClass- dizge, ayarlanmışsa, sekmenin sınıf özniteliğine eklenecektir. Birden çok sınıf desteklenmektedir.

  • disabled - gerçek sekme etkinleştirilemezse boole.

  • heading - dize, sekme başlığı metni.

  • id- dize, sekme kimliği. '-Link' sonekine sahip aynı kimlik, karşılık gelen

  • element.

  • removable - boole, eğer gerçek sekme çıkarılabilirse, ek düğme görünecektir.

çıktılar

  • deselect - sekme devre dışı kaldığında tetiklenir, $ event: Tab, Tab bileşeninin seçimi kaldırılmış örneğine eşittir.

  • removed - sekme kaldırılmadan önce tetiklenir, $ event: Tab, kaldırılan sekme örneğine eşittir.

  • selectTab - sekme etkinleştirildiğinde tetiklenir, $ event: Tab, Tab bileşeninin seçilen örneğine eşittir.

Misal

Bir Sekme kullanacağımız için, ngx-bootstrap Sortable bölümünde kullanılan app.module.ts'i kullanmak için güncellemeliyiz.TabsModule ve TabsetConfig.

TabsModule ve TabsetConfig'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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';

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

Sekmeler bileşenini kullanmak için test.component.html'yi güncelleyin.

test.component.html

<tabset>
   <tab heading="Home">Home</tab>
   <tab *ngFor="let tabz of tabs"
      [heading]="tabz.title"
      [active]="tabz.active"
      (selectTab)="tabz.active = true"        
      [disabled]="tabz.disabled">
      {{tabz?.content}}
   </tab>
</tabset>

İ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';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   tabs = [
      { title: 'First', content: 'First Tab Content' },
      { title: 'Second', content: 'Second Tab Content', active: true },
      { title: 'Third', content: 'Third Tab Content', removable: true },
      { title: 'Four', content: 'Fourth Tab Content', disabled: true }
   ];
   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.

ngx-bootstrap zaman alıcı bileşeni, kullanımı kolay ve oldukça yapılandırılabilir bir Zaman Seçici bileşeni sağlar.

TimepickerComponent

seçici

  • timepicker

Girişler

  • arrowkeys - boole, true ise saat ve dakika değerleri klavyedeki yukarı / aşağı ok tuşları kullanılarak değiştirilebilir.

  • disabled - gerçek saat ve dakika alanları devre dışı bırakılacaksa boole.

  • hoursPlaceholder - dize, zaman alıcısında saat için yer tutucu alanı.

  • hourStep - sayı, saat değiştirme adımı.

  • max - Tarih, kullanıcının seçebileceği maksimum süre.

  • meridians - string [], yerel ayara göre meridyen etiketleri.

  • min - Tarih, kullanıcının seçebileceği minimum süre.

  • minutesPlaceholder - string, timepicker'daki dakika alanı için yer tutucu.

  • minuteStep - sayı, saat değiştirme adımı.

  • mousewheel - Boole, eğer saat ve dakika içinde doğru kaydırma varsa, girişler zamanı değiştirecektir.

  • readonlyInput - boole, eğer gerçek saat ve dakika alanları salt okunur olacaksa.

  • secondsPlaceholder - string, timepicker'daki saniye alanı için yer tutucu.

  • secondsStep - sayı, saniye değiştirme adımı.

  • showMeridian - gerçek meridyen düğmesi gösterilecekse boole.

  • showMinutes - boolean, zamanlayıcıda dakikaları göster.

  • showSeconds - boolean, zamanlayıcıda saniyeleri göster.

  • showSpinners - boole, eğer girdilerin üstündeki ve altındaki gerçek döndürücü oklar gösterilecekse.

çıktılar

  • isValid - değer geçerli bir tarihse true yayar.

Misal

Bir TimePicker kullanacağımızdan, kullanmak için ngx-bootstrap Tabs bölümünde kullanılan app.module.ts'yi güncellemeliyiz.TimepickerModule.

TimepickerModule'u 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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';

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

Zaman seçici bileşenini kullanmak için test.component.html'yi güncelleyin.

test.component.html

<timepicker [(ngModel)]="time"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

<timepicker [(ngModel)]="time" [showMeridian]="false"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

İ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';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   time: Date = new Date();
   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.

ngx-bootstrap tooltip bileşeni, kullanımı kolay ve oldukça yapılandırılabilir bir Araç İpucu bileşeni sağlar.

TooltipDirective

seçici

  • [araç ipucu], [tooltipHtml]

Girişler

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

  • container - string, Araç ipucunun eklenmesi gereken öğeyi belirten bir seçici.

  • containerClass - string, araç ipucu kapsayıcı için Css sınıfı.

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

  • isDisabled - boolean, araç ipucunun devre dışı bırakılmasına izin verir.

  • isOpen - boolean, Araç ipucunun o anda gösterilip gösterilmediğini döndürür.

  • placement- string, Araç ipucunun yerleştirilmesi. Kabul eder: "üst", "alt", "sol", "sağ".

  • tooltip- dize | TemplateRef <any>, Araç ipucu olarak görüntülenecek içerik.

  • tooltipAnimation - boole, varsayılan: true.

  • tooltipAppendToBody - boole.

  • tooltipClass - dize.

  • tooltipContext - herhangi biri.

  • tooltipEnable - boole.

  • tooltipFadeDuration - sayı, varsayılan: 150.

  • tooltipHtml- dize | TemplateRef <any>.

  • tooltipIsOpen - boole.

  • tooltipPlacement - dize

  • tooltipPopupDelay - sayı

  • tooltipTrigger- dize | dize []

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

çıktılar

  • onHidden - Araç ipucu gizlendiğinde bir olay yayar.

  • onShown - Araç ipucu gösterildiğinde bir olay yayar.

  • tooltipChange - Araç ipucu içeriği değiştiğinde tetiklenir.

  • tooltipStateChanged - Araç ipucu durumu değiştiğinde tetiklenir.

Misal

Tooltip'i kullanacağımız için, ngx-bootstrap TimePicker bölümünde kullanılan app.module.ts'i kullanmak için güncellemeliyiz.TooltipModule.

TooltipModule'u 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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TooltipModule  } from 'ngx-bootstrap/tooltip';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TooltipModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Zaman seçici bileşenini kullanmak için test.component.html'yi güncelleyin.

test.component.html

<timepicker [(ngModel)]="time"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

<timepicker [(ngModel)]="time" [showMeridian]="false"></timepicker>
<pre class="alert alert-info">Time is: {{time}}</pre>

İ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';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   time: Date = new Date();
   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.

ngx-bootstrap Typeahead yönergesi, kullanımı kolay ve oldukça yapılandırılabilir, kullanımı kolay bir Typeahead bileşeni sağlar.

TipaheadDirective

seçici

  • [typeahead]

Girişler

  • adaptivePosition - boolean, setler uyarlanabilir konumu kullanır.

  • container - string, Typeahead'in eklenmesi gereken öğeyi belirten bir seçici.

  • dropup - boolean, Bu özellik, açılır menünün yukarı doğru açılması gerektiğini belirtir, varsayılan: false.

  • isAnimated - boole, animasyonu aç / kapat, varsayılan: false.

  • optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, özel bir seçenek listesi şablonu belirtmek için kullanılır. Şablon değişkenleri: eşleşmeler, itemTemplate, sorgu.

  • typeahead - Typeahead, seçenekler kaynağı, dizeler dizisi, nesneler veya harici eşleştirme işlemi için bir Gözlemlenebilir olabilir.

  • typeaheadAsync- boolean, yalnızca typeahead niteliğinin dizi için Gözlenebilir olması durumunda kullanılmalıdır. Doğru ise - seçeneklerin yüklenmesi eşzamansız olacaktır, aksi takdirde - eşzamanlı olacaktır. seçenekler dizisi büyükse true anlamlıdır.

  • typeaheadGroupField - dize, seçenekler kaynağı bir nesne dizisi olduğunda, grup değerini içeren alan adı, eşleşmeler ayarlandığında bu alan tarafından gruplanır.

  • typeaheadHideResultsOnBlur - boole, bulanıklıkta sonucu gizlemek için kullanılır.

  • typeaheadIsFirstItemActive- boolean, listedeki ilk öğeyi etkin hale getirir. Varsayılan: doğru.

  • typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, özel bir öğe şablonu belirtmek için kullanılır. Açığa çıkan şablon değişkenlerine öğe ve dizin adı verilir.

  • typeaheadLatinize- boole, latin sembolleriyle eşleşir. Eğer doğruysa súper sözcüğü süper ile eşleşir ve bunun tersi de geçerlidir.

  • typeaheadMinLength- sayı, en az karakter önden yazmadan önce girilmesi gereken karakter sayısı. 0 olarak ayarlandığında, önden yazma, seçeneklerin tam listesiyle odakta gösterilir (normal olarak normal olarak önden Başa Seçenek Sınırı ile sınırlıdır)

  • typeaheadMultipleSearch- boolean, birden çok öğe araması yapmak için kullanılabilir ve girdinin tüm değeri için değil, typeaheadMultipleSearchDelimiters özniteliği aracılığıyla sağlanan bir sınırlayıcıdan sonra gelen değer için öneride bulunabilir. Birden çok aramanın ne zaman ve ne zaman tek bir sözcükle sınırlandırılacağını belirlemede çelişkiyi önlemek için bu seçenek yalnızca typeaheadSingleWords seçeneğiyle birlikte kullanılabilir.

  • typeaheadMultipleSearchDelimiters- string, yalnızca typeaheadMultipleSearch özniteliğinin true olması durumunda kullanılmalıdır. Yeni bir aramanın ne zaman başlayacağını bilmek için çoklu arama sınırlayıcıyı ayarlar. Virgül varsayılanıdır. Boşluğun kullanılması gerekiyorsa, typeaheadWordDelimiters'ı açıkça boşluktan başka bir şeye ayarlayın çünkü alan varsayılan olarak kullanılır VEYA birden fazla aramayla birlikte kullanmanız gerekmiyorsa typeaheadSingleWords özniteliğini false olarak ayarlayın.

  • typeaheadOptionField- string, options source bir nesneler dizisi olduğunda, options değerini içeren alanın adı, bu alanın eksik olması durumunda seçenek olarak dizi öğesini kullanırız. Yuvalanmış özellikleri ve yöntemleri destekler.

  • typeaheadOptionsInScrollableView - sayı, Varsayılan değer: 5, kaydırma görünümünde gösterilecek seçeneklerin sayısını belirtir

  • typeaheadOptionsLimit- seçenek öğeleri listesinin sayısı, maksimum uzunluğu. Varsayılan değer 20'dir.

  • typeaheadOrderBy- TypeaheadOrder, Özel bir eşleşme sırası belirtmek için kullanılır. Seçenekler kaynağı bir nesne dizisi olduğunda, sıralama için bir alan ayarlanmalıdır. Seçenekler kaynağının bir dize dizisi olması durumunda, sıralama için bir alan yoktur. Sıralama yönü artan veya azalan olarak değiştirilebilir.

  • typeaheadPhraseDelimiters- string, yalnızca typeaheadSingleWords özniteliğinin true olması durumunda kullanılmalıdır. Kelime sınırlayıcısını kelime öbeğiyle tam olarak eşleşecek şekilde ayarlar. Basit ve çift tırnaklara varsayılanlar.

  • typeaheadScrollable - boolean, Varsayılan değer: false, tipahead kaydırılabilir olup olmadığını belirtir

  • typeaheadSelectFirstItem - boolean, Default value: true, bir seçenekler listesi açıldığında ve kullanıcı Sekmeye tıkladığında tetiklenir Eğer değer true'ya eşitse, listedeki ilk veya aktif öğe seçilir. Değer false'a eşitse, içinde etkin bir öğe seçilir. liste ya da hiçbir şey

  • typeaheadSingleWords - boolean, Varsayılan değer: true, Her karakter arasına tek bir beyaz boşluk ekleyerek sözcükleri aramak için kullanılabilir, örneğin 'C alifornia', 'California' ile eşleşir.

  • typeaheadWaitMs - sayı, yazmadan önce yazılan son karakterden sonra minimum bekleme süresi

  • typeaheadWordDelimiters- string, yalnızca typeaheadSingleWords özniteliğinin true olması durumunda kullanılmalıdır. Sözcük ayırıcıyı sözcükleri ayıracak şekilde ayarlar. Boşluğa varsayılanlar.

çıktılar

  • typeaheadLoading - Bu bileşenin 'meşgul' durumu değiştirildiğinde ateşlenir, yalnızca eşzamansız modda çalıştırılır, boole döndürür.

  • typeaheadNoResults - Her önemli olayda ateşlenir ve eşleşmelerin tespit edilmemesi durumunda true döner.

  • typeaheadOnBlur- bulanıklık olayı gerçekleştiğinde tetiklenir. aktif öğeyi döndürür.

  • typeaheadOnSelect - seçenek seçildiğinde ateşlenir, bu seçeneğin verileriyle nesneyi döndürür.

Misal

Bir Typeahead kullanacağımızdan, kullanmak için ngx-bootstrap Timepicker bölümünde kullanılan app.module.ts'yi güncellemeliyiz.TypeaheadModule.

TypeaheadModule'u 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';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TypeaheadModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Zaman seçici bileşenini kullanmak için test.component.html'yi güncelleyin.

test.component.html

<input [(ngModel)]="selectedState"
   [typeahead]="states"
   class="form-control">
<pre class="card card-block card-header mb-3">Model: {{selectedState | json}}</pre>

İ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';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   selectedState: string;
   states: string[] = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado',
   'Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois',
   'Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine',
   'Maryland','Massachusetts','Michigan','Minnesota','Mississippi',
   'Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
   'New Mexico','New York','North Dakota','North Carolina','Ohio',
   'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
   'South Dakota','Tennessee','Texas','Utah','Vermont',
   'Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
   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.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved