文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

尝试最适合您的app和按钮所在屏幕的变换。 触发 悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动的动画向外扩展导致UI变化。 工具栏 浮动动作按钮可以在按下时变换成工具栏。...如果悬浮响应式按钮变形为工具栏，则该工具栏应包含相关操作。 ? 工具栏中的操作需关联 Speed dial 按动悬浮响应式按钮可以甩出相关动作。 菜单被唤起后，该按钮应保持在屏幕上。...在同一地点点击应激活最常用的操作或关闭打开的菜单。 ? 悬浮响应式按钮可以转换为包含所有动作的单张材料。 ? 一般规则是，按下时至少有三个选项，但不能超过六个，包括原始悬浮响应式按钮目标。...该列表不应包含无关的操作。 ? 变形 浮动操作按钮可以转换为属于应用程序结构的一部分材料。 这种戏剧性的变化突出了按钮所能实现的动作。 悬浮响应式按钮变形时，以有逻辑的方式在开始和结束位置之间转换。...例如，不要通过其他材料。 变形动画应该是可逆的并且可以将新的材料片转换回浮动动作按钮。 ? 全屏 浮动动作按钮可以转换为跨越整个屏幕的新材料。 这种戏剧性转变通常与创建新内容相关联。

5.8K90

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

2.9 组件（Components） 底部导航（Bottom navigation） ​编辑 ​编辑 显示效果 ​编辑 标准示例 ** 底部动作条（Bottom Sheets） ** ​...浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。 扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。 ​...卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。 ​...列表（Lists） ​编辑 列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。 列表由单一连续的列构成，该列又等分成相同宽度称为行（rows）的子部分。行是瓦片（tiles）的容器。...编辑 简单一根横线就能代表输入框，可以带图标 ​编辑 激活状态和错误状态，横线的宽度变为2dp，颜色改变 输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。 ​

5.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Material Design — 按钮（ Buttons）

    三种标准按钮实例 选择按钮样式 选择按钮样式取决于按钮的优先级，屏幕上的组件数量和屏幕布局。...---- 下拉按钮（Dropdown buttons） 移动端下拉按钮 下拉按钮 下拉按钮可在多个选项中进行选择。 该按钮显示当前状态和向下箭头。...点击菜单中的任意一个选项将会引导到对应的设置页面。 分段式下拉菜单按钮 分段式下拉菜单按钮有两个区域: 当前状态和下拉箭头。点击当前状态会触发状态相应的动作。...点击当前状态位置会触发相应的动作并且当前状态会变成可编辑。点击下拉箭头会显示所有状态。 ? 桌面下拉 桌面应用栏规格 ?...图标切换 图标适用于切换按钮，允许选择或取消选择单个选项，例如向项目添加或移除星标。 他们最好位于应用栏，工具栏，动作按钮或切换。 图标切换可能会在其触摸目标范围外显示有界或无界的墨水扩散反应波纹。

    3.9K160

    Flutte部件目录-Material Components 顶

    实现Material Design指南的视觉，行为和运动丰富的小部件。 应用程序结构和导航 按钮 输入和选择 对话框，弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...FloatingActionButton 浮动操作按钮是一个圆形图标按钮，它悬停在内容上以提升应用程序中的主要操作。...浮动动作按钮最常用于Scaffold.floatingActionButton字段。 ? FlatButton 平面按钮是在材料组件部件上打印的部分，通过填充颜色对触摸作出反应。 ?...信息显示 Image 一个显示图像的小部件。 ? Icon 材质设计图标。 ? Chip 一个Material Design芯片。 芯片代表小块中的复杂实体，如联系人。 ?...DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品中。 DataTable小部件实现了这个组件。 ? Card 材料设计卡片。 卡片有稍微圆角和阴影。 ?

    9.5K40

    测试人必备的10款实用谷歌插件，压箱分享！

    2 说明 点击Chrome右上角的CSSViewer插件按钮，这时候就可以把鼠标在网页中进行浮动，从而找到需要看到的CSS属性，当浮动到一个元素上的时候，CSSViewer插件会自动以弹出窗口的形式，...提醒用户该元素的详细CSS内容，包括字体大小、CSS类名、背景颜色、宽度、高度等。...二 Visual Inspector 1 简介 Visual Inspector这款插件可以高效的帮助前端页面重构，高度视觉还原，也方便测试时进行UI走查，能快速发现页面和视觉稿的差异，减少大量和设计师的沟通成本...中每个组件的data、props、computed等多种属性和方法，为我们项目的开发与调试提供了很多的便利 。...2 说明 通过它我们可以查看应⽤程序的 React 组件分层结构，⽽不是神秘的浏览器 DOM 结构表⽰。

    1.9K20

    C++ Qt开发：ToolBar与MenuBar菜单组件

    自定义小部件： 除了工具按钮，工具栏还支持添加自定义的小部件，例如搜索框、进度条等，以满足特定需求。 样式和布局： 可以通过设置样式和布局来定制工具栏的外观，包括工具按钮的样式、大小和排列方式。...setToolButtonStyle(Qt::ToolButtonStyle style) 设置工具按钮的样式，可以是文本和图标一起显示、只显示图标、只显示文本等。...setActiveAction(QAction *action) 设置活动动作，该动作将在菜单栏上显示为活动状态。...()可以实现将ToolBar组件放置到上下左右四个不同的方位上，通过代码的方式实现一个顶部菜单栏，该菜单栏中可以通过SetIcon(QIcon("://image/.ico"));指定图标，也可以使用setShortcut...该信号在用户请求上下文菜单时触发，例如通过右键单击某个小部件（如窗口、按钮、表格等）时。

    1K10

    C++ Qt开发：ToolBar与MenuBar菜单组件

    自定义小部件： 除了工具按钮，工具栏还支持添加自定义的小部件，例如搜索框、进度条等，以满足特定需求。样式和布局： 可以通过设置样式和布局来定制工具栏的外观，包括工具按钮的样式、大小和排列方式。...setToolButtonStyle(Qt::ToolButtonStyle style)设置工具按钮的样式，可以是文本和图标一起显示、只显示图标、只显示文本等。...setActiveAction(QAction *action) 设置活动动作，该动作将在菜单栏上显示为活动状态。...()可以实现将ToolBar组件放置到上下左右四个不同的方位上，通过代码的方式实现一个顶部菜单栏，该菜单栏中可以通过SetIcon(QIcon("://image/.ico"));指定图标，也可以使用setShortcut...该信号在用户请求上下文菜单时触发，例如通过右键单击某个小部件（如窗口、按钮、表格等）时。

    2.7K10

    AngularDart Material Design 选择 顶

    如果没有为空组定义emptyLabel，它将不会出现在列表中。 通过SelectionOptions实现的ObserveAware接口支持异步建议。 材料选择具有固定的最大高度和自动溢出。...一旦有用例，我们可以为自定义最大高度添加属性。 请参阅示例以了解用法 Attributes: buttonAriaRole - 按钮图标的Aria标签。...buttonAriaLabelledBy String 在下拉按钮中描述选择的元素的id。 例如，对于带有数字选项的下拉列表，显示“每页结果”的文本元素。...生成的组件必须实现RendersValue。 icon Icon  与按钮一起使用的图标。 （可选的） iconName String  用于按钮的图标。...设置此按钮时，该按钮也会显示红色下划线。 icon Icon 与按钮一起使用的图标。 （可选的） iconName String 用于按钮的图标。

    6K20

    AngularDart Material Design 下拉列表 顶

    如果没有为空组定义emptyLabel，它将不会出现在列表中。 通过SelectionOptions实现的ObserveAware接口支持异步建议。 材料选择具有固定的最大高度和自动溢出。...一旦有用例，我们可以为自定义最大高度添加属性。 请参阅示例以了解用法 Attributes: buttonAriaRole - 按钮图标的Aria标签。...buttonAriaLabelledBy String  在下拉按钮中描述选择的元素的id。 例如，对于带有数字选项的下拉列表，显示“每页结果”的文本元素。...disabled bool 是否禁用该按钮。 enforceSpaceConstraints bool 避免渲染下拉屏幕。 error String  下拉按钮下方显示错误。...selection SelectionModel  此组件控制的选择模型。 showButtonBorder bool  是否显示下拉按钮的下边框。

    5.1K20

    Vcl控件详解_c++控件

    时触发 OnEditing：当正在编辑一个项目时触发 OnGetImageIndex：当一个项目将要在组件中显示时触发 OnGetSubItemImage：当一个子项目将要在组件中显示触发...Flat：是否有浮动效果 HotImages Images：为其中的按钮选择图片 Indent：该控件内的控件与左边距的距离 List：控件内按钮一显示样式，为True时，左边是图像...返回该控件内的行数 ShowCaptions：在按钮上是否显示Caption的文本 Transparent：是否透明 Wrapable：当该控件内的所有控件的总宽度大于该控件的宽度时，是否自动换行...TCoolBands Bitmap：在TcoolBand区后显示的图像 Constraints：指定组件宽度和高度的最大值和最小值，组件重新调整大小时，不能违反这些约束 DockSite：指定组件是否成为拖动停放操作的目标...FixedOrder：为真时，可以通过鼠标的拖动重新排列TcoolBar中的区，但不能改变原来的顺序 FixedSize：确定TcoolBar区能否保持统一的高度（或宽度） ShowText

    4.9K10

    根据 OS 设计你的应用

    直观的交互：内置的应用使用了很多直观的设计，如压感反应，颜色，位置，有含义的图标和标志。用户不需要过多装饰就能明白屏幕上的某个元素是用来干什么的。...从图 2.6 中可以见到，在 Android 版本中的添加按钮是一个在 Material Design 中传统的浮动按钮，而在 iOS 版本中添加按钮则被设计在了动作条上作为一个按钮——这在 iOS 的设计中十分常见...从图 2.8 来看， Android 的浮动动作条和 iOS 中的选项按钮各自被应用在其中关键的内容功能上。比如，上传文件，新建文件夹等等。...然而，自定义的 UI 在开发过程中更难，需要公司比往常投入更多的精力。对于一些用户来说，可能还有体验上的问题，因为你们的界面和通用的界面并不相似。...设计师完成设计后，很多 UI 组件需要针对不同平台重新设计和创建。此外，当设计师遵循设计准则之后，所有东西都看起来像是 Google / Apple 制造了。

    1.3K110

    Bootstrap快速入门

    该值为0；b是该css选择器上id数量的总和，一般为1个；c是用在该css选择器上的其他属性css选择器和伪类的总和，包括class（.btn）和属性css选择器li[id=red];d计算元素div和伪元素...，只涉及2个CSS特性，左浮动和宽度百分比，例如 .col-md-1, ..., col-md-12{float:left;} .col-md-12{width:100%;} .col-md-1{width...系统为了方便，统一在左浮动的基础上，通过设置left和right的值来实现定位显示。....col-sm-12 .col-md-8 清除浮动问题：理想很丰满，现实很骨感，有时会出现不同设备显示时出现意外，比如因为高度的原因造成错位...其他：Cikonss响应式icon；Flat UI扁平化风格；Metrao UI CSS，Win8效果；Messager弹框组件等。 第一次markdown体验，给自己点个赞。

    4.2K61

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    一、多排按钮导航栏样式及核心要点 1、实现效果 要实现下面的导航栏效果 ; 2、总体布局设计 该导航栏可使用 10 个 标签盒子 进行制作 ; 该导航栏的宽度自动充满整个屏幕 , 宽度为...100% , 高度也不需要设置 , 设置自适应即可 ; 具体控制每行显示多少个元素 , 需要进行精确的计算 , 每行有 5 个元素 , 每个元素占宽度的 20% , 这个计算必须精准到 1 像素 , 如果不精确..., 宁可少 1 像素 , 也不能多 1 像素 , 如果设置浮动后 , 宽度超过了布局宽度 , 则会自动换行 ; 3、设置浮动及宽度 该布局距离上面的布局有 5 像素的上外边距 ; 如果要令 10 个坐标...: 10px 0; } 5、设置文本 在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置在图片下方 ;...ul li:nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素

    3.3K40

    TDesign 更新周报（2022年7月第3周）

    ，其他同学可以忽略 FeaturesJumper: 新增 jumper 组件Icon: 新增mirror和rotation图标DatePicker: 支持面板年月动态响应 value 变化Table:树形结构支持同时添加多个根节点新增可编辑行的表格...；新增 showEditIcon，用于控制是否显示编辑图标 Bug FixesSelectInput: 修复透传 disabled 失效问题Icon: 修复 iconfont 高级用法由于 t-icon...场景下 keys 无效的问题Table:修复多级表头表格中，列配置全选功能选不全的问题修复可选中行 table 组件，data 为空数据时，默认全选按钮会选中的问题兼容IE滚动条高度计算覆盖不全问题修复树形结构懒加载顺序问题可编辑单元格...value 变化Form: 支持同步获取最新数据table: 树形结构，支持同时添加多个根节点table: 可编辑单元格/可编辑行，新增 showEditIcon，用于控制是否显示编辑图标table:...Bug FixesPicker: 修复 pick 事件返回的 label 不正确的问题Picker: confirm-btn 和 cancel-btn 增加 boolean 类型，值为 true 时使用默认文案

    2.8K30

    最新iOS设计规范五｜3大界面要素：控件（Controls）

    3大界面要素 (Interface Essentials) 大多数iOS应用都是由UI Kit中的组件构建的。...UI Kit提供的界面组件有三类：栏（Bars），视图（Views），控件（Controls）。 ?...例如： 菜单会在显示该按钮的按钮附近打开，因此人们可以立即了解菜单项与他们正在执行的动作之间的关系。 除了列出动作之外，菜单还可以提供可供人们用来影响主要动作的选择。...通过菜单，您可以在无需向主界面添加按钮的情况下为用户提供澄清动作目标或自定义动作行为的方法。例如： · 当用户点击应用中的“添加”按钮时，您可以显示一个菜单，让用户指定要添加的项目。...使用图像和按钮在文本字段中提供清晰度和功能。可以在文本输入框的左侧或右侧显示自定义图标，也可以添加系统提供的按钮，例如“书签”按钮。 键盘 根据实际情况，显示适当的键盘类型。

    8.6K30

    React 悬浮按钮组件 FloatingActionButton

    在React应用程序中，创建一个功能齐全且美观的悬浮按钮组件可以显著提升用户体验。本文将从基础开始介绍如何构建和使用FloatingActionButton组件，并深入探讨常见问题、易错点及解决方案。...Material-UI提供了丰富的预设样式和交互效果，使得开发者能够快速搭建出符合Google Material Design规范的组件。...中的Fab组件创建一个简单的悬浮按钮，并添加了一个加号图标作为视觉提示。...解决方法：使用响应式设计原则，根据屏幕宽度调整悬浮按钮的大小和位置。利用媒体查询优化小屏幕上的布局。...五、总结通过本文的介绍，我们了解了如何在React应用程序中创建和使用悬浮按钮组件，以及在实际开发过程中可能遇到的问题及其解决方案。

    23910

    2018年最优秀的9个Android Material Design Apps!

    下载：360,000+ 产品特色： 跨平台统一UI设计 精简的材料设计风格图标，按钮和布局 图像化构建 谷歌的宗旨之一是”Fast is better than slow”....在今年谷歌所推出的新版Gmail中，展示了全新的材料主题的设计外观，全新的材料设计配色方案，更多的空白区域和精致的图标。设计风格的变化，使其呈现出更加现代化的风格。...作为材料设计的执行者之一，悬浮按钮的设计在这款应用程序中得到了很好的体现。通过点击品牌浮动操作按钮开始新项目，对话或任务，即可轻松创建新任务。...活动策划者可以直接在应用程序中编辑活动信息，门票类型甚至价格。 通过清晰的结构，导航和可用性的使用，Eventbrite Organizer巧妙地简化了从创建到结束的整个事件管理过程。...该应用程序为组织者负责的许多任务提供有效支持，而不会让用户不知所措。 “Eventbrite Organizer使用自定义交互进行入职，登记和扫描与会者，以及购买门票，为活动策划者提供愉快的体验。

    1.8K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券