Angular 5+拖动选择组件

Angular 5+拖动选择组件
插件名称 ngx-drag-to-select
发布时间 2020年6月1日
插件作者 d3lm

用于Angular 5+应用程序的轻量级,快速,可配置和反应式的拖动选择组件。

特征

  • 拖动以选择
  • 捷径
  • 可订制 
  • 轻巧的
  • 易于使用
  • 准备进行AoT和SSR
  • 符合Angular封装格式
  • 包括FESM2015,FESM5和UMD捆绑包 
  • 它很快 
  • 移动友好 
  • 经过全面测试 

用法

安装库并将其添加DragToSelectModule到应用程序后,即可开始使用。

在模板中的任何位置添加该dts-select-container组件,并包装希望在此组件中选择的所有项目。

接下来,使用dtsSelectItem指令标记所有可选项目。这将每个项目与容器组件连接起来。

这是一个完整的示例:

<dts-select-container #container="dts-select-container" [(selectedItems)]="selectedDocuments" (select)="someMethod($event)">
  <ul>
    <li [dtsSelectItem]="document" *ngFor="let document of documents">{{ document.name }}</li>
  </ul>
</dts-select-container>

配置选项

本节概述了可以自定义和配置的内容。

覆盖Sass变量

您可以覆盖以下变量:

变量类型默认描述
$dts-primary颜色#7ddafc原色
$select-box-color颜色$dts-primary选择矩形的颜色
$select-box-removing-color颜色$dts-primary删除项目时选择矩形的颜色
$select-box-border-size单元2px选择矩形的边框大小
$selected-item-border布尔型true所选项目是否应该有边框
$selected-item-border-color颜色#d2d2d2所选项目的边框颜色
$selected-item-border-size单元1px所选项目的边框尺寸
$box-shadow布尔型true所选项目是否应显示阴影
$range-start-border布尔型true范围开始项是否带有边框突出显示
$range-start-border-color颜色#2196f3范围开始项目的边框颜色

如果要覆盖这些变量之一,请确保导入sass软件包之前执行此操作。

例:

// 用于覆盖选择retangle的颜色的示例
$select-box-color: red;

@import "~ngx-drag-to-select/scss/ngx-drag-to-select";

请记住,默认样式将应用到应用程序中的所有拖动选择实例。这意味着,如果您覆盖选择框的颜色并进行设置,red则所有实例都会渲染一个red选择矩形。

配置中 DragToSelectModule

该库允许您覆盖某些选项,例如

selectedClass (串)

选中时添加到项目的类。默认类是selected。请注意,如果您覆盖此选项,则将丢失默认样式,并且必须自己进行处理。

shortcuts (宾语)

ngx-drag-to-select 支持一系列快捷方式,使我们在选择项目时更轻松。

捷径默认描述
moveRangeStartshift + r移动范围开始而不选择项目
disableSelectionalt禁用选择模式以允许在拖动区域内的屏幕上选择文本
toggleSingleItemmeta向/从选择中添加或删除单个项目
addToSelectionshift范围选择,将项目添加到选择
removeFromSelectionshift + meta从选择中删除项目

您可以通过将配置对象传递到来覆盖这些选项forRoot()

这是一个例子:

import { DragToSelectModule } from 'ngx-drag-to-select';

@NgModule({
  imports: [
    DragToSelectModule.forRoot({
      selectedClass: 'my-selected-item',
      shortcuts: {
        disableSelection: 'alt+meta,d'
      }
    })
  ]
})
export class AppModule { }

这将覆盖disableSelection2个可能的快捷方式,或者alt + meta 还是d。如果您想了解有关快捷方式替代方法的更多信息,请查看部分。

注意:如果您覆盖其中一种快捷方式,则必须确保它们不会相互干扰,以确保流畅的选择体验。

修饰符

覆盖默认快捷方式时,可以使用以下修饰键:

shift alt ctrl meta

或者,您可以使用中的任何键a - z

使用时meta,它将被ctrl(对于Windows) cmd(对于Mac)代替。这允许跨平台的快捷方式。

快捷方式替代

您还可以定义其他快捷方式。为此,只需用逗号链接快捷方式。这是一个例子:

shortcuts: {
  disableSelection: 'alt+meta,shift+alt'
}

API

ngx-drag-to-select带有两个主要构建块,一个dts-select-container组件和一个dtsSelectItem指令。

dts-select-container

输入项

输入项类型默认描述
selectedItems数组/当前选择的项目的集合
selectOnDrag布尔型true拖动时是否应选择项目
disabled 布尔型false禁用选择
disableRangeSelection布尔型false禁用范围选择
disableDrag布尔型false通过使用鼠标拖动来禁用选择。可能对移动设备有用。
selectMode 布尔型false如果设置为true,则类似于快捷方式一样激活切换模式toggleSingleItem。对移动设备有用。
custom 布尔型false如果设置为true,则不会应用所选项目的所有默认样式。
selectWithShortcut布尔型false如果设置为true,则仅在单击并应用键盘快捷方式时才能选择项目

这是所有输入的示例:

<dts-select-container
  [(selectedItems)]="selectedDocuments"
  [selectOnDrag]="true"
  [disabled]="false"
  [disableDrag]="true"
  [selectMode]="true"
  [custom]="true"
  [selectWithShortcut]="false">
  ...
</dts-select-container>
  • 要保留选定的项目,可以使用双向数据绑定([()]),也就是“盒中香蕉”语法。这意味着只要选择更改,您的属性就会相应更新。它将始终反映当前选择。
  • 将表达式绑定到selectOnDrag将覆盖默认值。当此选项设置为时false,它将提高性能,但是您将用它来换取稍差的用户体验。