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

[WIP][Table] support table highlight row #1591

Merged
merged 2 commits into from
Sep 10, 2023
Merged

[WIP][Table] support table highlight row #1591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00bef51
feat(web): table highlight row
Sep 9, 2023
6b100bc
feat(web): table relative
Sep 9, 2023
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
7 changes: 7 additions & 0 deletions docs/web/api/table.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ Simple table with data switched using pagination. Use border lines and zebra str

{{ base }}

### Highlight Row Table

set table property `activeRowType` to allow table row highlight.
You try it with different keyboards, for example: ArrowUp/ArrowDown/Space/Shift/ESC.

{{ highlight }}

### Customizable Style Table

- Use the table property `rowClassName` to set the row class name.
Expand Down
7 changes: 7 additions & 0 deletions docs/web/api/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@ spline: data

{{ base }}

### 行高亮表格

支持鼠标点击或者键盘操作高亮表格行，支持仅高亮一行，或者高亮多行。
键盘操作说明：表格聚焦后，上下键操作切换高亮行，ESC 清空所有高亮行，空格键切换当前停留行高亮状态，Shift 连续选中高亮行。

{{ highlight }}

### 可自定义样式的表格

- 使用表格属性 `rowClassName` 设置行类名。
Expand Down
6 changes: 6 additions & 0 deletions js/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,9 @@ export enum EKeyboardDirection {
right = 39,
down = 40,
}

export const ARROW_DOWN_REG = /ArrowDown/i;
export const ARROW_UP_REG = /ArrowUp/i;
export const ESCAPE_REG = /Escape/i;
export const SPACE_REG = /Space/i;
export const SHIFT_REG = /Shift/i;
24 changes: 23 additions & 1 deletion style/web/components/table/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
font: @table-font;
color: @table--text-color;
background-color: @table-bg;
position: relative;

/** loading need to be top of fixed columns */
.@{prefix}-loading--full {
Expand Down Expand Up @@ -323,7 +324,8 @@
tr {
transition: background-color @anim-duration-base linear;

&:hover {
&:hover,
&.@{prefix}-table__row--hover:not(&.@{prefix}-table__row--active) {
background-color: @table-highlight-dark-bg-color;
}
}
Expand Down Expand Up @@ -454,6 +456,11 @@
color: @table-row-disabled-color;
}

/** 表格行点击高亮 */
.@{prefix}-table__row--active {
background-color: @brand-color-light;
}

// 复杂表头容器
.@{prefix}-table__cell--title {
display: flex;
Expand Down Expand Up @@ -485,6 +492,21 @@
}
}

/** 表格行点击高亮悬浮态 */
.@{prefix}-table.@{prefix}-table--hoverable {
.@{prefix}-table__row--active {
&:hover {
background-color: @brand-color-light-hover;
}
}

&.@{prefix}-table__row--active-multiple {
.@{prefix}-table__row--active.@{prefix}-table__row--hover {
background-color: @brand-color-light-hover;
}
}
}

// 表头右侧图标设计规范：有边框时，排序图标靠近右侧边框；无边框时，排序图标紧跟标题内容
.@{prefix}-table--bordered {
.@{prefix}-table__cell--sortable,
Expand Down