FAB效果如何实现

2025-05-21 10:26:25

1、FAB交互效果如下图:点击加号按钮弹出更多当前页可用功能,此效果中包含组件为四个图标组件。主要利用状态的特性制作。

FAB效果如何实现

2、具体做法:1、编辑全局状态制作加号按钮。

FAB效果如何实现

3、拖入「加号」图标,外边框尺寸设置为圆形45*45,图标大小24,图标背景色#ff5722,前景色白色。

FAB效果如何实现

4、制作其余三个按钮。

FAB效果如何实现

5、「收藏」、「编辑」、「返回肝捐错暄」按钮的外边框尺寸为圆形40*40,图标大小19,背景色#ff5722,不透明度8,前景色白色。

FAB效果如何实现

6、在状态1中将制作好的四个按钮按如图位置摆放,将「收藏」、「编辑」、「返回」三个图标旋转一定角度,并设置为隐藏。

FAB效果如何实现

7、在状态1中将制作好的四个按钮按如图位置摆放,将「收藏」、「编辑」、「返回」三个图标旋转一定角度,并设置为隐藏。

FAB效果如何实现
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢