前言
项目需要用到环形菜单,初略在网上找了一下,没有找到合适的,于是自己写了一个很简单的,后续再优化。
这个组件是基于react,但是原理都一样。
展开效果如下:
实现
css(less)
@centerIconSize: 30px;
.flex(@justify: flex-start, @align: center) {
justify-content: @justify;
align-items: @align;
display: flex;
}
.sector-menu-wrapper {
position: relative;
width: @centerIconSize;
margin: auto;
.center-icon {
.flex(center);
width: @centerIconSize;
height: @centerIconSize;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
color: white;
cursor: pointer;
}
.sector-item {
position: absolute;
.flex(center);
w