按钮 : .button

ionic使用.button样式定义按钮元素：

<any< span="" style="word-wrap: break-word;"> class="button">...

一旦元素应用了.button样式，就可以继续选用两类预定义样式来进一步 声明元素及其内容的外观：

1. 同级样式 - 同级样式与.button应用在同一元素上，声明元素的位置、配色等。

2. 下级样式 - 下级样式只能应用在.button的子元素上，声明子元素的大小等特征。

按钮

Default

button-light

button-stable

button-positive

button-calm

button-balanced

button-energized

button-assertive

button-royal

button-dark

.button : 嵌入图标

使用内置的Ionicons样式，图标可以很容易地加入到.button中：

<a< span="" style="word-wrap: break-word;"> class="button">
    <i< span="" style="word-wrap: break-word;"> class="icon ion-home">Home

但是更简洁的办法是：直接在.button上设置样式，这样可以有效减少元素的数目：

<a< span="" style="word-wrap: break-word;"> class="button icon-left ion-home">...

• .icon-left - 将图标置于按钮左侧

• .icon-right - 将图标置于按钮右侧

图标按钮

 Loading...

Home

Favorites

Learn More

Back

Reorder

在列表中使用按钮

和插入图标类似，向.item中插入按钮需要满足两个条件：

1. 在.item元素上声明按钮位置。按钮可以位于列表的左侧或右侧， 分别使用.item-button-left和.item-button-right声明

2. 在.item元素内插入按钮。

列表中使用按钮

新闻

邮件

电话

设置

云服务

在线帮助