CODEWITHSUNDEEP
angularprimeng
zathura
zathura

Reputation: 71

Changing colors of icons in tree node

As you can see in my stackblitz demo, I implemented a tree with checkboxes. Now, I want to change the colors of circles for every node. For example, I want to make the circle red for Documents, black for Pictures and yellow for Movies. How can I do this?

https://stackblitz.com/edit/primeng-treeselection-demo-ozpvr2?file=src/app/app.component.html

Upvotes: 0

Views: 1170

Answers (2)

Djamel eddine CHAHRAT
Djamel eddine CHAHRAT

Reputation: 145

best way is to do that is to put your css class or primeng (bootstrap) predefined CSS

for example i'm using bootstrap class, you can use you class directly...

{
  key: '0',
  label: 'Folder',
  data: 'Node 0',
  expandedIcon: 'fa fa-folder-open text-warning',
  collapsedIcon: 'fa fa-folder text-danger'
}

Upvotes: 0

Gecko
Gecko

Reputation: 1344

Apply these styles to the styles.css and you will be golden:

.p-tree-container p-treenode .pi.pi-circle-on:before {
  color: black;
}

.p-tree-container > p-treenode:first-of-type .pi.pi-circle-on:before {
  color: red;
}

.p-tree-container > p-treenode:last-of-type .pi.pi-circle-on:before {
  color: yellow;
}

Simple css pseudo selectors.

The reason you would put this is the styles.css and not in the app.component.css is because the app.component.css cannot alter styles of nested components (well, not easily anyway). Putting styles in the styles.css applies to the entirety of the app.

Edited stackblitz: Stackblitz

Upvotes: 1

Related Questions