Ngx-Bootstrap - Dapat Diurutkan
ngx-bootstrap sortable component menyediakan komponen yang dapat diurutkan, dengan dukungan drag drop.
SortableComponent
pemilih
bs-sortable
Masukan
fieldName - string, nama field jika input array terdiri dari objek.
itemActiveClass - string, nama kelas untuk item aktif.
itemActiveStyle- {[kunci: string]: string; }, gaya objek untuk item aktif.
itemClass - string, nama kelas untuk item
itemStyle - string, nama kelas untuk item
itemTemplate- TemplateRef <any>, digunakan untuk menentukan template item kustom. Variabel template: item dan indeks;
placeholderClass - string, nama kelas untuk placeholder
placeholderItem - string, item placeholder yang akan ditampilkan jika koleksi kosong
placeholderStyle - string, objek gaya untuk placeholder
wrapperClass - string, nama kelas untuk pembungkus item
wrapperStyle- {[kunci: string]: string; }, objek gaya untuk pembungkus item
Keluaran
onChange- diaktifkan pada perubahan array (menyusun ulang, menyisipkan, menghapus), sama seperti ngModelChange. Mengembalikan koleksi item baru sebagai payload.
Contoh
Karena kami akan menggunakan sortable, Kami telah memperbarui app.module.ts yang digunakan dalam bab Rating ngx-bootstrap untuk digunakanSortableModule dan DraggableItemService.
Perbarui app.module.ts untuk menggunakan SortableModule dan DraggableItemService.
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 { }
Perbarui styles.css untuk menggunakan gaya untuk komponen yang dapat diurutkan.
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;
}
Perbarui test.component.html untuk menggunakan komponen yang dapat diurutkan.
test.component.html
<bs-sortable
[(ngModel)]="items"
fieldName="name"
itemClass="sortableItem"
itemActiveClass="sortableItemActive"
wrapperClass="sortableWrapper">
</bs-sortable>
Perbarui test.component.ts untuk variabel dan metode yang sesuai.
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 {
}
}
Bangun dan Sajikan
Jalankan perintah berikut untuk memulai server sudut.
ng serve
Setelah server aktif dan berjalan. Buka http: // localhost: 4200.