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.

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

fix(abc:st): fix resizeable will trigger sorting or filter #1788

Merged
merged 1 commit into from
Mar 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 2 additions & 0 deletions packages/abc/st/demo/resizable.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@ title:

> - 注意:不要忘记在 `src/styles` 下导入 `nz-resizable` Less 样式文件(`@import 'ng-zorro-antd/resizable/style/entry.less';`)
> - **不支持多表头**
> - 当与过滤、排序一同存在时调整手柄会变小

## en-US

Resize the table header base on [nz-resizable](https://ng.ant.design/experimental/resizable/en).

> - Note: Don't forget to import the `nz-resizable` Less style (`@import 'ng-zorro-antd/resizable/style/entry.less';`) file in `src/styles`.
> - **Multiple headers not supported**
> - Adjustment handles will become smaller when present with filtering and sorting

```ts
import { Component } from '@angular/core';
Expand Down
2 changes: 1 addition & 1 deletion packages/abc/st/st.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
(nzResizeEnd)="colResize($event, _c)"
>
@if ($any(!last && !$any(_c).resizable.disabled)) {
<nz-resize-handle nzDirection="right">
<nz-resize-handle nzDirection="right" (click)="_stopPropagation($event)">
<i></i>
</nz-resize-handle>
}
Expand Down
25 changes: 1 addition & 24 deletions packages/abc/st/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -81,31 +81,8 @@
}
// Title
&__has-filter {
@st-th-icon-width: 12px;
@st-filter-and-sort-gutter: 4px;
@st-filter-icon-size: @st-th-icon-width + @st-filter-and-sort-gutter;
@st-sort-size: @st-th-icon-width + @st-filter-and-sort-gutter;

.@{ant-prefix}-table-column-sorters {
padding-right: @st-filter-icon-size;
}
@{st-prefix}__filter {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
place-items: center center;
}

.@{ant-prefix}-table-filter-trigger {
height: 100%;
}

&.@{ant-prefix}-table-column-has-sorters {
@{st-prefix}__filter {
right: -(@st-sort-size + @st-filter-icon-size);
}
display: inline-flex;
}
}

Expand Down
Loading