Ionic - ปุ่มตัวเลือก

Radio buttonsเป็นองค์ประกอบอีกรูปแบบหนึ่งซึ่งเราจะกล่าวถึงในบทนี้ ความแตกต่างระหว่างปุ่มตัวเลือกจากรูปแบบสลับและช่องทำเครื่องหมายคือเมื่อใช้แบบเดิมคุณจะเลือกปุ่มตัวเลือกเพียงปุ่มเดียวจากรายการ อย่างหลังช่วยให้คุณสามารถเลือกได้มากกว่าหนึ่งข้อ

การเพิ่มปุ่มวิทยุ

เนื่องจากจะมีปุ่มตัวเลือกให้เลือกมากกว่าหนึ่งปุ่มเสมอวิธีที่ดีที่สุดคือสร้างรายการ เราทำสิ่งนี้เมื่อใดก็ตามที่เราต้องการองค์ประกอบหลายอย่าง คลาสรายการจะเป็นitem-radio. อีกครั้งเราจะใช้labelสำหรับสิ่งนี้ที่เราใช้กับรูปแบบอื่น ๆ ทั้งหมด อินพุตจะมีไฟล์nameแอตทริบิวต์ แอตทริบิวต์นี้จะจัดกลุ่มปุ่มทั้งหมดที่คุณต้องการใช้เป็นตัวเลือกที่เป็นไปได้ item-contentคลาสใช้เพื่อแสดงตัวเลือกอย่างชัดเจน ในตอนท้ายเราจะใช้ไฟล์radio-icon เพื่อเพิ่มไอคอนเครื่องหมายถูกที่จะใช้เพื่อทำเครื่องหมายตัวเลือกที่ผู้ใช้เลือก

ในตัวอย่างต่อไปนี้มีปุ่มตัวเลือกสี่ปุ่มและปุ่มที่สองถูกเลือก

<div class = "list">
   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -

กลุ่มปุ่มตัวเลือกหลายกลุ่ม

บางครั้งคุณต้องการสร้างมากกว่าหนึ่งกลุ่ม นี่คือสิ่งที่nameแอตทริบิวต์ถูกสร้างขึ้นสำหรับ; ตัวอย่างต่อไปนี้จะจัดกลุ่มสองปุ่มแรกและสองปุ่มสุดท้ายเป็นสองกลุ่มตัวเลือก

เราจะใช้ไฟล์ item-dividerชั้นเรียนเพื่อแยกสองกลุ่ม สังเกตว่ากลุ่มแรกมีname แอตทริบิวต์เท่ากับ group1 และอันที่สองใช้ group2.

<div class = "list">
   <div class = " item item-divider">
      Group1
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <div class = "item item-divider">
      Group2
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -