文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Material Design — 按钮（ Buttons）

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

6.3K160

【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; /* 文本右对齐 */

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

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

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

    5.8K20

    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.隐藏的数据系列和图表格式。

    5.4K20

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

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

    7.1K30

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

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

    3.9K20

    Bootstrap学习文档（二）

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

    3.1K50

    Flutte部件目录-Material Components 顶

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

    15.5K40

    【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(

    9.9K20

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

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

    4.9K30

    Power BI 模拟知乎风格卡片图

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

    1.7K21

    Bootstrap3【上手教程】

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

    82930

    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( // 为了调整浮动按钮的大小

    6.1K10

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

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

    8.1K90

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

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

    1.9K10

    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

    5.5K30

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    : 两侧的 半圆形 圆角矩形框 是通过 定位 设置的 ; 中间矩形子容器 : 中间的 白色矩形框 是通过 标准流 盒子实现的 , 该盒子不设置宽度 , 自动充满父容器 ; 为了不让该白色矩形影响到两侧的半圆..., 左侧的半圆需要设置 左上角和左下角 圆角半径为 15 像素 , 右侧半圆需要设置 右上角和右下角 圆角半径为 15 像素 ; 总的高度是 44 像素 , 搜索栏的盒子高度 30 像素 , 设置该高度后.../* 清除浮动的固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block...*/ text-align: center; /* 文本颜色白色 */ color: #fff; } .app ul li:nth-child(1) { /* 关闭按钮..."打开京东APP, 实惠又轻松" 文本盒子的宽度 */ width: 57%; } .app ul li:nth-child(4) { /* 右侧的 立即打开 红色按钮盒子 */

    4.7K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券