英文:
Changing TreeGrid Dropdown icon
问题
有没有办法更改Vaadin中TreeGrid的展开图标？
我已附上了树的当前UI。我想要将“+”添加为展开树的图标，而不是普通的向右箭头，当树被展开时，图标应更改为“-”，而不是向下箭头...
当前使用虚拟数据提供程序的TreeGrid（https://i.stack.imgur.com/wHUUI.png）
我尝试了各种CSS设置来实现这一点，但似乎都不起作用。
英文:
Is there a way to change the expand icon for TreeGrid in Vaadin?
I have attached the current UI of the tree.I want to add '+' as icon for expanding the tree instead of normal right pointing arrow and when the tree is expanded the icon should change to '-' instead of down-pointing arrow...
Current Treegrid with dummy data provider (https://i.stack.imgur.com/wHUUI.png)
I tried various CSS settings to achieve this but none seems to work
答案1
得分: 1
以下是翻译好的内容：
它们最初并不打算被更改。但有有限的选项可以使用CSS进行自定义，例如，如果您想要将小箭头更改为Lumo图标中的加号/减号图标，请将以下内容添加到您的styles.css文件中。如果您在样式中已导入了字体图标，那么在此处也可以通过定义font-family并使用\xxxx代码来打开更多选项。
vaadin-grid-tree-toggle[expanded]::part(toggle)::before {
content: var(--lumo-icons-minus);
transform: unset;
}
vaadin-grid-tree-toggle::part(toggle)::before {
content: var(--lumo-icons-plus);
}
英文:
They are not purposed to be changed originally. But there are limited options to customize them with CSS, e.g. if you want to change the caret to plus/minus icons from Lumo Icons. Add these to your styles.css. If you happen to have imported to font icon in your styles, then it opens more options by defining the font-family here too and using \xxxx code for that icon.
vaadin-grid-tree-toggle[expanded]::part(toggle)::before {
content: var(--lumo-icons-minus);
transform: unset;
}
vaadin-grid-tree-toggle::part(toggle)::before {
content: var(--lumo-icons-plus);
}
答案2
得分: 0
这是一个更改图标并在父级和子级之间添加线条的插件：https://vaadin.com/directory/component/explorer-tree-grid
英文:
There is an addon that changes the icon and add lines between the parent and the children: https://vaadin.com/directory/component/explorer-tree-grid
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论