p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/components/App.jsx
View File

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

16
scss/layout/_aside.scss
View File

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