[Feature] ListTable.menu 右键菜单html渲染模式是否可以支持设定类名,以便覆写菜单样式
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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