Skip to content

Commit

Permalink
feat(module:table): support td break-word display (#4273)
Browse files Browse the repository at this point in the history
  • Loading branch information
vthinkxie authored Oct 11, 2019
1 parent 51f4713 commit 93ab305
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 2 deletions.
15 changes: 15 additions & 0 deletions components/table/demo/break-word.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
order: 26
title:
en-US: Break Word
zh-CN: 折行显示
---

## zh-CN

`td` 内容超出 `nzWidth` 设定值时使用 `nzBreakWord` 折行显示

## en-US

Insert line breaks within words with `nzBreakWord` to prevent text from overflowing its content box

54 changes: 54 additions & 0 deletions components/table/demo/break-word.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'nz-demo-table-break-word',
template: `
<nz-table #fixedTable [nzData]="listOfData" [nzScroll]="{ x: '1150px', y: '240px' }">
<thead>
<tr>
<th nzWidth="150px" nzLeft="0px">Full Name</th>
<th nzWidth="100px" nzLeft="150px">Age</th>
<th nzWidth="100px">Column 1</th>
<th nzWidth="100px">Column 2</th>
<th nzWidth="100px">Column 3</th>
<th nzWidth="100px">Column 4</th>
<th nzWidth="100px">Column 5</th>
<th nzWidth="100px">Column 6</th>
<th nzWidth="100px">Column 7</th>
<th nzWidth="100px">Column 8</th>
<th nzWidth="100px" nzRight="0px">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of fixedTable.data">
<td nzBreakWord nzLeft="0px">{{ data.name }}</td>
<td nzBreakWord nzLeft="150px">{{ data.age }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord>{{ data.address }}</td>
<td nzBreakWord nzRight="0px">
<a>action</a>
</td>
</tr>
</tbody>
</nz-table>
`
})
export class NzDemoTableBreakWordComponent implements OnInit {
listOfData: any[] = [];

ngOnInit(): void {
for (let i = 0; i < 100; i++) {
this.listOfData.push({
name: `Edward King ${i} Edward King ${i} Edward King ${i}`,
age: 32,
address: `LondonLondonLondonLondonLondon`
});
}
}
}
2 changes: 1 addition & 1 deletion components/table/demo/dynamic-settings.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 26
order: 27
title:
en-US: Dynamic Settings
zh-CN: 动态控制表格属性
Expand Down
1 change: 1 addition & 0 deletions components/table/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ Style property
| `[nzLeft]` | Left pixels, used to fixed column to left | `string` | - |
| `[nzRight]` | Right pixels, used to fixed column to right | `string` | - |
| `[nzAlign]` | Specify how content is aligned | `'left' \| 'right' \| 'center'` | - |
| `[nzBreakWord]` | Whether insert line breaks within words | `boolean` | `false` |

Other property

Expand Down
1 change: 1 addition & 0 deletions components/table/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ Table 组件同时具备了易用性和高度可定制性
| `[nzLeft]` | 左侧距离,用于固定左侧列 | `string` | - |
| `[nzRight]` | 右侧距离,用于固定右侧列 | `string` | - |
| `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - |
| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` |

其他

Expand Down
4 changes: 3 additions & 1 deletion components/table/nz-td.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ import { isNotNil, InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/
host: {
'[style.left]': 'nzLeft',
'[style.right]': 'nzRight',
'[style.text-align]': 'nzAlign'
'[style.text-align]': 'nzAlign',
'[style.word-break]': `nzBreakWord ? 'break-all' : ''`
}
})
export class NzTdComponent implements OnChanges {
Expand All @@ -45,6 +46,7 @@ export class NzTdComponent implements OnChanges {
@Input() @InputBoolean() nzExpand = false;
@Input() @InputBoolean() nzShowExpand = false;
@Input() @InputBoolean() nzShowCheckbox = false;
@Input() @InputBoolean() nzBreakWord = false;
@Output() readonly nzCheckedChange = new EventEmitter<boolean>();
@Output() readonly nzExpandChange = new EventEmitter<boolean>();

Expand Down

0 comments on commit 93ab305

Please sign in to comment.