tabs ใน ionicframework เราสามารถเลือกใช้งานได้จาก 2 วิธีคือ
การใช้ ion-tabs และ การใช้ css class
โดยเนื้อหาที่อธิบายจากอ้างอิงจากสองลิ้งค์นี้
โค้ดตัวอย่างและไฟล์ที่เกี่ยวข้อง จะขอใช้งานจากบทความก่อนหน้า ดูได้ที่
การใช้งาน ionicmodal ใน ionicframework ตอนที่ 10
https://www.ninenik.com/content.php?arti_id=560 via @ninenik
การใช้งาน tabs แบบที่ 1 ด้วย ion-tabs
iontabs นั้นเราจะใช้งาน โดยแบ่งหน้าที่จะแสดงออกเป็นแท็บเมนู เช่น เรามีไฟล์
welcome.html 1 ไฟล์ ต้องการแสดงแบบมีแท็บเมนู และเนื้อหาในไฟล์ welcome.html
เราจะใช้โค้ดเบื้องต้น ของ ion-tabs ดังนี้
ไฟล์ welcome.html วาโครงสำหรับใช้ tabs
<ion-tabs class="tabs-assertive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
จากนั้น ในส่วจของ tab 1 content หรือเนื้อหาของแท็บ เราก็ใส่โค้ดหน้า
app ปกติที่เราใช้งานลงไปซึ่งประกอบไปด้วย header และ content ก็จะได้
หมายเหตุ: ห้ามนำ ion-tabs ไปวางไว้ด้านในของ ion-content เพราะจะทำ
ให้การแสดงผลผิดพลาดได้
โค้ดไฟล์ welcome.html เบื้องต้นดังนี้
<ion-tabs class="tabs-assertive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
<ion-header-bar class="bar bar-header bar-assertive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">My Ionic</h1>
</ion-header-bar>
<!-- กำหนด class ให้กับ ion-content กรณี มี header-->
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>Welcome</h2>
<p>
This is welcome.html template
<br>
<br>
<br>
</p>
</div>
</div>
</ion-content>
</ion-tab>
<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
<!-- Tab 2 content -->
content tab 2
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
content tab 3
</ion-tab>
</ion-tabs>
ดูตัวอย่าง
จะสังเกตเห็นว่า การใช้แท็บเมนูลักษณะนี้ จะเป็นการโหลดข้อมูลเข้ามาครั้งแรกพร้อมกัน และ
ข้อมูลในแต่ละแท็บเมนู จะใช้ $scope เดียวกัน
ข้อจำกัดคือเวลาใช้งาน จะต้องไปกำหนดทุกครั้งที่ต้องการใช้ หาก app ของเราต้อง
การให้มีแท็บเมนูทุกหน้า รวมทั้งมีความยืดหยุ่นน้อยกว่าการใช้งานในรูปแบบ css
การปรับแต่งการใช้าน ion-tabs สามารถทำได้โดยการใช้ css class ดังนี้
กำหนดสี
tabs-{ชื่อสีของ ionic} เช่น tabs-positive
ให้แสดงเฉพาะ icon ไม่แสดงข้อควม
tabs-icon-only
ให้แสดง icon และข้อความ โดยให้ icon อยู่ด้านบนของข้อความ
tabs-icon-top
ให้แสดง icon และข้อความ โดยให้ icon อยู่ด้านซ้ายของข้อความ
tabs-icon-left
การกำหนดให้มีแถบคาดแท็บเมนู ที่กำลังใช้งานอยู่ หรือ active อยู่
tabs-striped
กำหนดสีพื้นหลังให้กับแท็บเมนู จะใช้คู่กับ tabs-striped
tabs-background-{ชื่อสีของ ionic} เช่น tabs-background-assertive
กำหนดสี จะใช้คู่กับ tabs-striped
tabs-color-{ชื่อสีของ ionic} เช่น tabs-color-balanced
ตัวอย่างการกำหนดและรูปประกอบ
<ion-tabs class="tabs-assertive ">
<ion-tabs class="tabs-assertive tabs-icon-left">
<ion-tabs class="tabs-assertive tabs-icon-top">
<ion-tabs class="tabs-striped tabs-top tabs-icon-top tabs-background-assertive tabs-stable">
<ion-tabs class="tabs-striped tabs-icon-only tabs-background-assertive tabs-color-dark">
การใช้งาน tabs แบบที่ 2 ด้วย css class
การใช้งาน และการกำหนด tabs แบบ css class ก็จะใช้รูปแบบตามที่อธิบายด้านบน
แต่จะไม่ได้มีการเรียกใช้งาน ion-tabs จะใช้แท็ก html ปกติเช่น div กำหนดราย
ละเอียดต่างของ tabs และจัดรูปแบบด้วย css class การแสดงข้อมูลจะใช้เป็นแบบ
ลิ้งค์ไปที่ไฟล์ หรือเรียกใช้ฟังก์ชั่น ng-click เพื่อทำงาน ต่างจาก ion-tabs ที่จะใช้
วิธีแสดงเนื้อหาแท็บเมนู ที่ถูกซ่อนไว้
รูปแบบแท็บเมนู ที่กำหนด้วย css class อย่างง่าย
<div class="tabs">
<a href="#/" class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a href="#/aboutus" class="tab-item">
<i class="icon ion-ios7-clock"></i>
About us
</a>
<a href="#/contactus" class="tab-item" >
<i class="icon ion-star"></i>
Contact us
</a>
</div>
กรณีที่ต้องการใช้งาน tabs-striped เราจะต้องเพิ่ม div เข้าไปอีกขึ้นจะได้เป็น
<div class="tabs-striped tabs-background-dark tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#/">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" href="#/aboutus">
<i class="icon ion-ios7-clock"></i>
About us
</a>
<a class="tab-item" href="#/contactus">
<i class="icon ion-star"></i>
Contact us
</a>
</div>
</div>
ตัวอย่างโค้ดการใช้งานในหน้า aboutus.html
<ion-header-bar class="bar bar-header bar-assertive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">About Us</h1>
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>
<!-- กำหนด class ให้กับ ion-content กรณี มี header-->
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>About Us</h2>
<p>
This is aboutus.html template
</p>
</div>
</div>
</ion-content>
<div class="tabs tabs-assertive ">
<a href="#/" class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a href="#/aboutus" class="tab-item">
<i class="icon ion-ios7-clock"></i>
About us
</a>
<a href="#/contactus" class="tab-item" >
<i class="icon ion-star"></i>
Contact us
</a>
</div>
การจัดวาง จะต่างจากการใช้งาน ion-tabs โดยจะวางไว้ด้านนอกของ
ion-content
การใช้งาน แบบ css class เราจำเป็นต้องกำหนดค่าต่างๆ เองเช่น
กำหนดลักษณะของแท็บเมนูที่ active กรณีใช้งานใน ion-view
ตัวอย่าง
มาดูรูปแบบการใช้งาน tabs แบบ css class แบบกำหนดให้ใช้กับทุกๆหน้า
โค้ดการจัดวางคู่กับการใช้งาน side menu และ ion-view ไฟล์ index.html
<!DOCTYPE html>
<html ng-app="myIonicApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>My Ionic 3</title>
</head>
<body ng-controller="myIonicHome">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header bar-assertive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
<div class="tabs tabs-energized tabs-icon-top">
<a nav-clear href="#/" class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a nav-clear href="#/aboutus" class="tab-item">
<i class="icon ion-ios7-clock"></i>
About us
</a>
<a nav-clear href="#/contactus" class="tab-item" >
<i class="icon ion-star"></i>
Contact us
</a>
</div>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a nav-clear nav-clear menu-close class="item item-icon-left" href="#/">
<i class="icon ion-home"></i>
Home
</a>
<a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
<i class="icon ion-at"></i>
About Us
</a>
<a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
<i class="icon ion-email"></i>
Contact Us
<i class="icon ion-ios7-telephone-outline"></i>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
เนื้อหาเกี่ยวกับการใช้งาน tabs จะมีเพิ่มเติมในบทความต่อไป
เนื้อหาที่เกี่ยวข้อง