3 Replies - 146 Views - Last Post: 30 December 2017 - 11:52 AM

#1 lastpeony  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 14-October 17

Using Image Radio Button Style in Ionic Radio Button

Posted 30 December 2017 - 02:53 AM

I am trying to style ionics radio button like this: http://jsfiddle.net/La8wQ/313/

This is how we create ionic radio button normally:
 <ion-list radio-group [(ngModel)]="cards">

         <ion-item >
           <ion-label class="someclass" >text</ion-label>
           <ion-radio   value="textsradio"></ion-radio>
         </ion-item>

</ion-list>

with classic css and html its like this:

<div class="cc-selector">


       <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
       <label class="drinkcard-cc visa" for="visa"></label>

       <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
       <label class="drinkcard-cc mastercard"for="mastercard"></label>
</div>


How can i apply this style to ionics radio button ?

Is This A Good Question/Topic? 0
  • +

Replies To: Using Image Radio Button Style in Ionic Radio Button

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5121
  • View blog
  • Posts: 13,790
  • Joined: 18-April 07

Re: Using Image Radio Button Style in Ionic Radio Button

Posted 30 December 2017 - 11:17 AM

So the example you show for your ionic list is a pretty manual fixed list way of building the list. Considering that you include a model, my guess is you want to build this list dynamically based on the number of cards. For that you should be looking at building your ion-items using an ng-repeat that will loop through the items. I would play around with something like this...

<ion-list radio-group [(ngModel)]="cards">

         <ion-item ng-repeat="card in cards">
           <ion-label class="drinkcard-cc {{card.name}}"></ion-label>
           <ion-radio value="{{card.name}}"></ion-radio>
         </ion-item>

</ion-list>



See how we define the list, but then we repeat the items based on the model. I am assuming here that "cards" is going to be a list of card objects. We create a label and radio based on the values of the card like its name. If the first card is mastercard, it will result in an ion-label with a class of "drinkcard-cc mastercard" and a radio button with a value of "mastercard".

Start small and get the list generating and then worry about customizing the label and radio buttons according to their card's values. I hope this helps. :)
Was This Post Helpful? 0
  • +
  • -

#3 lastpeony  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 14-October 17

Re: Using Image Radio Button Style in Ionic Radio Button

Posted 30 December 2017 - 11:50 AM

View PostMartyr2, on 30 December 2017 - 11:17 AM, said:

So the example you show for your ionic list is a pretty manual fixed list way of building the list. Considering that you include a model, my guess is you want to build this list dynamically based on the number of cards. For that you should be looking at building your ion-items using an ng-repeat that will loop through the items. I would play around with something like this...

<ion-list radio-group [(ngModel)]="cards">

         <ion-item ng-repeat="card in cards">
           <ion-label class="drinkcard-cc {{card.name}}"></ion-label>
           <ion-radio value="{{card.name}}"></ion-radio>
         </ion-item>

</ion-list>



See how we define the list, but then we repeat the items based on the model. I am assuming here that "cards" is going to be a list of card objects. We create a label and radio based on the values of the card like its name. If the first card is mastercard, it will result in an ion-label with a class of "drinkcard-cc mastercard" and a radio button with a value of "mastercard".

Start small and get the list generating and then worry about customizing the label and radio buttons according to their card's values. I hope this helps. :)/>


Hi thanks for the answer but i am just trying to apply that style to ionics radio button component.Nothing more.
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5121
  • View blog
  • Posts: 13,790
  • Joined: 18-April 07

Re: Using Image Radio Button Style in Ionic Radio Button

Posted 30 December 2017 - 11:52 AM

In that case, just apply the css classes to the elements. Nothing magical about that.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1