jquery - how to make button in ionic + css -
i need design toolbar in ionic .i able make tool bar not similar in below pic.in given image buttons small height , small font .second thing second button bigger than rest .in given image button have different width .can make same button in ionic tried in ionic not able make same above how make same type of toolbar in ionic show in image
here code
![<html ng-app="ionicapp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>tabs example</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body> </body> <ion-view> <ion-header-bar align-title="center" class="bar-balanced"> <div class="buttons"> <i style="font-size:30px;" class='icon ion-chevron-left'></i> </div> <h1 class="title">account</h1> </ion-header-bar> <ion-content> <div class="button-bar"> <a class="button" ui-sref="d" ui-sref-active="button-balanced">details</a> <a class="button" ui-sref="lunch" ui-sref-active="button-balanced">related</a> <a class="button" ui-sref="dinner" ui-sref-active="button-balanced">sad</a> <a class="button" ui-sref="dinner" ui-sref-active="button-balanced">ss</a> </div> </ion-content> </ion-view> </html>]
try adding in css @ bottom else may need use !important.
.button-bar > .button:first-child{ border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } .button-bar > .button:last-child{ border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }
i have updated sample
Comments
Post a Comment