Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(module:transfer): use nzOneWay to make Transfer the one way style #8717

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(module:transfer): use nzOneWay to make Transfer the one way style #8717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/transfer/demo/advanced.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 2
order: 4
title:
zh-CN: 高级用法
en-US: Advanced
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/can-move.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 4
order: 6
debug: true
title:
zh-CN: 二次校验
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/custom-item.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 3
order: 5
title:
zh-CN: 自定义渲染行数据
en-US: Custom datasource
Expand Down
16 changes: 16 additions & 0 deletions components/transfer/demo/one-way.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
order: 1
title:
zh-CN: 单向样式
en-US: One Way
---

## zh-CN

通过 `nzOneWay` 将 Transfer 转为单向样式。

## en-US

Use `nzOneWay` to make Transfer the one way style.


46 changes: 46 additions & 0 deletions components/transfer/demo/one-way.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { Component, OnInit } from '@angular/core';

import { TransferItem } from 'ng-zorro-antd/transfer';

@Component({
selector: 'nz-demo-transfer-one-way',
template: `
<nz-transfer
[nzDataSource]="list"
[nzDisabled]="disabled"
[nzTitles]="['Source', 'Target']"
(nzSelectChange)="select($event)"
[nzSelectedKeys]="['0', '2', '3']"
nzOneWay
(nzChange)="change($event)"
></nz-transfer>
<div style="margin-top: 8px;">
<nz-switch [(ngModel)]="disabled" nzCheckedChildren="disabled" nzUnCheckedChildren="disabled"></nz-switch>
<div></div>
</div>
`
})
export class NzDemoTransferOneWayComponent implements OnInit {
list: TransferItem[] = [];
disabled = false;

ngOnInit(): void {
for (let i = 0; i < 20; i++) {
this.list.push({
key: i.toString(),
title: `content${i + 1}`,
disabled: i % 3 < 1
});
}

[2, 3].forEach(idx => (this.list[idx].direction = 'right'));
}

select(ret: {}): void {
console.log('nzSelectChange', ret);
}

change(ret: {}): void {
console.log('nzChange', ret);
}
}
2 changes: 1 addition & 1 deletion components/transfer/demo/search.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 1
order: 2
title:
zh-CN: 带搜索框
en-US: Search
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/status.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 7
order: 11
title:
zh-CN: 自定义状态
en-US: Status
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/table-transfer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 5
order: 8
title:
zh-CN: 表格穿梭框
en-US: Table Transfer
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/demo/tree-transfer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 6
order: 9
title:
zh-CN: 树穿梭框
en-US: Tree Transfer
Expand Down
3 changes: 2 additions & 1 deletion components/transfer/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
### nz-transfer:standalone

| Property | Description | Type | Default |
| ----------------------- |-----------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |-----------------------|
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |-----------------------|
| `[nzDataSource]` | Used for setting the data source. Except for the elements whose keys are `direction: 'right'` prop, or using `nzTargetKeys` prop. | `TransferItem[]` | `[]` |
| `[nzDisabled]` | Whether the transfer is disabled | `boolean` | `false` |
| `[nzTitles]` | A set of titles that are sorted from left to right. | `string[]` | `['', '']` |
Expand All @@ -42,6 +42,7 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';
| `[nzCanMove]` | A function to determine what items should be moved (by default all checked items are moved). please refer to the case. | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
| `[nzSelectedKeys]` | A set of keys of selected items. | `string[]` | - |
| `[nzTargetKeys]` | A set of keys of elements that are listed on the right column. | `string[]` | - |
| `[nzOneWay]` | Display as single direction style | `boolean` | `false` |
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
| `(nzChange)` | A callback function that is executed when the transfer between columns is complete. | `EventEmitter<TransferChange>` | - |
| `(nzSearchChange)` | A callback function which is executed when search field are changed | `EventEmitter<TransferSearchChange>` | - |
Expand Down
49 changes: 25 additions & 24 deletions components/transfer/doc/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,31 @@ import { NzTransferModule } from 'ng-zorro-antd/transfer';

### nz-transfer:standalone

| 参数 | 说明 | 类型 | 默认值 |
| ----------------------- |------------------------------------------------------------------------------------------------------| ------------------------------------------------------ |----------------|
| `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys` | `TransferItem[]` | `[]` |
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
| `[nzTitles]` | 标题集合，顺序从左至右 | `string[]` | `['', '']` |
| `[nzOperations]` | 操作文案集合，顺序从下至上 | `string[]` | `['', '']` |
| `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | `object` | - |
| `[nzItemUnit]` | 单数单位 | `string` | `'项目'` |
| `[nzItemsUnit]` | 复数单位 | `string` | `'项目'` |
| `[nzRenderList]` | 自定义渲染列表，见示例 | `Array<TemplateRef<void> \| null>` | `[null, null]` |
| `[nzRender]` | 每行数据渲染模板，见示例 | `TemplateRef<void>` | - |
| `[nzFooter]` | 底部渲染模板，见示例 | `TemplateRef<void>` | - |
| `[nzShowSelectAll]` | 是否显示全选框 | `boolean` | `true` |
| `[nzShowSearch]` | 是否显示搜索框 | `boolean` | `false` |
| `[nzFilterOption]` | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(inputValue: string, item: TransferItem) => boolean` | - |
| `[nzSearchPlaceholder]` | 搜索框的默认值 | `string` | `'请输入搜索内容'` |
| `[nzNotFoundContent]` | 当列表为空时显示的内容 | `string` | `'列表为空'` |
| `[nzCanMove]` | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
| `[nzSelectedKeys]` | 设置被选中的 key 集合 | `string[]` | - |
| `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - |
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
| `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter<TransferChange>` | - |
| `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
| `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
| 参数 | 说明 | 类型 | 默认值 |
|-------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------|----------------|
| `[nzDataSource]` | 数据源，其中若数据属性 `direction: 'right'` 将会被渲染到右边一栏中或使用 `nzTargetKeys` | `TransferItem[]` | `[]` |
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
| `[nzTitles]` | 标题集合，顺序从左至右 | `string[]` | `['', '']` |
| `[nzOperations]` | 操作文案集合，顺序从下至上 | `string[]` | `['', '']` |
| `[nzListStyle]` | 两个穿梭框的自定义样式，等同 `ngStyle` | `object` | - |
| `[nzItemUnit]` | 单数单位 | `string` | `'项目'` |
| `[nzItemsUnit]` | 复数单位 | `string` | `'项目'` |
| `[nzRenderList]` | 自定义渲染列表，见示例 | `Array<TemplateRef<void> \| null>` | `[null, null]` |
| `[nzRender]` | 每行数据渲染模板，见示例 | `TemplateRef<void>` | - |
| `[nzFooter]` | 底部渲染模板，见示例 | `TemplateRef<void>` | - |
| `[nzShowSelectAll]` | 是否显示全选框 | `boolean` | `true` |
| `[nzShowSearch]` | 是否显示搜索框 | `boolean` | `false` |
| `[nzFilterOption]` | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(inputValue: string, item: TransferItem) => boolean` | - |
| `[nzSearchPlaceholder]` | 搜索框的默认值 | `string` | `'请输入搜索内容'` |
| `[nzNotFoundContent]` | 当列表为空时显示的内容 | `string` | `'列表为空'` |
| `[nzCanMove]` | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
| `[nzSelectedKeys]` | 设置被选中的 key 集合 | `string[]` | - |
| `[nzTargetKeys]` | 显示在右侧框数据的 key 集合 | `string[]` | - |
| `[nzOneWay]` | 展示为单向样式 | `boolean` | `false` |
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
| `(nzChange)` | 选项在两栏之间转移时的回调函数 | `EventEmitter<TransferChange>` | - |
| `(nzSearchChange)` | 搜索框内容时改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
| `(nzSelectChange)` | 选中项发生改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |

#### TransferItem

Expand Down
Loading