toggle按钮(请问,怎样让两个按钮控制一个toggle)
本文目录
- 请问,怎样让两个按钮控制一个toggle
- 英语toggle和switch区别是什么
- javascript的toggle()如何给不同按钮使用
- [Angular Material完全攻略] Day 04 - MatButton、MatButtonToggle和MatRipple
请问,怎样让两个按钮控制一个toggle
只能对同一元素(例如按钮)使用,你这是两个按钮操作一个对象,所以toggle是不行的。你可以给按钮A注册一个事件,然后显示区域,再给按钮B注册一个事件,隐藏区域,同时解绑按钮B的事件
英语toggle和switch区别是什么
第一switch是在多个不同状态或者是选择项之间转换(比如电闸开关)第二,toggle是在开和关之间两种状态切换。他是特指事物只能有两种状态,而且是任何时候只能有两种中的其中一种。比如按钮之间之间的按下和弹起。
javascript的toggle()如何给不同按钮使用
这个跟img1关系不太大...你既然都定义了函数了..那么就可以让大家共同使用...img2想用的时候..就直接.onclick="toggle(’side2’,’menu2’)"就可以了...函数的参数只是形参..它只在函数的内部起作用..出了函数会被自动释放....比如你定义的形参虽然是side1....menu1..但是你只要传递的值是side2.menu2..那么..形参的值就是side2.menu2...形参就相当于函数内的定义的变量...但是这个变量的值等于我们传递进来的值...
[Angular Material完全攻略] Day 04 - MatButton、MatButtonToggle和MatRipple
今天我们要来介绍Angular Material按钮(button)的使用方法,按钮可以说是一切互动介面的基本,只要按下了按钮,所有事情都可能会发生,也因此设计良好的按钮是非常重要的,除了让事情发生外,也要让使用者能够明确的知道按钮背后的意义,今天就让我们看看Material Design中按钮的设计思维,以及如何在Angular Material如何轻易地达到这些设计的目标吧!
在 Material Design的Button的设计指南 中,按钮主要分为3种类型:
除了扁平化的按钮是为了在画面上有协调的感觉以外,其他的按钮设计都是为了凸显自身的存在,因此在设计上也都会呈现阴影的感觉,让视觉上更加清楚。
在Angular Material中,所有的按钮都放置在MatButtonModule中,因此使用时记得加入这个Module
由于按钮在网页上的存在极具意义,Angular Material在设计上并未把按钮封装成component,而是以directive的方式附著在 《button》 或 《a》 标签上,并透过样式的变化让原来的 《button》 或 《a》 标签具有Material Design的风格。
扁平化按钮是最基本的按钮样式,使用上非常简单,在原来的button或a标签上加上 mat-button 即可
这时候在画面上看起来会完全没有按钮的感觉,而只是个文字的存在,但当滑鼠移到按钮上时,则会看到比较深色的背景,按下去时则会产生互动的涟漪效果。
当然,我们也可以使用 color 属性来改变按钮的颜色,同时也可以使用 disabled 属性禁止按钮被点选。
效果如下:
比起扁平化的按钮,凸起的按钮会有明显的反差,也会有比较深的阴影效果,以凸显按钮的存在,凸起的按钮需要加上mat-raised-button
效果如下:
要替按钮加上Icon本身是一件很简单的事情,在标签内加上 《mat-icon》 就可以了,例如:
效果如下:
不过如果我想只想要icon,不要搭配文字呢?
结果:
这样有点问题的是,左右留白太多了好像有点浪费空间,毕竟只想要icon的按钮通常就是为了能够节省空间啊!这时候可以使用专门为了呈现icon的 mat-icon-button 来解决这个问题:
结果:
看起来就单纯许多,如果希望凸显这个按钮,我们可以先用 mat-raised-button 将它变成更明显的按钮,在使用 mat-icon-button 改变成为左右不留白的样式
结果:
可以看到按钮的留白就移除了,边角也变成了圆形的,只有Icon的单一按钮用这样的呈现方式感觉还不错!
接下来要介绍的是预设就是圆形的floating action button,我们使用到 mat-fab 这个directive:
效果如下:
可以发现一件事情,在没有指定颜色的时候, mat-fab 的样式与accent颜色是一样的,可以见得floating action button本身的设计理念就是为了凸显它的存在感,这刚好与accent的概念是用来强调这里有东西的颜色概念一样,不得不佩服Angular Material设想得非常周到。
mat-fab 本身应为圆形且要凸显的效果,整个按钮看起来会比较大,但对于比较小的区块中要使用时反而会显得太过突兀,这时候我们也可以使用 mat-mini-fab 来产生比较小的floating action button
跟原来的按钮比较效果如下:
mat-mini-fab 产生的按钮样式跟一般的按钮高度就会一样,因此看起来会跟使用 mat-raised-button 加上 mat-icon-button 的组合技有一样的效果,不过在语义上则是不一样的东西。
以上就是整个Angular Material中的按钮基本用法,并不会非常困难,主要就是几个directives,依照不同的情境决定使用方式;接下来要介绍的是类似按钮却不是按钮的东西,叫做按钮开关(button toggle)。
按钮开关基本上不是按钮,反而比较类似checkbox,偏偏它又不像checkbox是表单控制项,可以搭配ngModel使用,因此单一的按钮开关使用上会比较没有意义,而是使用一个群组式的按钮开关,应用层面比较广
mat-button-toggle 放在MatButtonToggleModule中,使用前记得加入这个Module,加入后我们可以直接在画面上使用
结果如下:
可以看到每次点下去,就有切换开关的效果。 mat-button-toggle 这个component本身还有如 checked、value、disabled 等属性可以使用,我们将在下一个Button Toggle Group中一起混著使用
mat-button-toggle-group 可以放置多个 mat-button-toggle ,并且依照被选取的mat-button-toggle来决定自己的值是什麽,我们可以设计一个简单的画面如下:
在上面的程式中,第一段ButtonToggleGroup中我们使用value为每个 mat-button-toggle 中设定所属的值,并且设定 checked="true" 来设定预设选取的效果、以及 disabled 来设定禁止点选,接著透过template reference取得ButtonToggleGroup的value值,也就是里面真正被开启的按钮值。
第二段ButtonToggleGroup中我们加入了 mutiple ,让里面的ButtonToggle可以复选,另外加上了 vertical="true" 改变排列方式,不过在复选时我们无法直接使用buttonToggleGroup.value来取得值,因此只能各自取得里面的ButtonToggle的选取状态。
效果如下:
关于ButtonToggleGroup中 mutiple 的设定,值得注意的是没有加上 mutiple 时,我们可以直接取用其中的value,来得到被选取的状态,同时也支援使用ngModel;加上 mutiple 后,由于不会有资料传入value中,因此ngModel也因此无法使用了。
详细的其他属性可以参考 ButtonToggle的API文件 。
介绍一个官方文件没有提到,但官方source code的demo app有示范的一个有趣的东西,也就是涟漪效果,这个效果主要用在按钮上面,在许多其他元件也可看到这个特效的踪影,在刚刚的介绍中我们也看到了按下按钮后会产生的特效;实际上这个特效有写成一个directive,让我们可以在不同地方使用,而且能调整许多细节。
首先加入MatRippleModule后,我们先来个简单的版本,直接用一个div并加上 mat-ripple 这个directive就好!
我们在这边加上了一个class的设定
position和transaition是必要的,其他可以依照情况设定,只要有这样的设定,立刻就可以为我们的画面加上涟漪效果啦!
除了基本的设定外, mat-ripple 还有其他属性可以设定,让画面呈现更加不一样,以下是 mat-ripple 的主要属性
例如以下程式码,我们可以在画面上产生数个粉红色且扩散速度慢的涟漪点。
结果如下:
我们也能从程式里面去直接触发涟漪的产生,如下:
ripple.launch 的前两个参数为涟漪点产生的位置,但目前这个计算会跑掉,所以我们在第三个参数中设定相关属性时将centered设为true,强制从中心点开始,另外这边我们加了一个persistent为true,代表涟漪点产生后不会自动淡出。我们可以透过 fadeOutAll() 把所有涟漪点都淡出。
效果如下:
是不是很有趣啊!
今天我们介绍了非常实用的元件- 按钮 ,按钮可以说是一切互动的开始,透过按钮我们可以期待会有事情发生,而在Material Design中对于按钮的设计也是一门学问,如何在低调与奢华的按钮之间选择,影响了使用者对画面的观感。
除此之外我们也介绍了 开关型的按钮 ,这种按钮在特定的情境下会非常实用。
最后我们额外介绍了文件目前没有的 涟漪效果 ,这个效果在许多元件中都能看到,因此拉出来变成一个独立的directive也是件正常不过的事情,除此之外 mat-ripple 还能有许多更细部的设定,让效果更加丰富。
在介绍过几个实用的元件及功能后,明天开始我们就要开来组合各种元件,并且完成各式各样的画面啦!!
***隐藏网址*** 分支:day-04-mat-button
更多文章:
office2003精简版(怎样下载Microsoft Office 2003软件)
2024年6月11日 22:29
东方卫视今晚回看回放(2022东方卫视春晚完整版回放为什么没有)
2024年8月28日 22:01
mp3转mp4在线转换器(如何将歌曲MP3格式转换成MP4格式,如何操作转换器请具体说明)
2024年7月20日 17:25
中国农业银行手机掌上银行app下载(怎么下载中国农业银行手机银行)
2024年7月17日 18:20
京东微选现在访问入口在哪里 在微信购物里找不到入口了?微选怎么发布宝贝急急急!
2024年6月19日 18:15
hai360(我想问下hai360海外购到底怎么样 请用过的人帮我分析一下谢谢了)
2024年7月24日 13:34
一键重装系统win7旗舰版(怎么样一键重装系统win7旗舰版)
2024年7月8日 03:45
东方万里行官方网(东方万里行官方网太差劲了,总说系统繁忙,无法注册,这是为什么啊)
2023年10月14日 17:40