开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular material 2 fab按钮没有浮动，它正在滚动内容，这可能是什么原因？

Angular Material 2是一个用于构建现代Web应用程序的UI组件库，其中包括了一些常用的UI组件，如按钮、卡片、对话框等。Fab按钮是Angular Material 2中的一个浮动操作按钮，用于快速触发常用操作。

如果在使用Angular Material 2的Fab按钮时，它没有浮动且在滚动内容时，可能有以下几个原因：

CSS样式问题：Fab按钮的浮动效果可能受到CSS样式的影响。可以检查是否为Fab按钮添加了正确的CSS类和样式，以确保其浮动效果正常。
容器元素问题：Fab按钮可能没有正确放置在容器元素中。Fab按钮应该放置在一个具有相对或绝对定位的容器元素中，以便在滚动内容时保持浮动效果。
滚动容器问题：如果Fab按钮所在的容器元素是一个滚动容器（如div或ion-content），可能需要设置相应的CSS属性来启用滚动。例如，可以设置overflow属性为auto或scroll，以便在内容溢出时显示滚动条。
JavaScript代码问题：可能存在与Fab按钮相关的JavaScript代码问题。可以检查是否有其他JavaScript代码干扰了Fab按钮的浮动效果，或者是否需要在滚动时更新Fab按钮的位置。

总结起来，解决Fab按钮没有浮动且在滚动内容时的问题，需要检查CSS样式、容器元素、滚动容器和JavaScript代码等方面，确保它们都正确配置和使用。如果问题仍然存在，可以进一步查看官方文档或寻求相关技术支持来解决该问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎TKE：https://cloud.tencent.com/product/tke
人工智能平台AI Lab：https://cloud.tencent.com/product/ai
物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
移动开发平台MPS：https://cloud.tencent.com/product/mps
云存储COS：https://cloud.tencent.com/product/cos
区块链服务BCS：https://cloud.tencent.com/product/bcs
元宇宙服务：https://cloud.tencent.com/product/metaspace

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Floating Action Button-Android M新控件

概述浮动操作按钮是Material Design 中推出的控件之一浮动操作按钮 (简称 FAB) 是: “一个特殊的promoted操作案例。...浮动操作按钮代表一个屏幕之内最基本的额操作。关于FAB按钮的更多信息和使用案例请参考谷歌的官方设计规范。运行效果 ?...其中src属性指的是浮动按钮所要的图标。..."/> Issues 2: Android 5.0 中阴影显示再看一遍上面的截图，会发现 Kitkat 中有阴影显示，而 Lollipop 中并没有。...调整按钮类型浮动操作按钮有两种大小：默认的，这应该是最常用的情况，以及mini的，这应该只用于衔接屏幕上的其他元素。可以把FAB的按钮类型调整为“正常”或者“mini” ...

1.5K4 0

终于等到你，新的虚拟键盘API 即将到来，快来先睹为快吧！

这是一个具有以下内容的用户界面： Sticky header 固定头部 Sticky floating action button (FAB) 粘性浮动操作按钮当用户将焦点放在输入框上时，虚拟键盘将会显示出来...浏览器将向上滚动以使输入框在键盘上方，因此粘性标题和浮动按钮将消失。它看起来与以下内容相似：这是移动浏览器中的默认行为。...浮动操作按钮在这个例子中，我们有一个浮动操作按钮，它位于页面的右下角。当键盘激活时，浮动按钮应该移动到键盘上方。就像第一个例子中一样，浮动按钮将位于键盘下方。....fab { /* other styles */ bottom: max(2rem, 1rem + env(keyboard-inset-height, 0rem)); } 这是它的工作原理：...我们有一个联系页面，其中包含长内容和表单输入。如果我们选择让虚拟键盘覆盖页面内容，那么将无法滚动到表单的最后。在这种情况下，我不建议键盘覆盖内容。明智地使用它。

3582 0

如何用最经典的迪士尼动画设计原则赋予 UI 灵性？

当然，除了按钮之外，它还可以体现在很多其他的交互元素上。 2、预备动作预备动作，通常指的是提前告知用户即将发生的事情，让设计和用户的预期贴合起来。...水平滚动的控件通常会展示出某些元素的一部分，让用户意识到可以滑动交互。 3、时间控制在传统的动画当中，时间控制决定了帧数的绘制数量和内容。帧数越多，动画就越流畅，相应的内容变化也可能更慢。...Material Design 当中的 FAB 动效就是一个最典型的夸张式的动效，它最终的静态效果是很吸引人的，因为它将一个按钮的色彩扩展到整个界面，并且在所有元素的最上层，强调到了极致。...使用 FAB 动效来进行夸张在支付类APP中使用夸张的效果来强化 9、跟随动作和重叠动作没有任何一种物体会突然停滞，通常运动是一个接着一个的。还有一个更加简洁的表述为「动者恒动」。...想象一下一只兔子从高出跳下，当兔子开始运动的时候，它的耳朵会随着运动而自然地偏移和摆动，当兔子落地的时候，身体基本静止之后，它的耳朵可能还在动。前一种情况是「跟随动作」，视差滚动就是典型的跟随动作。

9543 0

flutter 起步

你可以将它类比成为网页中的html标签，且它自带路由、主题色，title等功能。...body - 当前界面所显示的主要内容 Widget。floatingActionButton - Material 设计中所定义的 FAB，界面的主要功能按钮。...body - 当前界面所显示的主要内容 Widget。floatingActionButton - Material 设计中所定义的 FAB，界面的主要功能按钮。...elevation → double - 控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0，当内容滚动 SliverAppBar...默认由Material 控件的ThemeData.canvasColor决定，具体实现可以看下面代码2.BottomNavigationBarType.shifting（代表tab是浮动的）(1).底部

4.5K2 0

Android Material Design系列之FloatingActionButton和Snackbar

今天主讲的Material Design系列的两个控件都不难，所以一起讲了，分别是FloatingActionButton和Snackbar。...FloatingActionButton顾名思义就是一个浮动按钮。...FloatingActionButton之所以出现这么久了，不太火，不太常用，估计跟他悬浮有关，容易挡住其他内容。...directTargetChild, final View target, final int nestedScrollAxes) { // 确保是竖直判断的滚动...其实我感觉你们可以还会想说，点击一下这个悬浮按钮，动画弹出多个按钮这个效果怎么实现，这里我就不讲了，github上有太多跟这个相关的例子了。

1.6K6 0

一文彻底搞清楚 Material Design

Translation Z 是动态的，当创建一个项目，增加一个按钮，当按下按钮会阴影变大了。实际上 Elevation 并没有变化，而是 Translation Z 属性在变化。...按钮的动作效果，默认 FAB 有 6dp 的Elevation，当按下按钮时 translation Z 值开始增加。...，可能会有不同的海拔高度，这主要和环境深度有关。...一般控件的标准海拔应用栏：4dp 按钮：静止状态 2dp 按下状态：8dp 浮动操作按钮（FAB）静止：6dp 按下：12dp 卡片静止：2dp 浮动状态：8dp 菜单和子菜单：菜单：8dp...子菜单：9dp（每个子菜单+1）对话框 24dp 抽屉式导航 16dp 刷新指示器 3dp 快速入口/搜索栏静止2dp 滚动3dp snackbar 6dp 开关 1dp 物体的层级结构所有的物体都是根据父

3K1 0

探索 Android Design Support Library v28 新增内容

Material Button Material Button 是一个小部件, 可用于在你的应用程序的用户界面中显示材质样式的按钮....这样做时, 你需要将 ChipGroup 封装在滚动视图(如 HorizontalScrollView )中, 以便用户可以滑动正在显示的 Chip....Bottom App Bar 底部应用栏是一个新的组件, 它允许我们在布局的底部显示一个类似工具栏的组件. 这使我们能够以比标准工具栏更容易交互的方式向用户显示组件. ?...如果附加了 FAB, 它将插入底部应用栏, 否则 FAB 将保持在底部应用栏上方. ? app:fabAlignmentMode: 声明已附加到底部应用栏的FAB的位置....本文译自: https://medium.com/exploring-android/exploring-the-v28-android-design-support-library-2c96c6031ae8

1.9K2 0

CoordinatorLayout与滚动的处理

---- 概览 CoordinatorLayout实现了多种Material Design中提到的滚动效果。...目前这个框架提供了几种不用写动画代码就能工作的方法，这些效果包括：让浮动操作按钮上下滑动，为Snackbar留出空间 ? 扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。 ?...自动上移的效果，app:layout_behavior的为自定义的效果，当下滑时，fab消失，上滑时fab显示，详情请查看本人博客 Floating Action Button-Android M新控件...support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior...support.design.widget.CollapsingToolbarLayout> ---- Custom Behaviors （自定义Behavior）在CoordinatorLayout 与浮动操作按钮中我们讨论了一个自定义

7822 0

详解android特性之CoordinatorLayout用法探析实例

它是Material风格的重要组件, 作为布局的顶层控件，协调(Coordinate)其他组件, 实现联动。...下面来看一个最简单的例子，CoordinatorLayout与FloatingActionButton的使用，它可以使浮动按钮上下移动，为Snackbar流出空间来展示。...string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout 这个特殊的view...通过效果显示，当视图在滚动的时候，ToolBar滚出了屏幕，为内容区域留出了更大空间。...以上就是本文的全部内容，希望对大家的学习有所帮助。

9594 1

Material Design —悬浮响应式按钮（Buttons: Floating Action Button）

Material Design链接：悬浮响应式按钮 ?...避免对次要和消极的操作使用浮动操作按钮，包括以下内容： ·存档或清空 ·不明确的行为 ·警告或错误 ·有限制的任务，如剪切文本 ·应该在工具栏中的控件，如音量控制或更改字体颜色浮动操作按钮不包含应用栏...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。...变形动画应该是可逆的并且可以将新的材料片转换回浮动动作按钮。 ? 全屏浮动动作按钮可以转换为跨越整个屏幕的新材料。这种戏剧性转变通常与创建新内容相关联。...因此，它往往不具有撤消转换或可逆动画的方法。 ? ---- 大屏幕大屏幕悬浮响应式按钮可以附加到扩展的应用程序栏。 ?

5.8K9 0

这四种最最常见的按钮类型，设计师必须掌握

如果您使用投影，请确保将这种样式应用于所有按钮类型。扁平按钮与加了阴影的按钮 2.幽灵按钮（空心按钮）幽灵按钮，也称为空心按钮，是没有填充的按钮。只有按钮的轮廓可见。什么时候使用？...最后但并非最不重要的一点是，幽灵按钮是视觉上的多功能按钮，这意味着它们可以在不同类型的背景上很好地工作。它使幽灵按钮适用于深色和浅色主题。...浅色和深色背景上的幽灵按钮 3.单一图形按钮顾名思义，仅图标按钮是没有标签的按钮；它仅由图标表示。...在悬停时显示工具提示以描述图标按钮 4.悬浮按钮悬浮按钮（FAB-Floating Action Button），是一种由 Google Material Design 推广的按钮。...我进行的可用性测试表明，当用户不理解 FAB 图标的含义时，他们不会与之交互，这对您的应用程序来说可能是一个关键问题。 FAB 仅用于一项操作。谷歌表示，当按下时，FAB 可能包含更多相关操作。

3.7K1 0

Flutter lesson 7: Flutter组件之基础组件（三）

floatingActionButton 这是一个浮动按钮，注意参数就是一个child（一般是一个Icon），其次就是 onPressed 点击事件。...在右下角增加一个浮动按钮 floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () =...> {}, ), floatingActionButtonLocation 前面讲的是设置一个浮动按钮，这个浮动按钮的位置默认是在右下角。...具体的内容还要自己实现。...总结 Flutter的基础的组件就讲到这里，涉及到的大都是常用的组件，部分东西没有涉及到或者说没有详细说明，可能是因为我认为不用过多说明，可能是因为没有太多时间，也可能是因为我自己也不看明白，如果你不懂

1.5K5 0

CoordinatorLayout使用全解析

都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。...相反，如果它的底部75%可见，那么它将完全展开。...，没有view能覆盖它。...CoordinatorLayout各种特效接下来是介绍CoordinatorLayout常用的一些效果 CoordinatorLayout实现浮动操作按钮效果效果如下：只要使用CoordinatorLayout...浮动操作按钮有一个默认的 behavior来检测Snackbar的添加并让按钮在Snackbar之上呈现上移与Snackbar等高的动画。

2.1K2 0

Material Design — 按钮（ Buttons）

按钮（ Buttons） Material Design链接：按钮 ?...浮动按钮（Raised button）：点击后会产生浮起与墨水扩散效果的常见的方形按钮，。扁平按钮（Flat button）：点击后产生墨水扩散效果，但是没有浮起的效果。 ? 三种标准按钮 ?...左：页面内容多右：为内容分界 ? 背景比较嘈杂的时候使用浮动按钮浮动按钮就像一块放在另一张纸上的材料 - 点击时浮起并填充颜色。 ? 按钮海拔浮动按钮的默认海拔为2dp。...请勿在固定按钮区域使用浮动按钮。 ? 添加分隔后，底部固定按钮可用于滚动的提示框。 ?...当用户与按钮交互时，Menus会覆盖按钮并显示可能的状态。按下某个状态会取消Menus并更新按钮以显示此新状态。在下拉菜单中滚动的方式与Menus滚动的方式相同。 ? ?

3.9K16 0

AngularDart Material Design 输入顶

小心依靠它。 floatingLabel bool 标签是否“浮动”。如果为false，则在文本输入框中时标签会消失。如果为真，则它会“漂浮”在输入之上。...如果没有在文本框中输入任何内容，则显示默认文本。当用户输入文本时，它会消失。...小心依靠它。 floatingLabel bool 标签是否“浮动”。如果为false，则在文本输入框中时标签会消失。如果为真，则它会“漂浮”在输入之上。...超过maxRows的任何内容都会导致输入滚动。 required bool 是否需要输入。如果没有输入文本，则必需的输入将在第一次失去焦点时显示验证错误。...将此设置为true会更改行为，以便在更改选项或选项时： 1.选择中的第一个选定值在选项中有效 2.如果选择没有选定值，则选项中没有任何活动 inputText String

5.3K4 0

【软件开发规范七】《Android UI设计规范》

2.3 动画 Material Design 重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。...浮动按钮(Raised button)，常见的方形纸片按钮，点击后会产生墨水扩散效果。扁平按钮(Flat button)，点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。 ...编辑悬浮响应按钮编辑浮动按钮编辑扁平按钮编辑最重要且随处用到的操作，建议使用悬浮按钮。信息较多时，选用凸起按钮可以有效突出重要操作，但注意纸片不要叠太多层。...主要内容是有着重要区别的内容，典型的如图片。次要内容可以是一个动作按钮或者文本。编辑为瓦片内容提供一个默认图片。网格只能垂直滚动。单个瓦片不支持滑动手势，也不鼓励使用拖放操作。...编辑滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。编辑存在浮动按钮时，小标题要让出位置，与文字对齐。

5.1K2 0

Flutter 全栈式——页面框架

对于没有相关基础的人，在正式学习App的UI之前，建议先了解Material Design相关的知识关于Material Design设计风格的资料 MaterialApp MaterialApp代表使用...floatingActionButton Widget Material中所定义的FAB，是一个悬浮的功能按钮 floatingActionButtonLocation FloatingActionButtonLocation...打开侧滑菜单时遮盖在主要内容区的蒙层颜色 backgroundColor Color 内容的背景颜色。...bottomNavigationBar Widget 显示在底部的导航栏 bottomSheet Widget 底部永久性显示的提示框 resizeToAvoidBottomInset bool 页面浮动控件部分自动调整...flexibleSpace显示在AppBar的下方，高度和AppBar高度一样，可以实现一些特殊的效果 [cf22fa2aav.png] 文档地址示例 BottomAppBar BottomAppBar

2.9K3 0

Flutter 组件集录 | 从图标按钮看组件封装

显示的内容组件为 BackButtonIcon ，说明其会根据平台来决定图标样式。另外，可以通过 color 入参设置返回按钮的颜色。...的效果，感觉这种水波纹要比 Material2 的好看一些，对于 IconButton 而言，会根据图标颜色显示背景色，长按时也不再是扩散的水波纹，而是背景色的变化。...因为 Scaffold 在构建逻辑中有一些和 FloatingActionButton 联动的效果，比如浮动按钮方位、动画等。...extended-fab 中查看详情，也可以在该网站中看一下其他 material3 的风格： ---- 它继承自 StatelessWidget ，表明它是基于已有组件封装构建逻辑，从而形成的新组件...可能有人会疑惑，使用函数不是也能封装组件吗，通过函数参数也能控制构建的表现，它和分离组件有什么区别呢？其实两者在本质上并没有什么区别，目的是一致的：封装特点创建中的构建逻辑。

1.2K1 0

都 9012了，该选择 Angular、React，还是Vue？

以下是Angular 7 针对性能、命令行工具和Material Design组件的优化项：性能方面：Angular 7 新增的虚拟滚动优化了单页面的呈现方式，对于那些吸引访问者继续向下滚动的clickbait...Angular 7 虚拟滚动命令行提示：当在CLI中键入某些命令，如 ng new 或者 ng add @angular/material 时，Angular 7 会提示用户，让你找到像路由或SCSS...，您无法选择不使用它们，这好像一把双刃剑，在带来强大功能模块的同时，也使得Angular 变得越来越笨重。...尽管没有得到谷歌和Facebook等科技巨头的支持，但自2018 年以来，Vue一直受到开发者的广泛关注。从去年几大主流前端开发框架的热度来看，大多数知晓 Vue 的开发者都表示有兴趣学习它。...也许，那些已经熟练掌握Angular和React前端框架的开发人员也应该花些时间去了解一下这个简单、小巧、省心的前端框架，希望下面的内容能对你有所帮助。

1.9K2 0

Angular 11正式发布：加入webpack 5，升级至TS 4.0，不再支持IE 9 和10

我们的承诺是：未来，所有新报告的问题都将在 2 周内完成分类。...有关这些 API 和其他新特性的更多细节和示例，请务必查看 Angular Material Test Harnesses 的文档： http://material.angular.io/cdk/test-harnesses.../overview Component Test Harnesses 我们对构建器阶段报告做了一些更改，现在它更好用了。...这意味着在将来的版本中，linting Angular 项目的默认实现会不可用。...请务必检查一下相关内容，确保你使用的是最新的 API，并遵循我们建议的最佳实践。路线图我们还更新了路线图，帮助大家了解我们当前的优先事项。这篇文章中的一些公告是路线图中正在进行的项目更新。

3.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭