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

Android Material Design系列之FloatingActionButtonSnackbar

今天主讲的Material Design系列的两个控件都不难,所以一起讲了,分别是FloatingActionButtonSnackbar。...默认正常显示时的背景颜色 app:elevation :FloatingActionButton阴影的深度,默认时的阴影 app:rippleColor:FloatingActionButton点击时的背景颜色...那我们现在就研究改如何在滑动列表时隐藏显示这个悬浮按钮FloatingActionButton。...FloatingActionButton显示与隐藏 那如何实现滑动列表时,下滑显示上滑隐藏的效果呢?...添加icon改变Snackbar的位置 修改了背景色,文字按钮颜色,是不是还不过瘾?看看我们如何Snackbar上添加上一个icon图片。其实也非常简单,修改样式的过程差不多。

1.5K60
您找到你想要的搜索结果了吗?
是的
没有找到

Flutte部件目录-Material Components 顶

实现Material Design指南的视觉,行为运动丰富的小部件。 应用程序结构导航 按钮 输入选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...BottomNavigationBar小部件实现此组件。 一个显示在应用底部的材质小部件,用于在少量视图中进行选择,通常介于3到5之间。...Drawer Material Design面板,展示台的边缘水平滑动,以在应用程序中显示导航链接。 ? 按钮 RaisedButton 材质设计凸起按钮。...FlatButton 平面按钮是在材料组件部件上打印的部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印在材质小部件上的图片,通过填充颜色(墨水)对触摸作出反应。 ?...AlertDialog小部件实现了这个组件。 ? BottomSheet 底部工作表屏幕底部向上滑动以显示更多内容。

9.4K40

纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

A 高程为 1dp 的卡片,叠加层不透明度为5% B 高程为 6dp 的浮动按钮,使用没有叠加层的次要色 C 底部菜单栏,高程为 8dp,叠加层不透明度为12% 值得注意的是,叠加层不应应用于使用主色次要色的...如果背景颜色不够深,就无法确保白色的文本背景色之间达到 15.8:1 的对比度,也就无法确保在极端情况下满足 4.5:1 的对比度下限。 ?...错误 避免在深色背景上使用让人觉得过于饱和的色彩。 主色 主色应该是整个界面组件中最常显示的色彩。在整个 Material Design 的深色主题中可以使用的基准色彩有超过200种不同的色调。...使用 Material 色彩主题的基准配色 ? Material Design 默认主题的基准色 Material Design 深色主题的基准色 报错颜色 报错颜色主要用来指示出错的状况状态。...Snackbar 使用浅色的底色,让它可以脱颖而出。 背景组件交互元素的状态,通常会借助叠加层的形式来可视化地呈现。

9.5K10

Ng-Matero:基于 Angular Material 搭建的中后台管理框架

matero-poster.jpg 前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用。...另外,Material 的确是一个高质量的组件库,不管是设计思路还是使用方式,都近乎完美。...在预览页面,大家可以看到很丰富的颜色,而 Material 本身只有三种主色,通过颜色系统也可以很容易更换颜色。...颜色系统是通过 Material 的官方色值用 sass 生成的,Material颜色定义如下,包括主体色值以及对应的对比色值: red: { 50: '#FFEBEE', 100:... subtitle 设置标题副标题,page-header 同样支持颜色系统,可以直接添加颜色类来改变页面标题部分的颜色,如下: <page-header class="bg-purple-500"

2.9K20

Flutter 中可定制的时间规划器

每行显示一个小时,每列显示一天,但您可以更改该部分的标题并显示您需要的任何其他内容。 此演示视频展示了如何在 Flutter 中创建可自定义的时间规划器。...它展示了可定制的时间规划器将如何在您的「Flutter」 应用程序中使用「time_planner」包工作。它显示当用户点击任何行列时,将创建一个随机时间规划器。...属性 时间规划器的一些属性是: 「startHour」用来计时从这个开始,它会1开始。 「endHour」用来计时结束在这个时间,最大值为24。...「setState」 方法,在 「setState」 方法内,给集合 tasks 添加 「TimePlannerTask」 组件,在这个组件中,添加颜色、日期时间、minutesDuration ...; } 下面我们将添加 「TimePlanner」 组件,设置其 startHour, endHour, headers,然后添加 「TimePlannerTitle」 组件, TimePlanner

1.6K20

输入选择

在前面的文章中我们学习了Flutter中事件的处理,包括组件的单击、双击、长按、滑动等。想必大家多其已经有了一定的认识。 那么,这节我们主要介绍下Flutter中输入选择组件的用法。...IosAndroid中的Switch组件类似 构造方法如下 const Switch({ Key key, @required this.value, @required this.onChanged...this.inactiveThumbColor, this.inactiveTrackColor, this.activeThumbImage, this.inactiveThumbImage }) 已经很简单,只不过多了几个参数用来控制打开关闭时的颜色或者图片...RadioListTileSwitchListTile的用法基本相同,这里就不在具体介绍了,大家可以在下面试一下如何使用。...、RadioListTileSwitchListTile是对相应组件的封装 试一试 根据我们以前学过的东东完成下图效果 ?

2.4K20

借助 Material You 动态配色丰富您的应用

接下来,它会为调色板中选择的颜色分配一组特定的角色值,并将这些角色值映射到我们称之为 "方案" 的组件上。...那么如何使这一切成为可能呢?方法是使用 Token。Token 在 Material Design 2 颜色角色的基础上,提供了全局的样式色槽,它能够帮您更改颜色级联一致的角色分配。...当系统颜色在运行过程中发生变化时便会更新调色板以及配色方案,而后者便是您映射到主题背景组件的配色方案。在相应的组件上使用正确的颜色规则,以确保可以无障碍访问和风格的连续性,这是至关重要的一点。...迁移至 Material 3 接下来向您介绍如何将应用迁移至 Material 3。迁移的第一步是引用新 Token 并将其与应用中的组件连接。...这一操作将更新颜色、排版主题背景文件,更新代码后您即可运行应用来查看组件映射的新品牌主题背景。 使用动态配色 您可使用上述的网页工具,预览基于源颜色或图像生成的各种方案。

2.4K30

Angular 6的新特性介绍

2018年5月4日,Angular6.0.0版正式发布,新版本主要关注底层框架工具链,目的在于使其变得更小更快。下面就介绍下新版本的一些主要新特性,供大家参考。...通过ng add可以更加容易向项目中添加新功能(类似npm install ) Angular Material+CDK组件 angular6最大的补充是用于显示分层数据的新树组件。...遵循数据表组件的模式,CDK包含核心树指令,而Angular Material则提供与顶层的Material Design样式相同的体验 Material 运行命令,添加Material ng add...一旦添加Material之后,你就可以生成三个新的入门组件 Material Sidenav 运行命令: ng generate @angular/material:material-nav --name...之前我们宣布只有v4v6是LTS版本,但为了从一个主要版本更新到下一个主要版本更容易,并给更大的项目更多时间来规划更新,我们决定将延长对所有主要版本的长期支持v4开始。

2.3K21

AngularDart Material Design 弹出框 顶

MaterialPopupComponent Selector: 具有材料设计外观的弹出组件。...这意味着可以在OnPush模式下在另一个组件中使用此组件,但由于任何此类实现都需要所有内容子项支持OnPush,因此由实现者自行决定。...这为面板提供了阴影背景颜色。当它关闭时,不会应用延迟动画。 ink bool  将弹出窗口的背景颜色设置为墨迹($ mat-gray-700)。...与Angular提供程序类似,它支持首选位置的嵌套列表。 弹出窗口将展平位置列表并选择第一个适合屏幕的位置。 slide String  弹出缩放的方向。...visibleChange Stream  弹出窗口的visible属性发生更改时触发的同步事件(例如,false变为true或true变为false)。

2.4K30

Angular Material 的设计之美

正如官方所说其目的就是构建基于 Angular TypeScript 的高质量组件库。 官方列举了如下几点来解释“高质量”的含义。 国际化可访问性,以便所有用户都可以使用。...接下来我会相对宏观的角度介绍 Angular Material 设计的一些亮点,并且简单介绍 Angular Material 的一些使用技巧。...把这句名言用在 Angular Material 上丝毫不为过,其实除了我们看到的组件之外,Material 还有一些隐藏组件,比如可以用 menu 组件构造 popover,我会在下文中介绍。...丰富的颜色 Material Design 的亮点之一就是拥有非常丰富的颜色值,其实 Angular Material颜色变量比官方定义的色值还要多一些。...ng-matero 也有所有颜色值对应的 colors helper,可以更加方便的创建丰富多彩的按钮或标签。Angular Material颜色定义严谨且优雅。以下是红色值的变量。

5K30

Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

目的页接收到数据后,进行运用处理; 【更改一下pushData()的封装】 刚刚是把ContentPage的标题data传给pageOne了, 现在更改一下pushData()的封装,灵活一点...路由常见问题及其解决方案 主题风格的一致性 主页面非主页面的 跳转方式选择 可能不太一样; Scaffold组件的body属性值 为 具体组件名称, 接收不到 路由返回(或传递过来)的数据; 目标页面..., 各个页面的 AppBar等组件 也默认为什么颜色; 如下示例, 我们稍微改一下main.dart的primaryColor, 自定义页PageOne、PageTwo、PageThree没有设定颜色...上述的单独设置指的是, 在某个页面中,为该页面的appBar单独设置背景颜色, 这样就会覆盖主页的默认主题颜色, 【但是如要尽量保持主题的一致性, 建议不要对子页面的这些 相关主题属性 进行修改...primaryColorDark), ), toolbarOpacity: 1.0, bottomOpacity: 1.0, ), //整个根页面的背景颜色

2.9K10

18 个漂亮的 Bootstrap 模板

2013 年发展并提供支持。 11 个具有不同设计的演示仪表盘一个多功能仪表盘。 在整个开发过程中收集的非常庞大且独特的应用、插件、组件数据库。 市场上功能最强大的模板之一。...具有深色背景的超赞透明设计。 添加了新的浅色白色版本。 内置HTML5、纯 JS、Bootstrap Sass。 适用于 SAAS、CRM CMS系统。 大量的手写部件。...具有数百种可自定义多功能多用途模板。 设计中元素、阴影、颜色、空间的完美组合。 出色的排版,具有像素优化的字体间系列动态指标。 独家组件精心设计的页面集。 100 多个小部件插件。...使用的技术是Angular 8、Sass、HTML5、Firebase。 精心设计的时尚元素。 80 多种集成页面 12 种集成语言。 随附所有必需的组件:图标、按钮、表单、表格图表。...基于 Angular 9。 有 6 种不同布局 10 种颜色样式的直观设计。 在 ThemeForest 上的评级为 4.97 星。 包含响应式表格、图表、日历,邮箱等应用程序。

12.6K11
领券