Angular material 2 SnackBar不工作 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Android 关于 Snackbar 基本使用

一、Snackbar 基本使用先在app build.gradle 中添加依赖： implementation "com.google.android.material:$latest_version...).show() }.show() setAction1 setAction2 setBackgroundTint(): 给 Snackbar 设置背景颜色 setActionTextColor...(): 给 Snackbar Action 文字设置颜色 setTextColor(): 给 Snackbar 文字设置颜色 Snackbar.make(binding.root, "Show some...Snackbar Material Design 规范： https://m2.material.io/components/snackbars 我们在设计之初也应该参考下它的规范，避免一些不恰当设计使用...Snackbar类: https://developer.android.com/reference/com/google/android/material/snackbar/Snackbar

2.7K1 0

Flutter 构建完整应用手册-设计基础知识顶

在Material Design中，这是SnackBar的工作。...); 2.显示一个SnackBar 使用Scaffold，我们可以展示SnackBar！首先，我们需要创建一个SnackBar，然后使用Scaffold显示它。...路线创建一个TabController 创建选项卡为每个选项卡创建内容 1.创建一个TabController 为了让选项卡工作，我们需要保持所选选项卡和内容部分的同步。...这是TabController的工作。我们可以手动创建TabController或使用DefaultTabController部件。...); 2.创建选项卡既然我们有一个TabController可以使用，我们可以使用TabBar部件创建我们的选项卡。

8.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Material Design —Snackbars &Toasts

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...Snackbars & Toasts Material Design链接：Snackbars&Toasts ?...消失方式：1、向下滑动；2、一段时间后自动消失；3、用户在别处进行新交互时（例如打开了新的页面）非常短的文本字符串 Snackbars应包含与所执行的操作直接相关的单行文本。它们可能包含操作文本。...这是为了确保用户能够在预期时间内阅读Snackbar。最多0-1个操作，不包含取消按钮如果存在行为，则遵守Dialog的空间和可视性规则。...当显示第一个Snackbar时第二个就该做准备，在第二个Snackbar开始出现前第一个Snackbar应该开始向下收缩。（今天的好短～开心～）

1.3K6 0

升级Androidx后一些常用依赖的引入地址

CardView implementation 'androidx.cardview:cardview:1.0.0' TabLayout implementation'com.google.android.material...:material:1.0.0' RecycleView implementation'androidx.recyclerview:recyclerview:1.0.0' Snackbar implementation'com.google.android.material.snackbar.Snackbar...:material:1.0.0-rc01' constraintlayout 约束布局 implementation'androidx.constraintlayout:constraintlayout...:drawerlayout:1.0.0' gridlayout 网格布局 implementation'androidx.gridlayout:gridlayout:1.0.0' viewPager 2...implementation 'androidx.viewpager2:viewpager2:1.0.0' 如果没找的需要的可以到点击进入自己查找需要的。

1.2K2 0

Flutter - 处理手势

处理点击步骤创建自定义button类在其中使用GestureDetector并复写onTap回调代码实现 import 'package:flutter/material.dart'; //...= SnackBar(content: Text("Now you tap the $this"),); Scaffold.of(context).showSnackBar(snackBar.../// 带有波纹效果的按钮 class ButtonSample2 extends StatelessWidget { @override Widget build(BuildContext context...) { return InkWell( onTap: () { final snackBar = SnackBar(content: Text("Now you tap...示例界面代码 import 'package:flutter/material.dart'; /// 侧滑删除列表界面 class SwipeToDismissPage extends StatefulWidget

1.7K2 0

Flutter 构建完整应用手册-处理手势

onTap: () { final snackBar = new SnackBar(content: new Text("Tap")); Scaffold.of(context...虽然我们已经创建了一个自定义按钮来演示这些概念，但Flutter包括一些开箱即用的按钮：RaisedButton，FlatButton和CupertinoButton 完整例子 import 'package:flutter/material.dart...new EdgeInsets.all(12.0), child: new Text('Flat Button'), ), ); 完整例子 import 'package:flutter/material.dart...itemBuilder: (context, index) { return new ListTile(title: new Text('${items[index]}')); }, ); 2....title: new Text('$item')), ); 完整例子 import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart

2.3K2 0

Flutter中的操作提示

import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new MyApp(...color: Colors.blueAccent, ), ), new RadioListTile( value: 2,...Snackbar ---- 底部快捷提示和Android中的可以说是相似度很高的，用法也很简单。...虽然构造方法很简单，但是我们并不能直接显示SnackBar，我们可以借助于 Scaffold.of(context).showSnackBar（）来显示一个SnackBar，值得注意的是这个context...import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(home: new MyApp()));

2.7K3 0

Blazor学习之旅(9)用MudBlazor重构Todo

Todo V2规划我们首先来做一个规划，期望效果是：（1）能够有一个分页列表，能够将MongoDB中的数据读取出来并展示；（2）能够针对Todo Name进行筛选查询；（3）能够有一个弹出框进行新增...根据Todo Item Name进行搜索（3）新增TodoItem （4）修改TodoItem （5）删除TodoItem Todo V2重构（1）准备工作在NavMenu.razor中新增一个导航菜单...> （2）重构Todo列表页在Pages目录下新增一个razor组件：TodoV2.razor，代码如下： @page "/todov2...{ [Inject] public ISnackbar Snackbar { get; set; } [Inject] public...MudDialog.Close(DialogResult.Ok(true)); void Cancel() => MudDialog.Cancel(); } 由于该页面代码很简单，我们就直接将其放在同一个razor中，不区分前后端的部分类

6224 0

Angular Material 的设计之美

我可以说一下自己的感受，Angular Material 的交互更加流畅，细节做的更好。 Angular Material 组件库虽然很优秀，但是却被戴上了只适合做 C 端界面的帽子。...接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点，并且简单介绍 Angular Material 的一些使用技巧。...顺便插一句，如果大家纠结用 Sass 还是 Less，可以看一下这篇文章 CSS 预处理器中的循环，个人不建议用 Less，请原谅我无意引战?。...我最开始认为将所有样式全部写到 mixin 中并不是很优雅的做法，但是在编写 ng-matero 暗黑主题的时候，我发现不这样做是不行的。以下是 Angular Material 主题定制的方法。...总结文章篇幅有限，以我浅薄的资历还无法将 Angular Material 的设计之美剖析的面面俱到，但是如果大家通过这篇文章能够更好的了解 Angular Material 或者对 Angular

6.1K3 0

Snackbar-Android M新控件

Perform anything for the action selected } }) .setActionTextColor(R.color.material_blue...---- 英文原文： http://www.technotalkative.com/part-2-welcome-snackbar-goodbye-toast/ ---- Snackbar样式在这里我们将看到如何显示不同颜色的...snackbar) { if (snackbar !...} public static Snackbar info(Snackbar snackbar) { return colorSnackBar(snackbar, blue);...(snackbar, green); } } 如何使用 Snackbar snackbar = Snackbar.make(getView(), R.string.hello_snackbar,

1K3 0

Material Design 实战之第三弹—— 悬浮按钮和可交互提示

立面设计是Material Design中一条非常重要的设计思想，也就是说，按照Material Design的理念，应用程序的界面不仅仅只是一个平面，而应该是有立体效果的。...的点击事件： 1.2.1 实例化 1.2.2 实例化的 FloatingActionButton对象调用setOnClickListener方法注册监听，类似Button 2....Snackbar 2.1 调用了Snackbar的make()方法来创建一个Snackbar对象（注意三个参数含义：view,"text", Snackbar.LENGTH_SHORT...可以看到，这里调用了Snackbar的make()方法来创建一个Snackbar对象， make()方法的第一个参数需要传人一个View，只要是当前界面布局的任意一个View都可以，Snackbar...第二个参数就是Snackbar中显示的内容，第三个参数是Snackbar显示的时长。这些和Toast都是类似的。

2.2K3 0

Angular 6正式版发布，都有哪些新功能

ng add @angular/material：安装并设置 Angular Material 和主题，注册新的初始组件到ng generate中。...CLI v6 现已支持多项目工作区，如多个应用程序或库，CLI 项目用 angular.json 取代 angular-cli.json 构建和配置项目。...每个 CLI 工作区都有项目，每个项目都有目标，每个目标都可以有配置。..."serve": {}, "extract-i18n": {}, "test": {}, } }, "my-project-name-e2e...例如，执行下面的代码： ng generate library 该命令将在 CLI 工作区内创建一个库，并对其进行配置以进行测试和构建。

6.3K2 0

Tooltip

其实实现起来非常的简单，使用Align设置对齐方式为topCenter让Wrap上中对齐，然后自定义Button借助于Contaner和OutlineButton来实现上面的按钮效果，然后处理点击事件弹出SnackBar...代码 import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new MyApp...)); }, child: Text(text), )); } } 轻量级操作提示在面的文章中，我们讲到了Dialog、Snackbar...代码 import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new MyApp...所以我们也可以进行下修改，放置自己想要的Widget 但是呢，如果没有特殊的需要还是不建议修改哦，毕竟material官方对tooltips的颜色大小方向等都已经做了最合适的定义material.io

3.4K5 0

Angular 6的新特性介绍

遵循数据表组件的模式，CDK包含核心树指令，而Angular Material则提供与顶层的Material Design样式相同的体验 Material 运行命令，添加Material ng add...@angular/material ?...如果要了解更多有关Material的信息，请点击这里 CLI工作空间 CLI6.0版本现在支持包含多个项目的工作空间，如多个应用程序或库。...ng generate library 这个命令将在你的CKI工作空间创建一个库项目，并且自动添加配置信息到angular.json文件和tsconfig.json中。...点击查看更多关于CLI工作空间的信息 Providers的改变为了使我们的程序变得轻量，Angular6将模块引入服务的模式，改成服务引入模块的模式。

3.4K2 1

Android提醒微技巧，你真的了解Dialog、Toast和Snackbar吗？

现在这个Dialog是Material Design风格的，因为我是在6.0系统上运行的，因此会自动赋予这样的风格。但是如果在老版本系统上运行，比如说2.3系统，会是什么样的效果呢？...人的审美总是在进步的，我们有没有什么办法在老版本的系统中也使用Material Design风格的Dialog呢？...2. Toast 说到不会阻挡用户原本正在进行的操作，这就延伸到我们今天的第二个主题，Toast。Toast只会弹出一段信息，告诉用户某某事情已经发生了，过一段时间后就会自动消失。...Snackbar 如果说Dialog和Toast是两个极端的话，那么Snackbar就是处于中间的位置了。Snackbar和Toast比较相似，但是用途更加广泛，并且它是可以和用户进行交互的。...Snackbar：以上两者之外的任何其他场景，Snackbar可能会是你最好的选择。

1.6K8 0

Android Design Support Library初探-更新中

官方的详细专题有更详细的说明来介绍使用material design带来的好处。但我们也知道，这种设计对于开发者来讲，尤其是在意向后兼容的开发者来说是一种挑战。...在Android Design Support Library的帮助下，我们为所有的开发者，所有的2.1以上的设备，带来了一些重要的material design控件。...比如： navigation drawer view, floating labels for editing text, a floating action button, snackbar, tabs...navigation drawer view， floating labels for editing text（输入控件的悬浮标签） floating action button （悬浮操作按钮） snackbar...加入依赖本工程的build.gradle中 compile 'com.android.support:design:23.1.1' ---- 悬浮操作按钮 Floating Action Button Snackbar

1.4K2 0

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

我们已对所有三个仓库中的所有问题完成了分类，并会持续对新报告的问题做类似工作。我们的承诺是：未来，所有新报告的问题都将在 2 周内完成分类。...社区的支持工作做计划。...它们提供了健壮易读的 API 表面，可以帮助大家更好地测试 Angular Material 组件。...有关这些 API 和其他新特性的更多细节和示例，请务必查看 Angular Material Test Harnesses 的文档： http://material.angular.io/cdk/test-harnesses...将来，webpack v5 会带来：持久磁盘缓存，以加快构建速度 cjs 摇树，减小包体积这一支持是实验性的，并且正在开发中，因此我们不建议你将其用于生产用途。想试用 webpack5 吗？

4.5K3 0

Ng-Matero V10 正式发布！

Angular v10 在六月下旬就悄无声息的发布了，虽然 v9 的发布延期了两个月，但是 v10 并没有受影响，仍然如期而至。...再来说一下 Angular Material， v10 有一个非常大的变化，就是增加了 datepicker 的区间选择功能，不用多说，这是一个极其实用的功能。...其实 v10 版本除了将 Angular 和 Angular Material 升级之外，主要是调整了 schematics ng add 的兼容问题，其它代码和 v9 最新版是一样的。...前期的工作主要是完善 v9 的版本。本文主要说一下 Ng-Matero 以及 Material Extensions 几个关键的优化点。...在线示例：https://ng-matero.github.io/ng-matero/#/forms/dynamic 主题化主题化的内容可以说很多，暂时不展开讲，简单说一下 Material Extensions

1.8K1 0

再不迁移到Material Design Components 就out啦

NavigationView Widget.Design.NavigationView Widget.MaterialComponents.NavigationView navigationViewStyle Snackbar...Widget.Design.Snackbar Widget.MaterialComponents.Snackbar snackbarStyle TabLayout TabItem Widget.Design.TabLayout...attr/colorSecondary 但是，您应该考虑不推荐使用这些属性。使用更合适的MDC属性或逐步淘汰它们。...attr/textAppearanceBody2" ... /> material.card.MaterialCardView> 自定义我们还可以选择在应用程序主题中覆盖类型比例...我们不建议使用 android:background 作为 MDC 控件的背景。因为它会覆盖 MaterialShapeDrawable。

4.1K3 0

【Android 逆向】APK 文件处理脚本 ApkTool.py ( 脚本简介 | 用法 | 分析 APK 文件 )

= -1: return line[pos + 8:len(line) - 2] # \r\n占了2个，加上单引号一共3个字符 return '...', 'libcocos2dlua.so': 'cocos引擎 lua', 'libcocos2djs.so': 'cocos引擎 javascipt',...正在签名: res/anim/design_snackbar_out.xml 正在签名: res/anim/fragment_fast_out_extra_slow_in.xml 正在签名...正在签名: res/layout/design_layout_snackbar_include.xml 正在签名: res/layout/design_layout_tab_icon.xml...正在签名: res/layout-ldrtl/material_textinput_timepicker.xml 正在签名: res/layout-sw600dp/design_layout_snackbar.xml

1.9K1 0

点击加载更多

Android 关于 Snackbar 基本使用

Flutter 构建完整应用手册-设计基础知识顶

Material Design —Snackbars &Toasts

升级Androidx后一些常用依赖的引入地址

Flutter - 处理手势

Flutter 构建完整应用手册-处理手势

Flutter中的操作提示

Blazor学习之旅(9)用MudBlazor重构Todo

Angular Material 的设计之美

Snackbar-Android M新控件

Material Design 实战之第三弹—— 悬浮按钮和可交互提示

Angular 6正式版发布，都有哪些新功能

Tooltip

Angular 6的新特性介绍

Android提醒微技巧，你真的了解Dialog、Toast和Snackbar吗？

Android Design Support Library初探-更新中

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

Ng-Matero V10 正式发布！

再不迁移到Material Design Components 就out啦

【Android 逆向】APK 文件处理脚本 ApkTool.py ( 脚本简介 | 用法 | 分析 APK 文件 )

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐