最新版本号[免费下载]

ionic中的buttom使用

作者:本站编辑 发布时间:2015-11-24 来源:本站原创 点击数:

按钮 : .button

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

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

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

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

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

.bar




按钮





.button : 嵌入图标

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

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

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

Learn More

Back

Reorder

在列表中使用按钮

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

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

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



列表中使用按钮


    新闻


    邮件


    电话


    设置


    云服务


    在线帮助


    本文责任编辑: 加入会员收藏夹 点此参与评论>>
    复制本网址-发给QQ/微信上的朋友
    上一篇文章:ionic .item : 嵌入大图
    AI智能听书
    选取音色