ไอออนิก - ปุ่มต่างๆ
มีปุ่มหลายประเภทใน Ionic Framework และปุ่มเหล่านี้เคลื่อนไหวอย่างละเอียดซึ่งจะช่วยเพิ่มประสบการณ์ของผู้ใช้เมื่อใช้แอพ คลาสหลักสำหรับปุ่มทุกประเภทคือbutton. คลาสนี้จะใช้กับปุ่มของเราเสมอและเราจะใช้เป็นคำนำหน้าเมื่อทำงานกับคลาสย่อย
ปุ่มบล็อก
ปุ่มบล็อกจะมีความกว้าง 100% ของคอนเทนเนอร์หลักเสมอ นอกจากนี้ยังมีการเพิ่มช่องว่างภายในเล็กน้อย คุณจะใช้button-blockคลาสสำหรับการเพิ่มปุ่มบล็อก หากคุณต้องการลบช่องว่างภายใน แต่คงความกว้างไว้เต็มคุณสามารถใช้ไฟล์button-full ชั้นเรียน
ต่อไปนี้เป็นตัวอย่างเพื่อแสดงการใช้งานของทั้งสองคลาส -
<button class = "button button-block">
button-block
</button>
<button class = "button button-full">
button-full
</button>
โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -
![](https://post.nghiatu.com/assets/tutorial/ionic/images/button-block-full.jpg)
ขนาดปุ่ม
มีสองคลาส Ionic สำหรับการเปลี่ยนขนาดปุ่ม -
button-small และ
button-large.
ต่อไปนี้เป็นตัวอย่างเพื่อแสดงการใช้งาน -
<button class = "button button-small">
button-small
</button>
<button class = "button button-large">
button-large
</button>
โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -
![](https://post.nghiatu.com/assets/tutorial/ionic/images/button-small-large.jpg)
ปุ่มสี
หากคุณต้องการจัดรูปแบบปุ่มของคุณคุณเพียงแค่ต้องเพิ่มระดับสีที่เหมาะสมลงไป เมื่อคุณจัดสไตล์องค์ประกอบของคุณคุณต้องเพิ่มคลาสองค์ประกอบหลักของคุณเป็นคำนำหน้าให้กับคลาสสีของคุณ เนื่องจากเรากำลังจัดรูปแบบแถบส่วนท้ายชั้นคำนำหน้าจะเป็นbar และคลาสสีที่เราต้องการใช้ในตัวอย่างนี้คือ assertive (สีแดง).
<button class = "button button-assertive">
button-assertive
</button>
โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -
![](https://post.nghiatu.com/assets/tutorial/ionic/images/ionic-button-color.jpg)
คุณสามารถใช้เก้าคลาสใดก็ได้ต่อไปนี้เพื่อกำหนดสีให้กับปุ่มแอพของคุณ -
ระดับสี | คำอธิบาย | ผลลัพธ์ |
---|---|---|
ปุ่มไฟ | เพื่อใช้สำหรับสีขาว | |
ปุ่มเสถียร | ใช้สำหรับสีเทาอ่อน | |
ปุ่มบวก | เพื่อใช้สำหรับสีฟ้า | |
ปุ่มสงบ | ใช้สำหรับสีฟ้าอ่อน | |
ปุ่มปรับสมดุล | เพื่อใช้สำหรับสีเขียว | |
ปุ่มกระตุ้น | เพื่อใช้สำหรับสีเหลือง | |
ปุ่มกล้าแสดงออก | เพื่อใช้สำหรับสีแดง | |
ปุ่มรอยัล | เพื่อใช้สำหรับสีม่วง | |
ปุ่มมืด | เพื่อใช้สำหรับสีดำ |
โครงร่างปุ่ม
หากคุณต้องการให้ปุ่มของคุณโปร่งใสคุณสามารถสมัครได้ button-outlineชั้นเรียน ปุ่มในคลาสนี้จะมีเส้นขอบและพื้นหลังโปร่งใส
ในการลบเส้นขอบออกจากปุ่มคุณสามารถใช้ไฟล์ button-clearชั้นเรียน ตัวอย่างต่อไปนี้แสดงวิธีใช้สองคลาสนี้
<button class = "button button-assertive button-outline">
button-outline
</button>
<button class = "button button-assertive button-clear">
button-clear
</button>
โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -
![](https://post.nghiatu.com/assets/tutorial/ionic/images/button-outline-clear.jpg)
การเพิ่มไอคอน
เมื่อคุณต้องการเพิ่มไอคอนให้กับปุ่มของคุณวิธีที่ดีที่สุดคือใช้ไฟล์ iconชั้นเรียน คุณสามารถวางไอคอนไว้ที่ด้านหนึ่งของปุ่มโดยใช้ปุ่มicon-left หรือ icon-right. โดยปกติคุณจะต้องการย้ายไอคอนไปด้านใดด้านหนึ่งเมื่อคุณมีข้อความบางส่วนอยู่ด้านบนของปุ่มดังที่อธิบายไว้ด้านล่าง
<button class = "button icon ion-home">
</button>
<button class = "button icon icon-left ion-home">
Home
</button>
<button class = "button icon icon-right ion-home">
Home
</button>
โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -
![](https://post.nghiatu.com/assets/tutorial/ionic/images/ionic-button-icons.jpg)
แถบปุ่ม
หากคุณต้องการจัดกลุ่มปุ่มสองปุ่มเข้าด้วยกันคุณสามารถใช้ปุ่ม button-barชั้นเรียน ปุ่มต่างๆจะมีขนาดเท่ากันตามค่าเริ่มต้น
<div class = "button-bar">
<a class = "button button-positive">1</a>
<a class = "button button-assertive">2</a>
<a class = "button button-energized">3</a>
<a class = "button">4</a>
</div>
โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -
![](https://post.nghiatu.com/assets/tutorial/ionic/images/ionic-button-bar.jpg)