Ionic控件 Button
来源:互联网 发布:南大碎尸 知乎 编辑:程序博客网 时间:2024/06/05 11:45
1.简介
按钮是Ionic最重要的CSS组件之一,在移动APP开发中按钮的使用非常频繁。在Ionic中,我们无需像传统html那样使用input或button标签来创建一个按钮。我们可以用任何标签来创建一个按钮,只要我们为其指定一个名为button的类,Ionic自带的CSS将会将其渲染成一个按钮。
<any class="button">...这里是button的内容...</any>
不仅如此,Ionic允许我们指定下图中的类以获得对应的样式,使用起来非常方便,我们将一个个介绍。
2.样式
注意,下面五种样式可以自由组合,它们分别对应按钮显示的不同方面,我们只需要加上对应的类就可以获得我们想要的显示方式。
1)配色
Ionic内置了几种颜色,包括light,stable,positive,calm,balanced,energized,assertive,royal,dark,我们只需要在定义button的元素加上对应的button-{color}就能使按钮获得相应的背景色,前景色也为做相应的修改(除了light和stable为黑色外其他的都为白色)。
<div class="button button-light">button-light</div><div class="button button-stable">button-stable</div><div class="button button-positive">button-positive</div><div class="button button-calm">button-calm</div><div class="button button-balanced">button-balanced</div><div class="button button-energized">button-energized</div><div class="button button-assertive">button-assertive</div><div class="button button-royal">button-royal</div><div class="button button-dark">button-dark</div>
2)显示方式
button的默认显示方式是按照display:inline-block来显示,宽度是随着内部文字长度增长的。另外两种显示方式都是填满父元素的宽度,不同的是button-block是圆角边框。
<div class="padding"> <div class="button button-positive">inline-block(default)</div> <div class="button button-balanced button-block">button-block</div> <div class="button button-calm button-full">button-full</div></div>
3)大小
将元素的类指定button-small可以使得按钮变小,button-large可以使得按钮变大。
<div class="button button-block button-positive button-small">button-small</div><div class="button button-block button-positive button-normal">button-normal</div><div class="button button-block button-positive button-large">button-large</div>
4)特殊样式
将元素的类指定button-outline可以使得按钮样式只显示线框,button-clear可以使得按钮不显示框。
<div class="button button-block button-positive button-clear">button-clear</div><div class="button button-block button-positive button-outline">button-outline</div>
5)带图标
为按钮元素添加icon类和对应图标的类名即可指定图标,我们还可以加上icon-left或icon-right来控制图标的位置,下面是几种带图标的样式。
<div class="button icon-left ion-home">Home</div><div class="button icon-left ion-star button-positive">Favorites</div><div class="button icon-right ion-chevron-right button-calm">Learn More</div><div class="button icon-left ion-chevron-left button-clear button-dark">Back</div><div class="button icon ion-gear-a"></div><div class="button button-icon icon ion-settings"></div><div class="button button-outline icon-right ion-navicon button-balanced">Reorder</div>
3.按钮栏
在Ionic中我们可以将一组按钮连在一起形成一个按钮栏,各个按钮平分按钮栏的宽度,整个按钮栏是外框圆角。我们只要为这组按钮指定一个类含有button-bar的父元素即可实现按钮栏。
<div class="button-bar padding"> <div class="button button-positive">First</div> <div class="button button-balanced">Second</div> <div class="button button-calm">Third</div></div>
4.总结
上面介绍的只是ionic中button的冰山一角而已,在ionic中,button随着父元素的不同会有着特殊的展示方式,比如在ion-header-bar中,还有许多内置的button指令,如ion-delete-button等等。
而且,上面的按钮样式确实丰富多样,但是可能仍不能满足我们的要求,那我们就必须回到最原始的方式自己定义我们要的CSS而不是使用Ionic内置的CSS了。
- Ionic控件 Button
- Ionic控件 Button
- ionic使用记录----button
- ionic button 实用笔记
- ionic button指令
- ionic之样式button
- ionic--初级学习button
- ionic button 一些使用心得
- ionic之样式button-stable
- button控件
- Button控件
- Button控件
- Button控件
- button控件
- Button控件
- Button控件
- Button控件+自定义Button控件
- ionic 各控件使用
- py-faster-rcnn源码解读系列(二)——pascal_voc.py
- Java泛型编程
- Solr 6.0 学习环境搭建
- Codeforces510B【dfs】
- python linecache pachage
- Ionic控件 Button
- 【Java】我做笔试题遇到的问题(一)
- zookeeper在分布式应用中的作用
- Parsing Data for android-21 failed
- TestNG的IConfigurationListener监听器详解
- 51NOD 1101 换零钱
- 关于js的事件绑定以及优缺点
- 隐含语义索引lsi
- 生活随笔:《我为何要黑游戏策划》