AsideNav 的 itemArrow 支持配置 svg

This commit is contained in:
2betop 2020-06-15 14:50:45 +08:00
parent 8837f92138
commit f62a7a20d0
2 changed files with 19 additions and 3 deletions

View File

@ -1,9 +1,11 @@
import React from 'react';
import NotFound from '../../src/components/404';
import NotFound from '../../src/components/404';
import Layout from '../../src/components/Layout';
import AsideNav from '../../src/components/AsideNav';
import {AlertComponent, ToastComponent} from '../../src/components/index';
import {mapTree} from '../../src/utils/helper';
import {Icon} from '../../src/components/icons';
import '../../src/locale/en';
import {
Router,
@ -668,7 +670,9 @@ export class App extends React.PureComponent {
key="expand-toggle"
className={cx('AsideNav-itemArrow')}
onClick={e => toggleExpand(link, e)}
/>
>
<Icon icon="right-arrow-bold" className="icon" />
</span>
);
}

View File

@ -24,7 +24,7 @@
line-height: px2rem(17px);
margin-top: px2rem(2px);
&::before {
&:empty:before {
content: '';
display: inline-block;
transform-origin: center;
@ -36,10 +36,22 @@
background-repeat: no-repeat;
}
.#{$ns}AsideNav-item.is-open > a > &::before {
.#{$ns}AsideNav-item.is-open > a > &:empty:before {
transform: rotate(90deg);
color: $Layout-asideLink-onActive-arrowColor;
}
> svg {
color: $Layout-asideLink-color;
width: px2rem(10px);
height: px2rem(10px);
transform-origin: center;
transition: transform 0.2s ease;
}
.#{$ns}AsideNav-item.is-open > a > & > svg {
transform: rotate(90deg);
}
}
&-itemBadge {