Cara Membuat Vertical Tabs Dengan AngularJs

Vertical Tabs adalah suatu tab atau bisa dikatakan suatu elemen yang disusun secara garis vertikal dari atas ke bawah dan ketika di klik maka suatu konten akan berubah. Dan pada kesempatan kali ini saya akan membahas tentang Cara Membuat Vertical Tabs Dengan AngularJs. Dimana tabs pada artikel ini adalah berupa menu secara vertical yang ketika di klik maka suatu konten tertentu akan berubah berdasarkan menu yang di pilih.

Cara Membuat Vertical Tabs Dengan AngularJs saya akan membuat vertikal tabsnya, seperti pada script berikut ini.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>

<body ng-app="">
  <h1>Cara Membuat Vertical Tabs Dengan AngularJs</h1>
  <div class="paket d-flex">
    <form class="border p-3">
      <p class="bold">Paket Kursus :</p>
      <input type="radio" ng-model="myVar" value="wd"> Wed Design
      <br>
      <input type="radio" ng-model="myVar" value="wp"> Web Programming
      <br>
      <input type="radio" ng-model="myVar" value="dm"> Digital Marketing
      <br>
      <input type="radio" ng-model="myVar" value="gd"> Graphic Design
    </form>

    <div ng-switch="myVar">
      <div ng-switch-when="wd" class="bg-primary p-3 text-white">
         <h1>Wed Design</h1>
         <ul>
          <li>HTML & CSS : Mendesain layout / tampilan website.</li>
          <li>Bootstrap : Membuat website yang responsive</li>
          <li>jQuery : Menambahkan animasi di website</li>
          <li>Javascript : Membuat website yang interaktif.</li>
          <li>Photoshop : Mendesain logo, banner, edit foto, mengolah gambar dll.</li>
         </ul>
      </div>
      <div ng-switch-when="wp" class="bg-success p-3 text-white">
         <h1>Web Programming</h1>
         <ul>
            <li>Object-oriented programming (OOP) : Pemrograman PHP tingkat lanjut.</li>
            <li>PHP Framework Codeigniter (Company Profile) : Membuat sistem Company Profile.</li>
            <li>PHP Framework Codeigniter (E-commerce) : Membuat sistem e-commerce.</li>
            <li>Javascript : Membuat website yg interaktif.</li>
            <li>jQuery : Menambahkan animasi di website.</li>
            <li>Ajax : Asynchronous JavaScript And XML.</li>
         </ul>
      </div>
      <div ng-switch-when="dm" class="bg-secondary p-3 text-white">
         <h1>Digital Marketing</h1>
         <ul>
            <li>WordPress : Membuat website instan.</li>
            <li>SEO : Cara meranking website di Google</li>
            <li>Adwords Search : Cara beriklan di hasil pencarian Google.</li>
            <li>Google AdWords Certification : Panduan dan ujian sertifikasi Google AdWords.</li>
            <li>Youtube Ads : Beriklan video di youtube.</li>
            <li>Facebook Ads & Instagram Ads : Beriklan di facebook dan instagram.</li>
            <li>Email Marketing : Mengumpulkan dan mengelola data customer lewat email.</li>
            <li>Landing Page : Membuat halaman website untuk promosi.</li>
         </ul>
      </div>
      <div ng-switch-when="gd" class="bg-warning p-3 text-white">
         <h1>Graphic Design</h1>
         <ul>
            <li>hotoshop : Edit foto, mengolah gambar, dll</li>
            <li>llustrator : Membuat logo, brosur, packaging, dll</li>
            <li>nDesign :Mendesign majalah, buku, dll</li>
            <li>lash : Animasi interaktif</li>
            <li>jian Sertifikasi Internasional : Adobe Certified Associate (ACA).</li>
         </ul>
      </div>
    </div>
  </div>
</body>
</html>

Jika teman-teman perhatikan didalam div class paket saya memiliki form dan sebuah div yang saya buat menjadi 2 kolom menggunakan d-flex menggunakan bootstrap. Dimana form adalah menu vertical yang saya buat dengan menggunakan input type radio dan div berisi konten yang akan muncul berdasarkan menu yang kita klik. Didalam input type radio saya berikan ng-model=”myVar”  untuk saya gunakan di dalam div yang berisi ng-switch=”myVar” kemudian value=”wd” di dalam input type radio saya gunakan untuk ng-switch-when=”wd” yang ada di div yang berfungsi untuk menampilkan konten dinamis sesuai kategori paket yang dipilih.

Jika teman-teman buka di browser maka tampilannya akan sama seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Membuat Vertical Tabs Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.