antd-react-Dropdown下拉菜单（上下箭头切换动画）

pd非让搞一个这个下拉框上下箭头切换的动画，没办法谁让咱们是打工人呢（虽然心里是一万个愿意，但是也得硬着头皮上呀）。

代码实现如下：

1.引入并使用组件

import { Menu, Dropdown } from 'antd';
import { DownOutlined, UpOutlined} from '@ant-design/icons'; //上箭头和下箭头的图标     <Dropdownoverlay={menu}trigger={['click']}onClick={handleDropDown}><a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>更多操作{expand?<DownOutlined style={{fontSize: '10px'}}/>:<UpOutlined style={{fontSize: '10px'}}/>}</a></Dropdown>

2.添加状态，用于判断展示上（下）箭头。

  const [expand, setExpand] = useState(true);

3.添加事件，点击时候切换状态。

  const handleDropDown=()=>{setExpand(!expand);}

效果的话就自行拿去测试。。。

antd-react-Dropdown下拉菜单（上下箭头切换动画）相关推荐

ElementPlus Dropdown下拉菜单右侧箭头动态切换
直接套用elementplus的效果是这样的想要实现的效果是在点击时同时右边的小箭头也会旋转且不要太生硬 1)通过控制点击事件旋转恢复这个组件本身封装的时候是点击空白处下拉框也会收起来所以单 ...
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
解决bootstrap dropdown 下拉菜单有时候不能显示的问题参考文章: (1)解决bootstrap dropdown 下拉菜单有时候不能显示的问题 (2)https://www.cnbl ...
html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
了解elementUI的Form 表单和Dropdown 下拉菜单
Form 表单由输入框.选择器.单选框.多选框等控件组成,用以收集.校验.提交数据 el-form el-form-item el-select el-option <el-form :inl ...
vue、Dropdown 下拉菜单、Dropdown属性事件、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性事件
vue.Dropdown 下拉菜单.Dropdown属性事件.vue Dropdown 全部下拉菜单.vue Dropdown 全部属性事件设计规则何时使用代码演示 1.基本 2.右键菜单 3. ...
关于element-plus的Dropdown 下拉菜单属性的修改
** 关于element-plus的dropdown的下拉菜单的样式修改 ** 因为所做的界面和element-plus所提供的颜色不相搭配,所以进行了颜色的修改 1.首先是下拉框本身可以看见原本的 ...
vue实现Dropdown下拉菜单
1.需求点击按钮出现下拉菜单 2.思路为按钮绑定点击事件showPicker() 在按钮下另起一个div标签,用v-show绑定一个属性值isShowDropdown 在methods里定义sho ...
自定义DropDown下拉菜单
说明: 一个简单的js下拉框,因为目前都不怎么用到jquery了,也好久没写过jquery了,现在框架很多,基本上也用不到,只是以这个简单的例子玩一下. 先来看下效果图: 简单的下拉弹框下拉选项,支持 ...
用CSS写出一个下拉菜单小箭头
向右小箭头 width: 13px; height: 13px; border: 1px solid #0F1520; border-top: none; border-left: none; tra ...
【Unity-UGUI控件全面解析】| Dropdown 下拉菜单组件详解

antd-react-Dropdown下拉菜单（上下箭头切换动画）

antd-react-Dropdown下拉菜单（上下箭头切换动画）相关推荐

最新文章

热门文章