怎么设置让鼠标只在一定区域内,鼠标移动范围扩大怎么设置

首页 > 经验 > 作者:YD1662022-11-06 03:20:35

三、按钮大小

1. 按钮宽度

怎么设置让鼠标只在一定区域内,鼠标移动范围扩大怎么设置(9)

(1)由文字宽度决定

一般情况下,按钮的宽度随文字宽度而变化,而非固定尺寸,这样有利于按钮宽度的扩展。

(2)由容器决定

下左图,“发布视频”按钮宽度由左侧的导航栏决定,因为导航栏不随浏览器的宽度变化而变化,所以“发布视频”按钮也不会变化。

下右图,“立即邀约”按钮的宽度取决于“博主-选择卡片”的业务组件,并且会随着浏览器的宽度。

怎么设置让鼠标只在一定区域内,鼠标移动范围扩大怎么设置(10)

那么什么时候由文字宽度决定,由容器决定呢?

建议单个填充按钮、轮廓按钮的宽度所在的容器小于“3个栏目的 2个槽的宽度”时,优先使用由容器决定。

2. 按钮高度

实际项目需求中,不同场景用到的按钮的高度也会不同。将通用按钮划分为大、中、小,按钮高度分别对应着40px、32px、24px。

在B端的后台一般优先使用中尺寸的按钮高度,因为大尺寸的按钮过高,提升了屏占比。

怎么设置让鼠标只在一定区域内,鼠标移动范围扩大怎么设置(11)

四、按钮状态

按钮一共有6种状态普通、悬浮、点击、激活、不可用、加载中。

怎么设置让鼠标只在一定区域内,鼠标移动范围扩大怎么设置(12)

上一页1234下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.