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

请问molecule支持自定义FolderTree文件图标吗?不想用vscode原生的icon #862

Closed
resetsix opened this issue Nov 14, 2023 · 10 comments
Labels
help wanted Extra attention is needed

Comments

@resetsix
Copy link

resetsix commented Nov 14, 2023

如果不支持,是不是只能自定义工作台,用antd的文件树组件才能实现自定义图标展示

@resetsix resetsix added the help wanted Extra attention is needed label Nov 14, 2023
@resetsix resetsix changed the title 请问如何给Foldertree的加上文件图标呢? 请问molecule支持自定义FolderTree文件图标吗?不想用vscode原生的icon Nov 14, 2023
@mortalYoung
Copy link
Collaborator

如果是给 file 加图标的话,只需要在 tree 节点传 icon 即可。如果是 folder 想要加图标的话,目前暂时不支持。

@resetsix
Copy link
Author

如果是给 file 加图标的话,只需要在 tree 节点传 icon 即可。如果是 folder 想要加图标的话,目前暂时不支持。

谢谢答复。我想问一下tree节点的icon可以自定义render吗?比如我想展示tsx,ts文件图标。目前tree节点我只能渲染出vscode原生的icon,不知道是不是我自己的问题

@mortalYoung
Copy link
Collaborator

如果是给 file 加图标的话,只需要在 tree 节点传 icon 即可。如果是 folder 想要加图标的话,目前暂时不支持。

谢谢答复。我想问一下tree节点的icon可以自定义render吗?比如我想展示tsx,ts文件图标。目前tree节点我只能渲染出vscode原生的icon,不知道是不是我自己的问题

icon 的类型是如下的:

icon?: string | JSX.Element;

这里直接传 string 的话,我们会默认兜底成 vscode 的 icon,也支持 JSX 的。

@resetsix
Copy link
Author

如果是给 file 加图标的话,只需要在 tree 节点传 icon 即可。如果是 folder 想要加图标的话,目前暂时不支持。

谢谢答复。我想问一下tree节点的icon可以自定义render吗?比如我想展示tsx,ts文件图标。目前tree节点我只能渲染出vscode原生的icon,不知道是不是我自己的问题

icon 的类型是如下的:

icon?: string | JSX.Element;

这里直接传 string 的话,我们会默认兜底成 vscode 的 icon,也支持 JSX 的。

请问能给一份示例参考吗?我还有一个问题想请教一下:在文件树初始化数据的时候,是应该是直接赋值data数据还是应该传一个TreeNodeModal的实例?

下图是模拟文件树获取mock数据相关代码

code

@mortalYoung
Copy link
Collaborator

mortalYoung commented Nov 15, 2023

new TreeNodeModel({
      icon: <SparkSQLIcon style={{ color: '#519aba' }} />;
});

在文件树初始化数据的时候,是应该是直接赋值data数据还是应该传一个TreeNodeModal的实例?

更应该传 TreeNodeModel 的实例,在这个实例上,我们定义了一些属性,其中有一个 data 属性,该属性的作用就是给用户存放自定义的数据。

另外,如果想了解更多 Molecule 的使用的 Demo 的话,可以参考一下 Taier

@resetsix
Copy link
Author

new TreeNodeModel({
      icon: <SparkSQLIcon style={{ color: '#519aba' }} />;
});

在文件树初始化数据的时候,是应该是直接赋值data数据还是应该传一个TreeNodeModal的实例?

更应该传 TreeNodeModel 的实例,在这个实例上,我们定义了一些属性,其中有一个 data 属性,该属性的作用就是给用户存放自定义的数据。

另外,如果想了解更多 Molecule 的使用的 Demo 的话,可以参考一下 Taier

谢谢示例提供,看来还是我对molecule的很多 api 不太熟悉,要是官网文档能多一些配图就好了,示例基本是molecule_demo的代码片段哈哈,我这种小菜鸡就看得云里雾里。

这几天也在一直看taier代码中 molecule 相关的 api 用法,市面上使用 molecule 产品的项目太少了,网上也寻找了好久没看到合适的,我觉得等我们用熟了,可以 pr 份适合新手的文档或者向其他人推广 molecule。

在web ide中渲染 folderTree 的 file icon 通用做法是由前端去判断,在init数据时去 update icon 哈?

@mortalYoung
Copy link
Collaborator

感谢建议,我们后续针对文档中对 API 解释的部分会尽量以小和全的 Demo 形式进行。

在web ide中渲染 folderTree 的 file icon 通用做法是由前端去判断,在init数据时去 update icon 哈?

通常是前端判断的

@resetsix
Copy link
Author

感谢建议,我们后续针对文档中对 API 解释的部分会尽量以小和全的 Demo 形式进行。

在web ide中渲染 folderTree 的 file icon 通用做法是由前端去判断,在init数据时去 update icon 哈?

通常是前端判断的

非常感谢。

@resetsix
Copy link
Author

感谢建议,我们后续针对文档中对 API 解释的部分会尽量以小和全的 Demo 形式进行。

目前对文档的修改有预计的完成时间吗?

@mortalYoung
Copy link
Collaborator

目前对文档的修改有预计的完成时间吗?

目前来说计划是在 2.x 的版本的 API 稳定之后,再对文档进行修改。大概排期可能需要到年底。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants