基于react实现的简易CSS扇形菜单代码是什么
Admin 2022-05-24 群英技术资讯 757 次浏览
前言
项目需要用到环形菜单,初略在网上找了一下,没有找到合适的,于是自己写了一个很简单的,后续再优化。
这个组件是基于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 { &.sector-list-active { transition: all linear 0.5s; .sector-item { .flex(center); transition: all linear 0.5s; transform: translate(0, 0); visibility: visible; &:first-child { transform: translate(0, -@centerIconSize * 1.5); } &:nth-child(2) { transform: translate(-@centerIconSize * 1.5, 0); } &:nth-child(3) { transform: translate(0, @centerIconSize * 1.5); } } } } }
SectorMenu.js
import React from 'react'; export default class SectorMenu extends React.Component { state = { direction: 'left', sectorMenuVisible: false, centerIconSize: 30, sectorItemSize: 30, } /** * 显示环形菜单 */ showSectorMenu = () => { const { sectorMenuVisible } = this.state; this.setState({ sectorMenuVisible: !sectorMenuVisible, }) } onClickSectorMenuItem = (index) => { const { sectorMenuItemFunctions } = this.props; if (!sectorMenuItemFunctions || typeof(sectorMenuItemFunctions[index]) !== 'function') { return; } sectorMenuItemFunctions[index](); } getSectorJsx = () => { const { sectorMenuItems } = this.props; if (!sectorMenuItems || !Array.isArray(sectorMenuItems) || sectorMenuItems.length === 0) { return; } const styles = {}; const { sectorMenuVisible } = this.state; return sectorMenuItems.map((item, i) => { // const styles = { // transform: translate(0, -centerIconSize * 2); // }; return (<div className={`sector-item ${sectorMenuVisible && 'sector-item-active'}`} style={styles} onClick={() => this.onClickSectorMenuItem(i)} key={i} > {item} </div>) }); } render() { const { sectorMenuVisible } = this.state; return ( <div className="sector-menu-wrapper"> <div className="center-icon" onClick={this.showSectorMenu}> { sectorMenuVisible ? 'x' : '···' } </div> <div className={`sector-list ${sectorMenuVisible && 'sector-list-active'}`}> {this.getSectorJsx()} </div> </div> ) } }
调用
<SectorMenu sectorMenuItems={['A1', 'A2', 'A3']} sectorMenuItemFunctions={[function () {console.log(0)}, function () {console.log(1)}, function () {console.log(2)}]} />
期望
本来是想写成灵活分布,在怎么计算位置这里稍稍卡了一下,项目时间紧,改天抽空优化一下
踩坑
过渡动画一直没有用,后来才知道是我在sector-item这个类里使用了display:none导致的,改用visibility属性就可以了。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了html/css中float浮动的用法实例详解,需要的朋友可以参考下
用H5怎样写一个简单的2048游戏?有不少朋友对此感兴趣,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。
css中,可利用“border-collapse”属性消除表格间的空格,该属性可设置表格间的边框是否合并,当属性的值为collapse时,可消除表格间的空格并合并边框,语法“表格元素{border-collapse:collapse;}”。
这篇文章主要给大家分享CSS计数器的内容,可能一些朋友不是很了解CSS计数器是什么以及CSS计数器怎样使用,在下文小编会给大家详细的介绍CSS计数器及其用法,下面跟随小编一起来学习一下吧。
这篇文章主要介绍了html table实现复杂表头的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008