Ionic控件 Button

最新推荐文章于 2024-08-17 11:37:44 发布

原创最新推荐文章于 2024-08-17 11:37:44 发布 · 594 阅读

0 ·

CC 4.0 BY-SA版权

ionic 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Ionic框架中按钮组件的各种样式选项，包括配色、显示方式、大小调整等，并展示了如何添加图标以及创建按钮栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简介

　　按钮是Ionic最重要的CSS组件之一，在移动APP开发中按钮的使用非常频繁。在Ionic中，我们无需像传统html那样使用input或button标签来创建一个按钮。我们可以用任何标签来创建一个按钮，只要我们为其指定一个名为button的类，Ionic自带的CSS将会将其渲染成一个按钮。

<any class="button">...这里是button的内容...</any>1
1

　　不仅如此，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>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是圆角边框。

<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>
1
2
3
4
5
6
1
2
3
4
5
6

这里写图片描述

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>1
2
3
1
2
3

这里写图片描述

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>1
2
1
2

这里写图片描述

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>1
2
3
4
5
6
7
1
2
3
4
5
6
7

这里写图片描述

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>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了