Ionic控件 Button
来源:互联网 发布:java 调用执行jar包 编辑:程序博客网 时间:2024/05/29 16:59
1.简介
按钮是Ionic最重要的CSS组件之一,在移动APP开发中按钮的使用非常频繁。在Ionic中,我们无需像传统html那样使用input或button标签来创建一个按钮。我们可以用任何标签来创建一个按钮,只要我们为其指定一个名为button的类,Ionic自带的CSS将会将其渲染成一个按钮。
- 1
- 1
不仅如此,Ionic允许我们指定下图中的类以获得对应的样式,使用起来非常方便,我们将一个个介绍。
2.样式
注意,下面五种样式可以自由组合,它们分别对应按钮显示的不同方面,我们只需要加上对应的类就可以获得我们想要的显示方式。
1)配色
Ionic内置了几种颜色,包括light,stable,positive,calm,balanced,energized,assertive,royal,dark,我们只需要在定义button的元素加上对应的button-{color}就能使按钮获得相应的背景色,前景色也为做相应的修改(除了light和stable为黑色外其他的都为白色)。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
2)显示方式
button的默认显示方式是按照display:inline-block来显示,宽度是随着内部文字长度增长的。另外两种显示方式都是填满父元素的宽度,不同的是button-block是圆角边框。
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
3)大小
将元素的类指定button-small可以使得按钮变小,button-large可以使得按钮变大。
- 1
- 2
- 3
- 1
- 2
- 3
4)特殊样式
将元素的类指定button-outline可以使得按钮样式只显示线框,button-clear可以使得按钮不显示框。
- 1
- 2
- 1
- 2
5)带图标
为按钮元素添加icon类和对应图标的类名即可指定图标,我们还可以加上icon-left或icon-right来控制图标的位置,下面是几种带图标的样式。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
3.按钮栏
在Ionic中我们可以将一组按钮连在一起形成一个按钮栏,各个按钮平分按钮栏的宽度,整个按钮栏是外框圆角。我们只要为这组按钮指定一个类含有button-bar的父元素即可实现按钮栏。
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
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 各控件使用
- android gradle tools 3.X 中依赖,implement、api 指令
- 第三十七篇:JAVA访问数据库之连接数据库
- GridView频道管理
- 随机梯度下降与批梯度下降
- netscope——caffe的prototxt模型文件可视化工具
- Ionic控件 Button
- oracle 11g卸载方法
- 简谈java中的阻塞非阻塞与同步异步
- C++prime 第十五章的程序总结(购物车)
- effective C++条款三十解读
- javascript定义变量的四种方法:const,var,let
- springmvc 国际化实例
- Cocos2d-x 3.10 Api
- dubbo-admin管理平台搭建