实用折叠小三角

UI如图：展开与折叠

import styles from './index.scss';

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d92ac001ba904824addd12837cab9b7c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=22&h=41&s=281&e=png&b=ffffff)
export interface IProps {
  show: boolean;
  name:string
  toggleList: () => void;
}
const ToggleIcon = (props: IProps) => {
  return (
    <>
      <div className={styles['label-title']} onClick={props.toggleList}>
        <div
          className={
            props.show ? styles['labelTitleIconShow'] : styles['labelTitleIconHide']
          }></div>
          <div className={styles['title-name']}>{props.name}</div>
      </div>
    </>
  );
};

export default ToggleIcon;

@mixin box-common {
  width: 0;
  height: 0;
  margin-left: 5px;
  margin-top: 5px;
  cursor: pointer;
  border: 4px solid transparent;
}

.label-title {
  font-size: 17px;
  font-weight: 700;
  padding: 10px 0;
  cursor: pointer;
  .labelTitleIconShow {
    @include box-common;
    border-top: 6px solid #c3cad9;
  }
  .labelTitleIconHide {
    @include box-common;
    border-left: 6px solid #c3cad9;
  }
}