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

代码块的折叠头 #547

Closed
Roywhite opened this issue May 31, 2024 · 9 comments
Closed

代码块的折叠头 #547

Roywhite opened this issue May 31, 2024 · 9 comments
Labels
enhancement New feature or request

Comments

@Roywhite
Copy link

一个很棒的想法

代码块自动折叠时,用户第一次使用时很难感知到代码块已经被折叠了或者可以折叠,希望后续能有优化
image

@imzbf
Copy link
Owner

imzbf commented May 31, 2024

是的,尝试过用箭头符号提示,但是样式上很奇怪,各位有好的提示方案多指点

@imzbf imzbf added the enhancement New feature or request label May 31, 2024
@mingchiuli
Copy link

是的,尝试过用箭头符号提示,但是样式上很奇怪,各位有好的提示方案多指点

可以加一个文案提示,如果是折叠状态就显示点击展开之类的

@imzbf
Copy link
Owner

imzbf commented Jun 1, 2024

是的,尝试过用箭头符号提示,但是样式上很奇怪,各位有好的提示方案多指点

可以加一个文案提示,如果是折叠状态就显示点击展开之类的

应该放哪儿,之前尝试的是折叠后的下面

@mingchiuli
Copy link

是的,尝试过用箭头符号提示,但是样式上很奇怪,各位有好的提示方案多指点

可以加一个文案提示,如果是折叠状态就显示点击展开之类的

应该放哪儿,之前尝试的是折叠后的下面

Screenshot 2024-06-01 at 22 35 24

个人感觉就在这里放一个展开代码的按钮就行,不过点击范围触发的区域范围可以和现在保持一致

@Roywhite
Copy link
Author

Roywhite commented Jun 3, 2024

image
这种展示效果怎么样呢?

@imzbf
Copy link
Owner

imzbf commented Jun 3, 2024

  1. 在小屏的时候就会挤在一起了,而且会新增多的语言配置,首先考虑icon,但是icon放在这里方向没有友好的指示效果,如果没有合适的再优先考虑这个方案
Screenshot 2024-06-01 at 22 35 24
  1. 效果是好的,但是这个组件的代码模块的一个特点是左上方会展示三个小圆点,虽然没有实际的用处,如果采用这种方式,就会失去这个视觉效果

image

@Roywhite
Copy link
Author

Roywhite commented Jun 4, 2024

image
image
https://icones.js.org/collection/all?s=expand
https://icones.js.org/collection/all?s=collapse

可以找同一风格集合的图标试试效果
image

@imzbf
Copy link
Owner

imzbf commented Jun 4, 2024

暂定方案:

录屏2024-06-04 11 39 47

@imzbf
Copy link
Owner

imzbf commented Jun 4, 2024

^4.16.0中尝试

@imzbf imzbf closed this as completed Jun 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants