VisActor / VisActor/VTable

[Feature] ListTable.menu 右键菜单html渲染模式是否可以支持设定类名,以便覆写菜单样式

Open
#2,032 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature good first issue
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

What problem does this feature solve?

目前ListTable.menu推荐使用html渲染模式,contextMenuItems 中可以传入 MenuListItem,其定义如下:

type MenuListItem =
  | string
  | {
      text?: string;
      type?: 'title' | 'item' | 'split';
      menuKey?: string;
      icon?: Icon;
      selectedIcon?: Icon;
      stateIcon?: Icon;
      children?: MenuListItem[];
    };

从文档看当前版本 option 中没有 menuStyle 的配置项,无法通过配置项修改右键菜单的样式,但是可以通过在样式中增加对应的样式来覆盖默认样式,例如:

.vtable__menu-element{
    background-color: #fff;
    min-width: 160px;

    .vtable__menu-element__item:not(.vtable__menu-element__split){
      height: 24px;
      padding: 1px 8px;

      .vtable__menu-element__content{
        font-size: 14px;
        font-weight: 400;
        color: #555;
        white-space: nowrap;
      }
    }
  }

但仍然存在一些问题,无法区分主菜单和子菜单,因为右键菜单的html结构中无法指定类名,子菜单也没有类似sub开头的类名来标识它是子菜单,因此无法针对各级菜单做定制化样式

What does the proposed API look like?

1.希望配置项中能有提供类似 menuStyle 的配置项
2.希望 MenuListItem 能够增加类名属性,便于开发者在样式覆写时能够准确定位到菜单和子菜单

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the ListTable.menu configuration, the MenuListItem type, and the HTML context-menu renderer. Trace how main menus and submenus are generated, then verify that the proposed style and class-name configuration can distinguish them and that the resulting menu markup supports the requested customization.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.