简单做了个 Naive UI px 转 rem 的小工具 Make a tool for Naive UI px to convert rem

[a81n9]

Clear and concise description of the problem

简单做了个 Naive UI px 转 rem 的小工具
Make a tool for Naive UI px to convert rem

Naive UI Rem Converter

Suggested solution

1. 输入基准值并点击 Convert 按钮
   Enter the benchmark value and click the Convert button.

2. 可在右侧切换组件名称及主题
   You can switch the component name and theme on the right side.

3. 复制配置到 NConfigProvider 的 theme-overrides 属性
   Copy the configuration to the theme-overrides attribute of NConfigProvider.

Alternative

No response

Additional context

#4250 #6096 #4738 #3940 #3841 #3288 #3108 #2102 #802

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[a81n9]

@07akioni 感觉可以在 NThemeEditor 中集成此功能

[a81n9]

Space: {
  gapSmall: '0.25rem 0.5rem',
  gapMedium: '0.5rem 0.75rem',
  gapLarge: '0.75rem 1rem',
},

发现 NSpace 设置 rem 不起作用

[a81n9]

"Flex": {
    "gapSmall": "0.25rem 0.5rem",
    "gapMedium": "0.5rem 0.75rem",
    "gapLarge": "0.75rem 1rem"
  }

NFlex 设置 rem 也不生效

好像涉及到 gap 属性的值设置 rem 都不生效

[jc840031139]

设置之后 select面板不会展示

[jahnli]

Thanks to you, I moved it to the discussion area for more people to see.

[Rolaka]

Some uses of VirtualList cannot be converted, example:

naive-ui/src/_internal/select-menu/src/SelectMenu.tsx

Lines 518 to 529 in 942de11

	<VirtualList
	ref="virtualListRef"
	class={`${clsPrefix}-virtual-list`}
	items={this.flattenedNodes}
	itemSize={this.itemSize}
	showScrollbar={false}
	paddingTop={this.padding.top}
	paddingBottom={this.padding.bottom}
	onResize={this.handleVirtualListResize}
	onScroll={this.handleVirtualListScroll}
	itemResizable
	>

The itemSize and padding here are solved from the styles using seemly's depx, by：Number(value.slice(0, value.length - 2));

So the Select component can override the InternalSelection 和InternalSelectMenu，Forced to specify px as the fix, example：

naive-ui/themes/tusimple/src/theme-overrides-light.ts

Lines 246 to 258 in 942de11

	InternalSelection: {
	heightMedium: '32px',
	fontSizeMedium: '16px',
	paddingSingle: '0 36px 0 12px'
	},
	InternalSelectMenu: {
	height: '290px',
	optionHeightMedium: '38px',
	paddingSmall: '4px 0',
	paddingMedium: '6px 0',
	paddingLarge: '6px 0',
	paddingHuge: '8px 0'
	},

A dirtier option might be to traverse the theme for convert after getting the screen size at init time.