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

带文本的矩形(圆角)浮动动作按钮

带文本的矩形(圆角)浮动动作按钮是一种常见的用户界面元素,通常用于触发特定的操作或功能。它具有以下特点:

概念:带文本的矩形(圆角)浮动动作按钮是一个可见的按钮,通常位于应用程序的界面上,用于引导用户执行特定的操作或触发特定的功能。

分类:它属于用户界面设计中的按钮元素,根据设计风格的不同,可以有不同的形状和样式,如矩形、圆角矩形等。

优势:

  1. 引导用户操作:浮动动作按钮通常具有醒目的外观和位置,能够吸引用户的注意力,引导用户执行特定的操作或功能。
  2. 提升用户体验:通过使用浮动动作按钮,用户可以更方便地找到和使用特定的功能,提升了用户的操作效率和体验。
  3. 一致性和可预测性:浮动动作按钮通常遵循一致的设计规范和交互模式,使用户能够快速理解其功能和操作方式,提供了一致性和可预测性的用户体验。

应用场景:带文本的矩形(圆角)浮动动作按钮可以应用于各种应用程序和网站中,常见的应用场景包括但不限于:

  1. 执行主要操作:用于触发应用程序的主要操作,如提交表单、保存数据、发送消息等。
  2. 导航和菜单:用于导航到其他页面或显示菜单选项,如返回主页、打开侧边栏菜单等。
  3. 触发弹窗和对话框:用于触发弹窗或对话框,如确认删除、编辑信息等。

推荐的腾讯云相关产品和产品介绍链接地址:

腾讯云提供了一系列与云计算相关的产品和服务,以下是一些与浮动动作按钮相关的产品和服务:

  1. 腾讯云移动推送:提供了消息推送服务,可以通过浮动动作按钮触发消息推送功能。详细信息请参考:腾讯云移动推送
  2. 腾讯云小程序·云开发:提供了小程序开发的云端支持,可以通过浮动动作按钮触发小程序的特定功能。详细信息请参考:腾讯云小程序·云开发
  3. 腾讯云云函数:提供了无服务器的云函数服务,可以通过浮动动作按钮触发特定的云函数。详细信息请参考:腾讯云云函数

请注意,以上推荐的产品和服务仅作为示例,实际使用时应根据具体需求进行选择。

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

相关·内容

Material Design — 按钮( Buttons)

标准按钮 平面按钮Flat buttons 平面按钮是只有文本按钮 可用在dialogs, toolbars和inline 不会有抬起效果,但是点击时会填充颜色 浮动按钮 Raised buttons...浮动按钮矩形按钮。...对于冗长或复杂表单,建议将按钮放在表单左侧,肯定性按钮位于否定性按钮左侧。 ---- 样式 版式设计 按钮文本应该用有大写语言大写。...对于其他语言,平面按钮彩色文本将它们与普通文本区分开来。 无障碍 为了确保残疾人可用性,需要按钮高度为36dp,热区最低高度为48dp。 ?...按钮样式 圆角半径 按钮应该有一个2dp圆角半径。 密度 当鼠标和键盘是主要输入方法时,可以稍微减少按钮尺寸以适应密集UI界面。

3.8K160

【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

: 50%; /* 然后 向上走自己高度一半 */ margin-top: -15px; 使用圆角矩形设置半圆 : 设置左侧按钮 , 右侧设置成半圆 , 也就是 右上角和右下角设置成圆角...; /* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */ border-radius: 0 15px 15px 0; 设置右侧按钮 , 左侧设置成半圆 , 也就是 左上角和左下角设置成圆角.../* 复合写法设置圆角矩形 : 左上角 右上角 右下角 左下角 */ border-radius: 15px 0 0 15px; } /* 按钮移动后样式 背景颜色加深一倍...left: 50%; /* 然后 向左走自己一半宽度 */ margin-left: -35px; 使用圆角矩形设置左右两侧半圆 : 圆角矩形容器高度是 13 像素 , 设置其左右两侧为半圆...} /* 设置向右翻页按钮样式 主要是 绝对定位位置 和 圆角状态样式 */ .right { /* 绝对定位右侧 */ right: 0; /* 文本右对齐 */

1.8K10

腾讯开源超实用UI轮子库,我是轮子搬运工

通过它可以生成一个标题、文本消息、按钮对话框。 ConfirmMessageDialogBuilder: Checkbox 消息确认框 Builder。...QMUIRoundButtonDrawable 使用该 Drawable 可以方便地生成圆角矩形/圆形 Drawable,提供设置背景色、描边大小和颜色、圆角自适应 View 高度等特性。...提供了以下功能: 更多可参考 wiki 文档 在左侧/右侧添加图片按钮/文字按钮/自定义View。 设置标题/副标题,且支持设置标题/副标题水平对齐方式。...dp 与 px 数值相互转化。 QMUIDrawableHelper 快速绘制一张指定大小、颜色、边框图片,支持形状为圆角矩形和圆形。 快速绘制一张带上分隔线或下分隔线图片。...快速绘制一张可圆角渐变图片。 将当前图片颜色换成另一个颜色。 将两张图片叠加后生成一张新图片。 对某个 View 截图生成图片。

4.7K30

Excel图表学习51: 根据选择高亮显示图表系列数据点

选择数据单元格区域A2:D6,单击功能区选项卡“插入—图表—数据标记折线图”,结果如下图3所示。 ? 图3 步骤2:绘制形状按钮。单击功能区选项卡“插入—形状—圆角矩形”,如下图4所示。 ?...图4 在工作表中插入一个圆角矩形,添加文本。同样操作,再插入2个圆角矩形,并添加文本。将这三个圆角矩形放置到图表上方并排列整齐,如下图5所示。 ? 图5 步骤3:给圆角矩形按钮命名。...选择文本为2016圆角矩形形状,在工作表左上角名称框中输入“2016”,如下图6所示。 ? 图6 同样操作,给文本为2017和2018圆角矩形形状分别命名为“2017”和“2018”。...选取文本为2016矩形并单击右键,单击“指定宏”命令,在“指定宏”对话框中选取SelectYear2016,如下图14所示。 ? 图14 同样,为其它两个形状指定相应宏。 至此,图表制作完成。...当你单击图表上方矩形按钮时,就会出现前面图1所示效果。 小结 1.关键技术:名称+公式+VBA 2.隐藏数据系列和图表格式。

3.8K20

【移动端网页布局】流式布局案例 ⑤ ( 连续排列链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

在布局 左上角 和 右上角 都有一个圆角 , 并且矩形图片超过圆角部分被隐藏了 , 设置圆角和超出部分隐藏样式 : .brand { /* 设置圆角后 超过圆角图片不再显示 */...在布局中 , 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置 , 为父容器三个子元素都设置 左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置子元素宽度...*/ text-align: center; /* 文本颜色白色 */ color: #fff; } .app ul li:nth-child(1) { /* 关闭按钮..."打开京东APP, 实惠又轻松" 文本盒子宽度 */ width: 57%; } .app ul li:nth-child(4) { /* 右侧 立即打开 红色按钮盒子 */...*/ .brand { /* 设置圆角后 超过圆角图片不再显示 */ overflow: hidden; /* 设置圆角 顺序为 : 左上 / 右上 / 右下 /左下 */

3.5K20

【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )

像素数值 : 设置一个 像素值 , 如 : 50px ; 百分比数值 : 设置一个 百分比数值 , 如 : 50% ; 在网页设计中 , 大量用到了圆角边框 , 如 : 购物车上数字 : 购物车上浮动数字..., 使用了圆角边框 ; 圆角按钮 : 下图中 头像 以及 下面的两个 按钮 , 都是圆角边框 ; 二、代码示例 ---- 1、代码示例 - 正常矩形边框 默认情况下边框 , 是 矩形边框... 展示效果 : 2、代码示例 - 圆形边框 如果 盒子模型 高度 = 宽度 , 并且 圆角矩形 圆角半径 为 50% 或者 高度/宽度 一半 ,...> /* 清除标签默认内外边距 */ * { padding: 0; margin: 0; } /* 圆角矩形样式 */ div { width...= 宽度 , 并且 圆角矩形 圆角半径 为 高度 一半 , 则该圆角矩形 表现就是一个正常圆角矩形 , 左右两侧是圆角 ; 代码示例 : <!

2.2K20

Bootstrap学习文档(二)

active 鼠标悬停在行或单元格上时所设置颜色 success 标识成功或积极动作 info 标识普通提示信息或动作 warning 标识警告或需要用户注意 danger 标识危险或潜在带来负面影响动作...btn-primary 首选项颜色按钮 btn-success 成功颜色按钮 btn-info 一般信息颜色按钮 btn-warning 警告颜色按钮 btn-danger 危险颜色按钮...,最大为图片真实尺寸 图片形状 img-rounded 圆角效果图片 img-circle 圆形图片 img-thumbnail 边框图片 示例代码如下: <div class="container...pull-left 左<em>浮动</em> pull-right 右<em>浮动</em> 注意,直接将<em>浮动</em><em>的</em>部分放在row中,是可以撑开容器<em>的</em>,因为row是<em>带</em>清楚<em>浮动</em>样式<em>的</em>,如果不放直接放在row中可以在<em>浮动</em>部分外面加上clearfix...<em>的</em>类名清楚内部<em>的</em><em>浮动</em>。

2.3K50

Flutte部件目录-Material Components 顶

按钮 RaisedButton 材质设计凸起按钮。 一个凸起按钮由一个矩形材料悬停在界面上。 ? ?...FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容上以提升应用程序中主要操作。...浮动动作按钮最常用于Scaffold.floatingActionButton字段。 ? FlatButton 平面按钮是在材料组件部件上打印部分,通过填充颜色对触摸作出反应。 ?...ButtonBar 按钮水平排列。 ? 输入和选择 TextField 触摸文本字段将放置光标并显示键盘。 TextField部件实现了这个组件。 ?...芯片代表小块中复杂实体,如联系人。 ? Tooltip 工具提示提供文本标签可帮助解释按钮或其他用户界面操作功能。

9.4K40

【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )

, 可以将组件切割成圆角矩形 ; borderRadius 属性用于设置圆角 , child 属性用于设置被切割子组件 ; 代码示例 : // 设置底部大图片 ClipRRect(...(file, width: 120, height: 90, fit: BoxFit.fill,), ), 运行效果 : 下图中圆角矩形就是使用 ClipRRect 切割 Image 组件效果...// 距离顶部 5 top: 5, child: , ), ] ) 效果展示 : 整体是 Stack 帧布局 , 使用 ClipRRect 组件将 Image 组件切割成了圆角矩形...) ), floatingActionButton: FloatingActionButton( onPressed: () { /// 浮动按钮点击事件.../// 点击浮动按钮 , 弹出一个菜单 /// 菜单有两个按钮 , 分别是 拍照 / 选择图片 showModalBottomSheet(

8.4K20

一篇文章读懂UI按钮设计细节与规范

从左到右,将按钮元素逐渐删除,它功能性开始消失, 以至于变成了装饰或者文字,失去了其可操作特性。 熟悉就是好 我们习惯了通常与动作关联某些形状或者形式。...按钮看起来越类似于与按钮相关联按钮则越好。这就是为什么矩形(或者圆角矩形)始终是按钮最安全也最常见选择原因。 ?...圆角按钮 圆角按钮被认为比锋利边缘按钮更为友好和正面。但是,与此同时,这种做法使围绕它们内容设计变得更加困难。如果你在按钮上方保留了对齐文本,则圆角越圆,在该文本在视觉上将会越小。...这个图形应该在一个视觉形状中有填充,以便与我们文本高度相同。然后,将图标放置在较小形状中。 如果是人字形图标,那么最高使其与文本高度相同,并且您还可以根据字体宽度检查线宽。...边缘平衡 如果你使用圆角按钮,请记住将正确圆角比率与屏幕上其它元素对齐。在所有的情况下使用一种设置会造成视觉边际不平衡。 ? 对角线间距与左侧和底部对角线间距相同。

3.7K30

Power BI 模拟知乎风格卡片图

知乎每周会给创作者发送上周创作及访问数据,如下图所示。这个报告一大亮点在于,卡片图是圆形背景,Power BI如何模拟?...内置卡片图模拟 ---- 首先拿内置卡片图试试,内置卡片图默认是矩形,在背景色设置区域,把它调成知乎色,RGB=234,244,254 如何将矩形变成圆形?...有些读者可能想到视觉对象边框可以设置圆角圆角大到一定程度,矩形就会变成圆形,但这里有个问题,Power BI目前只支持圆角为30像素,最大只能下图显示弧度。 所以第一次尝试失败。...按钮模拟 ---- 还有没有别的办法?内置按钮是另外一种选择。首先,插入一个空白按钮按钮形状设置为圆角矩形,这里大家可以看到,不同于卡片图,圆角弧度可以更大,50%意味着矩形变为圆形。...为按钮增加文本,路径如下图所示: 文本不是固定值,而是将它度量值化,文本度量值本例为: 指标文本 = FORMAT([指标],"0%") 最终效果如下图所示: 因按钮支持多种形状,所以除了圆形背景还可以是其它类型

1K21

Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

避免对次要和消极操作使用浮动操作按钮,包括以下内容: ·存档或清空 ·不明确行为 ·警告或错误 ·有限制任务,如剪切文本 ·应该在工具栏中控件,如音量控制或更改字体颜色 浮动操作按钮不包含应用栏...标签屏幕 在标签屏幕上,悬浮响应式按钮不应以与内容相同方向退出屏幕。...尝试最适合您app和按钮所在屏幕变换。 触发 悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动动画向外扩展导致UI变化。 工具栏 浮动动作按钮可以在按下时变换成工具栏。...工具栏可以包含相关操作,如文本和搜索字段,或任何其他有用项目。 ?...变形动画应该是可逆并且可以将新材料片转换回浮动动作按钮。 ? 全屏 浮动动作按钮可以转换为跨越整个屏幕新材料。 这种戏剧性转变通常与创建新内容相关联。

5.7K90

Flutter中按钮组件Button

Flutter提供了丰富按钮组件可以让我们快速构建UI界面。 常见按钮组件如下: 1. RaisedButton 凸起按钮; 2. FlatButton 扁平化按钮; 3....FloatingActionButton 浮动按钮按钮组件常见属性: 1. onPressed  按下按钮时触发回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式; 2.... child 子组件; 3. textColor 文本颜色; 4. color 按钮颜色; 5. disabledColor 按钮禁用时颜色; 6. disabledTextColor 按钮禁用时文本颜色...// 背景颜色 backgroundColor: Colors.yellow, ), // 浮动按钮位置...Widget build(BuildContext context) { return Container( child: Scaffold( // 为了调整浮动按钮大小

4.1K10

Flutter 中按钮组件

Flutter提供了丰富按钮组件可以让我们快速构建UI界面。 常见按钮组件如下: 1. RaisedButton :凸起按钮; 2. FlatButton :扁平化按钮; 3....FloatingActionButton:浮动按钮按钮组件常见属性: 1. onPressed 按下按钮时触发回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式; 2....值类型为Widget; 3. textColor 文本颜色。值类型为Colors; 4. color 按钮颜色。值类型为Colors; 5. disabledColor 按钮禁用时颜色。...值类型为Colors; 6. disabledTextColor 按钮禁用时文本颜色。值类型为Colors; 7. splashColor 点击按钮时水波纹颜色。...用浮动按钮实现类似闲鱼APP底部导航条效果,以下是代码示例: import "package:flutter/material.dart"; // 标签切换页 class Tabs extends

3.1K30

Bootstrap3【上手教程】

目录 一、思维导图 二、表单【代码有注解】 三、按钮【代码有注解】 四、图片【代码有注解】 图片形状有三种: 圆角矩形: 圆形/椭圆: 这个比较牛逼,会根据图片来决定是宽椭圆还是高椭圆。...缩略图: 五、辅助类【代码有注解】 ---- 一、思维导图 二、表单【代码有注解】 之前我们写在文本框前面写用户名 一直都是直接写字,在实际开发中一般用文本标签包起来例如 标签,我们可以看到效果文本宽度占满了整行,下拉框宽度也占满了整行 <!...a标签、button标签本身就是按钮,input标签button,submit这些都可以用class=”btn”来添加按钮样式 <!...图片形状有三种: 圆角矩形: 圆形/椭圆:<img class

41530

【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放按钮案例 )

一、需求分析 设置一个 按钮 , 默认状态下显示样式如下 : 按钮 外部 有 圆形外边框 ; 按钮文本 , 水平居中对齐 , 垂直居中对齐 ; 当鼠标移动到 按钮 上之后 , 鼠标 变为 小手... 浮动属性设置 : 如果将 按钮排列起来 , 需要 为 列表元素 标签 设置 浮动 属性 , /* 设置左浮动..., 令 ul 列表中 li 元素水平从左到右排列 */ float: left; 一般设置 左浮动 属性 , 整个 列表 以及 列表 元素 宽高 / 边距 需要精准计算 ,...: 1px solid pink; /* 设置圆角按钮外部边框 为 圆形 */ border-radius: 50%; 设置缩放属性 : 按钮 本身...margin: 10px; /* 取消 li 样式 , 也就是列表前小圆点 */ list-style: none; /* 设置圆角

20110
领券