AntDVue ant-collapse change directions of arrows with clean CSS-CodePudding

How do i change the ant-collapse vue arrow directions?

So i encountered a problem where i could not change the arrow directions without the !important (that im not a fan of..) so we found a solution for this problem at my work thx to Epuñan.

https://css-tricks.com/override-inline-styles-with-css/

so ultimately the first time i used the ant-collapse component i set the arrows as props, up and down respectively, but now i wanted to do it real fine, and i did! here's the solution

CodePudding user response：

Well the are two posible solutions, one is pretty and the other one not so much.. lets go with the prettiest first for time's sake.

`::v-deep .ant-collapse-item > .ant-collapse-header .anticon {
  transform: rotate(90deg);
  transition: transform 0.5s ease-in-out;
}`

Here we are setting the arrow default behaviour, so here it should point downward.. but the thing is that when the collapse is active, behaviour of the arrow is set by an inline style so it was kind of difficult to get there.. this is the solution:

 ::v-deep .ant-collapse-item-active > .ant-collapse-header .anticon {
  transform: rotate(180deg);
  transition: transform 0.5s ease-in-out;
}

we search for the active class in the collapse component ant just the transform property to whatever we want.

Ugly solution:

&[aria-expanded='true'] {
  .ant-collapse-arrow > svg {
  transform: rotate(180deg) !important;
  transition: all 0.5s ease-in-out;
      }
   }

overwriting with an important..

i hope this helps anyone with this obstacle- Take care, Az

CodePudding user response：

great, thanks!

just to keep in record, this solution could be extensive not just for Vue or React, Less or Sass, but for Ant Design System:

.ant-collapse-item > .ant-collapse-header .anticon {
  transform: rotate(90deg);
}

.ant-collapse-item-active > .ant-collapse-header .anticon {
  transform: rotate(180deg);
}