{"id":2329,"date":"2015-11-26T10:55:00","date_gmt":"2015-11-26T10:55:00","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2329"},"modified":"2015-11-26T11:15:50","modified_gmt":"2015-11-26T11:15:50","slug":"how-to-design-a-two-column-button-in-ionic-framework","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/how-to-design-a-two-column-button-in-ionic-framework\/","title":{"rendered":"How to design a two column button in Ionic framework"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

As you may know, I’m really into Ionic framework lately\u00a0and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top All time answerers<\/a> list.<\/p>\n

I actually asked\u00a0this question<\/a>\u00a0myself:<\/p>\n

What I would like to achieve is this:<\/p>\n

\"enter<\/p>\n

Surely, I went through the button<\/a> documentation, but it seems nothing similar is there. So, I would appreciate some pointing in the right direction (codepen with a basic example would be most awesome).<\/p>\n

So, ideally, this would be one button tag where I would be able to pass two variables (one which would appear on the left and one on the right). This does smell like a job for a Angular directive, though I haven’t fiddled with it too much just yet so a friendly nudge in the right direction would be appreciated.<\/p>\n

Answer from Malek Hijazi<\/a>\u00a0was pointing out to use the ButtonBar<\/a>\u00a0component, but I already knew about it and it wasn’t what I needed. Finally, I managed to\u00a0answer\u00a0this question myself after some fiddling with it:<\/p>\n

What I ended up doing in the end was this: I created a div<\/code> with a class button<\/code> and then inside it I created additional two div<\/code>‘s with custom classes.<\/p>\n

How this looks like on CodePen:<\/p>\n

And, the code below:<\/p>\n

.leftButtonSide {\r\n    width: 50%;\r\n    float: left;\r\n    color: #000;\r\n}\r\n\r\n.rightButtonSide {\r\n    width: 50%;\r\n    float: left;\r\n    background: #F2F2F2;\r\n    color: #000;\r\n    border-radius: 2px;\r\n}<\/pre>\n
<div ng-repeat=\"d in data\" class=\"button button-positive-outline\">\r\n    <div class=\"leftButtonSide\">2<\/div>\r\n    <div class=\"rightButtonSide\">2,00<\/div>\r\n<\/div><\/pre>\n
True, for the exact same look you would have to play a bit with CSS. I ended up with this in the end:<\/p>\n
\"\"<\/p>\n
Hope this helps someone too!<\/p>\n
https:\/\/twitter.com\/HitmanHR\/status\/669836667893768192<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts, I will be posting my…<\/p>\n","protected":false},"author":1,"featured_media":1991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,35],"tags":[],"class_list":["post-2329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=2329"}],"version-history":[{"count":4,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2329\/revisions"}],"predecessor-version":[{"id":2333,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2329\/revisions\/2333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/1991"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}