- Ngx-Bootstrap 教程
- Ngx-Bootstrap - 主页
- Ngx-Bootstrap - 概述
- Ngx-Bootstrap - 环境设置
- Ngx-Bootstrap - 手风琴
- Ngx-Bootstrap - 警报
- Ngx-Bootstrap - 按钮
- Ngx-Bootstrap - 轮播
- Ngx-Bootstrap - 折叠
- Ngx-Bootstrap - DatePicker
- Ngx-Bootstrap - 下拉菜单
- Ngx-Bootstrap - 模态框
- Ngx-Bootstrap - 分页
- Ngx-Bootstrap - 弹出窗口
- Ngx-Bootstrap - 进度条
- Ngx-Bootstrap - 评级
- Ngx-Bootstrap - 可排序
- Ngx-Bootstrap - 选项卡
- Ngx-Bootstrap - 时间选择器
- Ngx-Bootstrap - 工具提示
- Ngx-Bootstrap - Typeahead
- Ngx-Bootstrap 有用资源
- Ngx-Bootstrap - 快速指南
- Ngx-Bootstrap - 有用的资源
- Ngx-Bootstrap - 讨论
Ngx-Bootstrap - 可排序
ngx-bootstrap 可排序组件提供了一个可配置的可排序组件,并支持拖放。
可排序组件
选择器
BS-可排序
输入
fieldName - 字符串,如果输入数组由对象组成,则为字段名称。
itemActiveClass - 字符串,活动项目的类名称。
itemActiveStyle - { [键:字符串]:字符串;},活动项目的样式对象。
itemClass - 字符串,项目的类名称
itemStyle - 字符串,项目的类名
itemTemplate - TemplateRef<any>,用于指定自定义项目模板。模板变量:item和index;
placeholderClass - 字符串,占位符的类名
placeholderItem - 字符串,占位符项目,如果集合为空,将显示该项目
placeholderStyle - 字符串,占位符的样式对象
wrapperClass - 字符串,项目包装器的类名
wrapperStyle - { [键:字符串]:字符串;},项目包装器的样式对象
输出
onChange - 在数组更改(重新排序、插入、删除)时触发,与 ngModelChange 相同。返回新项目集合作为有效负载。
例子
由于我们要使用可排序,因此我们必须更新ngx-bootstrap 评级章节中使用的 app.module.ts 以使用SortableModule和DraggableItemService。
更新 app.module.ts 以使用 SortableModule 和 DraggableItemService。
应用程序模块.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 { }
更新 styles.css 以使用可排序组件的样式。
样式.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; }
更新 test.component.html 以使用可排序组件。
测试.component.html
<bs-sortable [(ngModel)]="items" fieldName="name" itemClass="sortableItem" itemActiveClass="sortableItemActive" wrapperClass="sortableWrapper"> </bs-sortable>
更新 test.component.ts 中相应的变量和方法。
测试组件.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 { } }
构建和服务
运行以下命令启动角度服务器。
ng serve
服务器启动并运行后。打开http://localhost:4200。