ไอออนิก - ส่วนท้าย

Ionic footerจะอยู่ที่ด้านล่างของหน้าจอแอพ การทำงานกับส่วนท้ายเกือบจะเหมือนกับการทำงานกับส่วนหัว

การเพิ่มส่วนท้าย

คลาสหลักสำหรับส่วนท้ายของ Ionic คือ bar(เช่นเดียวกับส่วนหัว) เมื่อคุณต้องการเพิ่มส่วนท้ายลงในหน้าจอคุณต้องเพิ่มbar-footer เรียนไปยังองค์ประกอบของคุณหลังหลัก barชั้นเรียน เนื่องจากเราต้องการใช้ส่วนท้ายของเราบนทุกหน้าจอในแอปเราจะเพิ่มลงในไฟล์body ของ index.htmlไฟล์. เราจะเพิ่มชื่อสำหรับส่วนท้ายของเราด้วย

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

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

สีส่วนท้าย

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

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

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

คุณสามารถใช้เก้าคลาสต่อไปนี้เพื่อกำหนดสีที่คุณเลือกให้กับส่วนท้ายของแอป -

ระดับสี	คำอธิบาย	ผลลัพธ์
แท่งไฟ	เพื่อใช้สำหรับสีขาว
บาร์เสถียร	ใช้สำหรับสีเทาอ่อน
บาร์บวก	เพื่อใช้สำหรับสีฟ้า
บาร์สงบ	ใช้สำหรับสีฟ้าอ่อน
บาร์สมดุล	เพื่อใช้สำหรับสีเขียว
บาร์ที่มีพลัง	เพื่อใช้สำหรับสีเหลือง
กล้าแสดงออก	เพื่อใช้สำหรับสีแดง
บาร์รอยัล	เพื่อใช้สำหรับสีม่วง
บาร์มืด	เพื่อใช้สำหรับสีดำ

องค์ประกอบส่วนท้าย

ส่วนท้ายอาจมีองค์ประกอบอยู่ข้างใน โดยส่วนใหญ่คุณจะต้องเพิ่มปุ่มที่มีไอคอนอยู่ในส่วนท้าย

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

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

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

หากคุณต้องการย้ายปุ่มไปทางขวาคุณสามารถเพิ่มได้ pull-right ชั้นเรียน

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

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