NAVBAR DAN TOOLBAR DALAM FRAMEWORK7

TUGAS MATA KULIAH

Dosen Pengampu :

Primaadi Airlangga, M. IT.

Oleh:

MUHAMMAD AVIV SUBARKAH

1502040540

TI-A

PROGAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI

UNIVERSITAS KH. A. WAHAB HASBULLAH

TAMBAKBERAS JOMBANG
2018
 NAVBAR DAN TOOLBAR PADA FRAMEWORK7

1. NAVBAR
Navbar adalah area tetap di bagian atas layar yang berisi
judul halaman dan elemen navigasi.
Navbar memiliki 3 bagian utama: Left (Kiri), Title (Judul)
dan Right (Kanan). Setiap bagian dapat berisi konten
HTML apa pun, tetapi disarankan untuk menggunakannya
dengan cara berikut:
 Left (Bagian kiri)
dirancang untuk digunakan dengan "Back Link", ikon
atau dengan tautan/link teks tunggal.
 Title (Judul)
Bagian judul digunakan untuk menampilkan judul
halaman atau tautan tab (tombol baris / pengontrol
tersegmentasi).
 Right (Bagian Kanan)
Bagian kanan sama dengan bagian Kiri.

Navbar sendiri memiliki beberapa hal :

A. NAVBAR HTML Layout
Layout Navbar cukup sederhana dan menjelaskan sendiri:

Navbar Layout sendiri memiliki macam-macam jenis :

1. Navbar With Links
Untuk menambahkan link di Kiri atau bagian kanan Anda hanya perlu menambahkan tag <a>
dengan tambahan class link :

<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">Left Link</a>
</div>
<div class="title">Page Title</div>
<div class="right">
<a href="#" class="link">Right Link</a>
</div>
</div>
</div>
2. Multiple Links
Navbar dengan lebih dari 1 link. Cukup tambahkan lebih banyak <a class = "link" ke bagian
yang diperlukan:

<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">Left 1</a>
<a href="#" class="link">Left 2</a>
</div>
<div class="title">Page Title</div>
<div class="right">
<a href="#" class="link">Right 1</a>
</div>
</div>
</div>

3. Links With Icons + Text

Inilah sedikit perbedaan. Dalam hal ini kita perlu membungkus teks link dengan elemen
<span>. Hal ini diperlukan untuk jarak yang benar antara icon dan "kata", dan untuk
animasi:

<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="title">Title</div>
<div class="right">
<a href="#" class="link">
<i class="icon another-icon"></i>
<span>Menu</span>
</a>
</div>
</div>
</div>

4. Links With Icons Only

Jika perlu link dengan ikon dan tanpa teks kita perlu tambahan icon-only class untuk link.
Dengan class link, ini akan memiliki ukuran tetap sehingga kita tidak dapat melewatkannya
dengan jari:
 <div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only">
<i class="icon icon-back"></i>
</a>
</div>
<div class="title">Title</div>
<div class="right">
<a href="#" class="link icon-only">
<i class="icon another-icon"></i>
</a>
</div>
</div>
</div>

5. Large Title
Large-title navbar memiliki "baris" (atau "bar") tambahan dengan teks judul yang besar,
yang diciutkan ketika page scroll. Untuk menjadikannya besar, kita perlu menambahkan
class navbar-inner-large tambahan ke navbar-inner dan menambahkan elemen title-large
tambahan ke dalamnya :

<div class="navbar">
<!-- additional "navbar-inner-large" class -->
<div class="navbar-inner navbar-inner-large">
<div class="left">
<!-- ... -->
</div>

<!-- usual title will be visible when larget title collapsed -->
<div class="title">Title Normal</div>
<div class="right">
<!-- ... -->
</div>

<!-- large title element -->

<div class="title-large">
<div class="title-large-text">Title Large</div>
</div>
</div>
</div>

6. Theme-specific Styling
Navbar dengan style atau modifikasi sesuai dengan kebutuhan desain pembuat, seperti :
 Dalam tema iOS Navbar memiliki border tipis di bagian bawah. Untuk menonaktifkan
border/garis/perbatasan ini, Anda perlu menambahkan class no-hairline ke elemen
navbar :
<div class="navbar no-hairline">...</div>

 Dalam MD tema Navbar memiliki shadow (bayangan). Untuk menonaktifkan bayangan

ini, Anda perlu menambahkan class no-shadow ke elemen navbar :
<div class="navbar no-shadow">...</div>
B. TIPE-TIPE NAVBAR
a. Static Navbar Type
Posisi navbar statis adalah tipe tata letak yang mungkin paling jarang digunakan. Dalam hal
ini Navbar hanyalah bagian dari konten halaman yang dapat digulir / ikut hilang ketika
discroll.

<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Static navbar goes in the beginning inside of page-content -->
<div class="navbar">...</div>
...
</div>
</div>

b. Fixed Navbar Type

Fixed Navbar Type / Navbar tetap juga merupakan bagian dari halaman tetapi selalu terlihat
di layar tidak tergantung pada halaman gulir atau scroll. Dalam hal ini harus menjadi anak
langsung dari halaman (a direct child of page) dan jika halaman juga fixed toolbar maka
harus SEBELUM toolbar:

<div class="page">
<!-- Fixed navbar goes ALWAYS FIRST -->
<div class="navbar">...</div>
<!-- Fixed toolbar goes ALWAYS AFTER navbar -->
<div class="toolbar toolbar-bottom">...</div>

<!-- Scrollable page content -->

<div class="page-content">
...
</div>
</div>

c. Common Navbar Type

Jika kita hanya membutuhkan satu navbar umum untuk semua halaman di View maka itu
harus menjadi anak langsung dari element view ini dan SEBELUM semua halaman dalam
element view:

<div class="view">
<!-- View common navbar -->
<div class="navbar">...</div>

<!-- Pages -->

<div class="page">...</div>
</div>

Jika kita hanya memerlukan satu navbar umum / navbar untuk semua tampilan maka itu
harus merupakan anak langsung dari elemen view dan SEBELUM semua view / tampilan tab
lainnya :

<div class="views tabs">

<!-- Views navbar umum-->
<div class="navbar">...</div>

<div class="view tab tab-active" id="tab-1">...</div>

<div class="view tab" id="tab-2">...</div>
...
</div>

Common Navbar harus selalu menjadi anak langsung dari Views / View dan SEBELUM
navbar (jika digunakan toolbar yang sama)!
2. TOOLBAR
Toolbar adalah area tetap di bagian atas atau bawah layar yang
berisi elemen navigasi.
A. Toolbar Layout
Toolbar layout is very simple:

<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
</div>
</div>

B. Toolbar Position
Toolbar can be placed on top of the page, or on bottom.
So we always also need to specify its position by
addition class.

To make it on the top, we need to add toolbar-top class to Toolbar element:

<!-- Top Toolbar -->

<div class="toolbar toolbar-top">
<div class="toolbar-inner">
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
</div>
</div>

To make it on the bottom, we need to add toolbar-bottom class to Toolbar element:

<!-- Bottom Toolbar -->

<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
</div>
</div>

We can also use different positions for iOS, MD and Aurora themes at the same time by
using the following classes: toolbar-top-ios, toolbar-top-md, toolbar-top-
aurora, toolbar-bottom-ios, toolbar-bottom-md, toolbar-bottom-aurora

C. Toolbar Type / Jenis

Type toolbar sama dengan navbar yaitu 3 :
1. Static Toolbar
2. Fixed Toolbar
3. Common Toolbar