首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在用户触摸时关闭FAB子菜单

,FAB代表浮动操作按钮(Floating Action Button),是一种常见的用户界面元素,通常用于展示主要操作或导航选项。FAB子菜单是指在FAB按钮周围以圆形或弧形排列的一组次要操作按钮。

关闭FAB子菜单的操作可以通过以下几种方式实现:

  1. 点击菜单外区域:当用户点击FAB子菜单以外的区域时,可以触发关闭FAB子菜单的操作。这种方式可以提供简单直观的交互体验,用户可以通过点击其他区域来关闭菜单。
  2. 点击FAB按钮:当FAB子菜单已经展开时,再次点击FAB按钮可以关闭子菜单。这种方式可以提供一种快速切换的方式,用户可以通过点击FAB按钮来打开或关闭子菜单。
  3. 滑动手势:在移动设备上,可以通过滑动手势来关闭FAB子菜单。例如,用户向上滑动屏幕时,可以触发关闭子菜单的操作。这种方式可以提供更加自然的交互方式。

FAB子菜单的关闭操作可以提高用户界面的整体易用性和可访问性,避免用户误操作或困惑。关闭FAB子菜单的方式可以根据具体的应用场景和用户需求进行选择。

以下是腾讯云相关产品和产品介绍链接地址,供参考:

  1. 云开发(CloudBase):腾讯云提供的一站式后端云服务,支持前后端一体化开发,提供云函数、云数据库、云存储等功能。详细信息请参考:https://cloud.tencent.com/product/tcb
  2. 云服务器(CVM):腾讯云提供的弹性计算服务,可快速部署应用程序和服务。详细信息请参考:https://cloud.tencent.com/product/cvm
  3. 云数据库 MySQL 版(CDB):腾讯云提供的关系型数据库服务,支持高可用、可扩展和自动备份。详细信息请参考:https://cloud.tencent.com/product/cdb_mysql

请注意,以上仅为腾讯云的部分产品示例,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一篇博客让你了解Material Design的使用

移动设备是这套设计语言的基础对象,让用户不同的平台、不同尺寸的设备上能保持一致的体验。 Material Design强调交互上的即时反馈,即对于用户的触控等行为app需要给出即时的反应。...同时Material Design要求应用给用户带入感,让用户使用时是沉浸在当前的应用当中。...android:title="暫停"/> 到现在为止,就可以实现侧滑了,最后我们添加上对应的点击事件,然后关闭菜单...CoordinatorLayout监听滑动控件的滑动通过Behavior反馈到其他控件并执行一些动画。...简单来说,就是通过协调并调度里面的控件或者布局来实现触摸(一般是指滑动)产生一些相关的动画效果。

3.3K30
  • 【译】正确使用FAB

    原文链接: Make the right FAB 原文作者: Taylor Ling 译文出自: 小鄧的简书 译者: 小鄧 校对者: 泡网编辑 状态: 完成 ?...因为指定屏幕中,会被频繁的访问(译者注:如点击,触摸等),所以,我认为正确处理FAB的每一个细节是件很重要的事情。...**不恰当的视图标高,图标略微有点大** 正确的FAB 所以,这个独具特色的按钮,材料设计中的规范是怎样的呢?从上面的这些对照中可以看出,Messenger可以说是最精准的运用了FAB。 ?...否则FAB会因为Material属性与app中其它Material元素不同而看起来有些不搭配。 关心设计细节 如果认为,这属于太挑剔或者太细微而不能引起用户的注意。...(正确把握设计的细节,可以营造积极的情绪状态,从而让产品更好用) 毕竟,作为把产品交付给用户的负责人(设计师,工程师,或者团队中的任何一个人),如果你自己都不关心细节,谁又会去做这件事呢?

    93110

    手势魅力-设置一个触摸菜单

    (touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,处理移动端点击,拖动,滑动,是不得要考虑用户触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...在这种情况下在那里是: touchstart:当你触摸DOM元素触发 touchmove:当你沿着DOM元素拖动手指触发 touchend:当你从DOM元素中移除手指触发 在这些事件中,我将使用触摸属性...这绝对不是你想要用你的手机触摸手势发生的事情,所以考虑一下:当你打开/关闭菜单,你是否有兴趣阅读滚动隐藏的内容?如果你的拖拽方向是水平的,你就不能滚动 ? 我们需要一些边界在这里!...当菜单打开,它可以关闭或保持打开状态 - 与动画一起 - 返回之前的位置 如果它关闭了,那么它可以打开或者保持关闭状态,也可以动画返回之前 if ((translateX < (-menuWidth...那么这个菜单可以根据距离打开或关闭

    1.8K40

    探索 Android Design Support Library v28 新增内容

    如果禁用, 则 检查行为与 Button 相同 app:chipIcon: 用于 Chip 中显示一个图标 ? app:closeIcon: 用于 Chip 中显示一个关闭按钮 ?...我们也可以为 Chip 实例添加监听器, 用于倾听来自用户的交互. 如果我们的 Chip 是可检查的, 那么当这个检查状态发生改变, 我们可能会希望听到....如果的确如此, 你可以使用如下的 ChipGroup 本身的属性为 Chip 视图添加一些间距: app:chipSpacing: 横纵轴方向均添加间距 app:chipSpacingHorizontal...这样做, 你需要将 ChipGroup 封装在滚动视图(如 HorizontalScrollView )中, 以便用户可以滑动正在显示的 Chip....如果附加了 FAB, 它将插入底部应用栏, 否则 FAB 将保持底部应用栏上方. ? app:fabAlignmentMode: 声明已附加到底部应用栏的FAB的位置.

    1.8K20

    微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

    //获取到前面唯一的id; If(key){ //用户左滑距离很长时会发生多次左滑事件,这里定义一个开关发生第一次之后就关闭它; Touch是获取触摸点的一些数据,touches 是一个触摸点的数组,...我们 bindtouchstart 记录到开始的点, bindtouchmove 记录到触摸结束的点,如果 X 轴滑动大于 Y 轴的,再如果结束点-开始点小于一个数值(这个数组可以自己设置,鉴于灵敏度...如果出现全部被滚动了,记得在外层加上,X 轴关闭即可。 这时候你点击左滑会出现点透效果,官方文档提供给我们一个 catch,不冒泡点击事件,即可完美解决。 点击删除事件弹出模态框供用户确定是否删除。...这里你点击取消还要记得把左滑删除按钮去掉可能用户体验会好点。 一定记得 data({ modalHidden:true }) 不然会出现一加载页面即出现了模态框。...用户已建分组点击进去的是点击顶部菜单按钮出现下拉菜单栏,这里直接使用微信提供的组件。

    1.9K40

    Figma里这样完成悬浮FAB按钮制作,半小时搞定!

    今天我们来做一个FAB按钮,此类按钮安卓设计中非常常见,它一般悬浮在页面右下角,可以快捷打开某个操作。 本课中,我们的重点是智能动画(smart animation)。...所以当你认为有必要打破这个规则。 002.命名 层命名也很重要。我们图层的名称每个状态中必须相同,智能动画才能正常工作。如果它们的名称不同,智能动画会假定图层是不同的对象。...一个按钮将是我们的主按钮,其他将是菜单按钮。我们将相应地命名每个按钮:添加(Add)、发表(Write)、媒体(Media)、语音(Speak)。...此外,由于此按钮滚动具有固定位置,因此我们可以状态更改时保持对齐。 3.组织和对齐按钮 移出菜单项并添加到操作按钮框架。确认“add”按钮层是顶层。...最后,检查固定位置,以滚动将其保持原位。 然后点击预览,一个好玩好用的FAB按钮就制作好了。

    2.4K20

    124. 精读《用 css grid 重新思考布局》

    1 引言 Flex 与 Grid 相比就像功能键盘和触摸屏。...触摸屏的控制力相比功能键盘来说就像是降维打击,因为功能键盘只能上下左右控制(x、y 轴),而触摸屏打破了布局障碍,直接从(z 轴)触达,这样 无论 UI 内部布局再复杂,都可以通过 touch 直接定位...Flex 布局有一些不受控制的智能设定,比如宽度 50% 的元素会被同级元素挤到 50% 以下,这种智能化某些场景是需要的,但由于没有提供像 Grid 的 minmax 之类的 API,所以定制型不足...比如对于上图模块,如果用 Flex 方式布局,我们可能会首先创建模块 X 作为左侧容器,元素是 A 和 B,创建模块 Y 作为右侧容器,元素是 C 以及新容器 Z,Z 容器的元素是 D 和 E。...虽然许多时候这样划分是正确的,但当这 5 个模块各自没有关联,我们创建的容器 X、Y、Z 就失去了复用性,新的组合场景我们又要重新组合一遍。

    49210

    Material Design — 菜单(Menus)

    具有动态内容的菜单可能具有其他行为,例如:将先前使用的字体放在菜单的顶部;订单可以根据用户操作进行更改。 菜单嵌套 菜单项可以显示嵌套的菜单。...理想情况下,嵌套的层级都需要做显示,因为很难用嵌套多层的菜单进行导航。 ? 菜单项例子 不可用的操作 将操作显示为不可用(如置灰)而不是将其删除,让用户知道它们可以正确的条件下存在。...将菜单放置触发菜单元素的下方会将其与上下文环境分开(如下图)。 ? 关闭菜单 可以通过点击菜单外部或点击触发菜单的元素(如果可见)来关闭菜单。 选择一个菜单项后也应该关闭菜单。...尽管它们可以显示相同的内容,但简单菜单优Simple Dialog,因为简单菜单用户当前上下文的干扰较小。 菜单项选择 选择一个选项提交选项并关闭菜单。...取消选择 触摸菜单外部或按下系统“后退”按钮,取消操作并关闭菜单。 ? 简单菜单 ·打开,简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。 当前选择的菜单项突出显示(如下图)。 ?

    5.8K100

    个人博客搭建

    可设置阅读文章做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块(推荐使用 Gitalk) 集成了不蒜统计、谷歌分析(Google Analytics)和文章字数统计等功能...支持首页的音乐播放和视频播放功能 2.3 新增加特性: 修改了原主题的一些很多bug 加入图片懒加载功能,根目录配置文件开启和关闭 增加留言板功能 关于板块,加入简历功能页 增加视听[视觉听觉影音...如果你需要二级菜单则可以原基本菜单导航的基础上如下操作 需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children) children下创建二级菜单的 名称...前提是主题的 config.yml 中激活了 verifyPassword 选项 toc true 是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。...不蒜统计和谷歌分析(Google Analytics) 默认特色图的集合。

    2.2K140

    Hexo+Github 博客搭建之 Matery 主题安装配置篇

    可设置阅读文章做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块(推荐使用 Gitalk) 集成了不蒜统计、谷歌分析(Google Analytics)和文章字数统计等功能...建议修改两个 per_page 的分页条数值为 6 的倍数,如:12、18 等,这样文章列表各个屏幕下都能较好的显示。 如果你是中文用户,则建议修改 language 的值为 zh-CN。...并且主题的 _config.yml 文件中,第 19 至 21 行的“菜单”配置,取消关于留言板的注释即可。...找不到你想要的页面 :(" --- 菜单导航配置 配置基本菜单导航的名称、路径url和图标icon. 1.菜单导航名称可以是中文也可以是英文(如:Index或主页) 2.图标icon 可以Font...如果你需要二级菜单则可以原基本菜单导航的基础上如下操作 1.需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children) 2.children下创建二级菜单

    1.2K30

    最新版水果FL Studio21新版本更新全解析!80项更新与改进!

    关闭此功能,则在撤消被删除。·翻转铅笔按钮-将笔的辅助按钮的行为与主按钮交换。·备用撤消-安装在新计算机上,默认立即打开。...导出(Export)-打开目标文件夹系统文件浏览器中自动选择渲染的文件。文件(菜单)File (menu)-有一个新的“更多”菜单,最多显示50个最近的项目。...触摸控制器(Touch Controller)-当音符数据从钢琴卷帘窗播放触摸控制器上可视化来自所选通道的音符活动。键入值(Type in value)-选择显示当前值的更多信息。...“类型以筛选”菜单选项,用于确定是否键入字母筛选或选择项目。具有多列的视图中搜索选择第一个文件夹。搜索结果显示具有匹配名称的文件夹。...您现在可以预览窗口中选择要显示的缓冲区·压缩(Zip)-压缩项目中添加自定义效果。·触摸控制器(Touch controllers)-支持“添加窗口”列表中的触摸控制器窗口。

    3.4K30

    FL Studio21最新中文版本全新功能详细介绍

    关闭此功能,则在撤消被删除。·翻转铅笔按钮-将笔的辅助按钮的行为与主按钮交换。·备用撤消-安装在新计算机上,默认立即打开。...导出(Export)-打开目标文件夹系统文件浏览器中自动选择渲染的文件。文件(菜单)File (menu)-有一个新的“更多”菜单,最多显示50个最近的项目。...触摸控制器(Touch Controller)-当音符数据从钢琴卷帘窗播放触摸控制器上可视化来自所选通道的音符活动。键入值(Type in value)-选择显示当前值的更多信息。...“类型以筛选”菜单选项,用于确定是否键入字母筛选或选择项目。具有多列的视图中搜索选择第一个文件夹。搜索结果显示具有匹配名称的文件夹。...您现在可以预览窗口中选择要显示的缓冲区·压缩(Zip)-压缩项目中添加自定义效果。·触摸控制器(Touch controllers)-支持“添加窗口”列表中的触摸控制器窗口。

    3.7K20

    Material Design技术分享

    一、环境   Material环境是基于三维立体空间,每一个处于界面显示的UI对象都有一个三维坐标(x,y,z),一般来说在手机平面显示的位置相对于用户来讲只有平面xOy,但是有了z轴的加入,用户视角就变得更加立体...,一旦CoordinatorLayout的触摸事件需要被响应,就会拦截到view的触摸事件,并且后面的触摸事件流会被发送到behavior中的ontouchevent;后者是触摸事件的集中消费,如果behavior...enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志,你的视图只能以最小高度进入,只有当滚动视图到达顶部才扩大到完整高度。   ...,默认是三横变箭头 3、home菜单的点击事件   看代码中有一系列针对DrawerLayout的操作,除了实现DrawerLayout.DrawerListener的接口外,还有针对菜单键点击的事件处理...中创建的,吊起新的activity或者从activity返回,用来管理场景的退出和共享元素的退出。

    2.2K60

    Mac高效-自定义悬浮菜单

    日常工作会打开各种各样的应用,或者已经打开的应用里再激活某个应用,怎样才能在最短时间找到该应用并打开或激活呢?...下面介绍如何解决快速切换应用的难点: 设置自定义操作菜单栏 上一篇介绍了两种解决办法 为特定应用定义快捷键 这种方式的缺点是需要自己记住每个应用的快捷键,操作必须是快捷键触发,如果是单手操作电脑就比较不方便...使用KM把应用设置成快速操作菜单 这种方式的缺点是必须由快捷键触发,单手不方便;还有菜单被呼出后鼠标点击空白的地方,菜单不会消失,只能通过随意按一个键或者直接点击关闭才能使菜单消失;最后是菜单栏不支持自定义...),是一款 Mac 辅助应用,可以用来代替默认的系统操作方式(组合键、修饰键、手势等),其目的是方便用户创造出更适合自身习惯的操作行为,是 Mac 上非常强大的触摸板辅助工具。...这里主要使用BTT强大的触摸板手势,再配合显示浮动WebView的操作实现单手方便快捷的切换应用和其它任何你想要操作 任何地方快速唤起菜单栏 这里设置了双击触摸板唤起菜单栏,还定义了一个快捷键唤起菜单

    1.9K20

    Android 一款十分简洁、优雅的日记 APP

    RecyclerView 讲的很不错的博客 RecyclerView 使用详解(一) 要想使用 RecyclerView来实现我们想要实现的效果,先让我们建立一个item_rv_diary作为 RecyclerView 的布局...right="10dp" android:top="10dp" /> 写好布局之后...悬浮菜单看起来逼格还是挺高的, 而且观赏性也算是比较高,我是从 Github 找的一个库,来实现这个悬浮菜单的,不得不说,搞这个悬浮菜单真的花了我不少时间, 有些库要么不能调节菜单的大小,要么不能调节菜单图案...="normal" app:fab_title="FAB 2" app:fab_icon = "@drawable/save_new"...", null, values); values.clear(); 2、日记的删除 在这里我为了防止日记被误删,就做了一个对话框,当点击删除按钮的时候,便会跳出这个对话框询问用户是否真的要删除该日记

    64131

    使用iPad将iPad用作Mac的第二台显示器

    将指针悬停在绿色按钮上出现的菜单 ---- 使用边栏 侧边栏将常用控件放在iPad屏幕的侧面。...使用 Sidecar偏好 设置关闭边栏或更改其位置。 ? 使用Sidecar的iPad ? image iPad 上全屏查看窗口,点按可显示或隐藏菜单栏 。 ?...使用 Sidecar偏好 设置关闭触摸栏或更改其位置。 ---- 使用手势进行滚动和其他操作 使用Sidecar,iPad上的多点触摸手势仍然可用。...仅在使用Sidecar,Sidecar应用才会显示主屏幕上。 ? image ---- 使用Sidecar偏好设置 选择Apple菜单>“系统偏好设置”,然后单击“ Sidecar”。...边车偏好 显示侧边栏:iPad屏幕的左侧或右侧显示侧边栏,或将其关闭。 显示触摸栏: iPad屏幕的底部或顶部显示 触摸栏,或将其关闭

    13.5K00
    领券