美文网首页
ionic——基于手册更改的item

ionic——基于手册更改的item

作者: 一只飞 | 来源:发表于2017-06-02 11:16 被阅读0次

    如图:


    image.png
    1、图标列表加入toggle
    <ion-item class="item item-light item-icon-left item-icon-right"> <i class="icon ion-ios-gear-outline"></i> <div style="border:0px;float:left;width:100%;"> <div style="border:0px;width:75%;float:left;height:2em;line-height: 2em;">name</div> <label style="float:right;padding-bottom:0px;" class="toggle toggle-assertive"> <input type="checkbox" ng-model="aa" ng-change=""> <div class="track"> <div class="handle"></div> </div> </label> </div> <i class="icon ion-ios-arrow-right"></i> </ion-item>
    2、浏览器样式的单选按钮
    <ion-item> <input type="radio" name="radio" ng-value="" ng-model=""> name test1111 </ion-item>
    3、带头像选项列表右侧加入标签
    <ion-item class="item-icon-left item-icon-right"> <i class="icon ion-android-home"></i> <div> <h2>name1</h2> <p>name2</p> </div> <i class="icon ion-ios-arrow-right"></i> </ion-item>
    4、图标列表右侧改为文字
    <ion-item class="item-icon-left"> <i class="icon ion-ios-film" style="color: #9e9e9e"></i> <i>name</i> <i style="float:right;">value</i> </ion-item>
    5、堆叠标签加入按钮
    <div class="item item-input" ng-repeat="(k,comm) in learnComms"> <div style="width:60%;"> <span class="input-label">{{comm}}</span> <input type="text" placeholder="无"> </div> <div style="width:40%;"> <div class="buttons" style="float:right;padding-right:10px;"> <button class="button button-positive" ng-click="sendLearn()">学习</button> <button class="button button-positive" ng-click="codeSave()">保存</button> </div> </div> </div>
    注意,不要使用label;

    相关文章

      网友评论

          本文标题:ionic——基于手册更改的item

          本文链接:https://www.haomeiwen.com/subject/hlzyfxtx.html