2分钟教你实现环形/扇形菜单(基础版)
61 浏览量
2020-11-21
19:38:40
上传
评论
收藏 40KB PDF 举报
2分钟教你实现环形分钟教你实现环形/扇形菜单扇形菜单(基础版基础版)
前言前言
项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。
这个组件是基于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);
width: @centerIconSize;
height: @centerIconSize;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
cursor: pointer;
color: white;
top: 0;
left: 0;
transition: all linear 0.5s;
transform: translate(0, 0);
// display: none;
visibility: hidden;
}
.sector-list {
资源评论
