Cara membuat Bottom Navigation Material di Nativescript 8 (Core Javascript)

Untuk membuat bottom navigation di nativescript sebenarnya cukup mudah, ada 2 opsi yang dapat kita gunakan, pertama menggunakan TabView atau menggunakan plugin material component. Jika kebutuhan mu hanya dasar, langkah mudahnya bisa gunakan TabView saja yang dokumentasi nya kamu dapat baca disini : https://docs.nativescript.org/ui/tab-view, tapi jika kebutuhan kamu cukup advance, kamu dapat menggunakan plugin dari material component yang dapat kamu lihat disini : https://github.com/nativescript-community/ui-material-components.

Menggunakan plugin material lebih banyak kostumisasi yang dapat kamu lakukan di bandingkan menggunakan UI bawaan dari nativescript. Cara membuat Bottom Navigation menggunakan plugin Material Component cukup terbilang mudah, kurang lebih cara nya sebagai berikut :

Pasang dulu pluginnya pada projek Nativescript mu

ns plugin add @nativescript-community/ui-material-bottom-navigation

Jangan lupa menyertakan attribut ini pada Tag <Page>:

xmlns:mds="@nativescript-community/ui-material-bottom-navigation"

Dan kode untuk file XML-nya kurang lebih seperti ini :

<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
  <mdt:BottomNavigation width="100%" iosOverflowSafeArea="true" selectedIndex="0" tabsPosition="bottom" swipeEnabled="false">
    <mdt:TabStrip backgroundColor="color('dark')" color="color('blue')">
      <mdt:TabStripItem  class="tab-item">
          <Image src="font://&#xe1b0;" class="fal"></Image>
          <Label text="Home" ios:fontSize="10" android:fontSize="12"></Label>
      </mdt:TabStripItem>
      <mdt:TabStripItem class="tab-item">
          <Label text="search" ios:fontSize="10" android:fontSize="12"></Label>
          <Image src="font://&#xe024;" class="fal"></Image>
      </mdt:TabStripItem>
      <mdt:TabStripItem  class="tab-item">
          <Label text="trips" ios:fontSize="10" android:fontSize="12"></Label>
          <Image src="font://&#xf03a;" class="fal"></Image>
      </mdt:TabStripItem>
      <mdt:TabStripItem class="tab-item">
          <Label text="inbox" ios:fontSize="10" android:fontSize="12"></Label>
          <Image src="font://&#xf4b6;" class="fal" id="tab-inbox-icon-fal"></Image>
      </mdt:TabStripItem>
    </mdt:TabStrip>

    <mdt:TabContentItem>
        <GridLayout>
            <Label text="Home" class="h2 text-center"></Label>
        </GridLayout>
    </mdt:TabContentItem>
    <mdt:TabContentItem>
        <GridLayout>
            <Label text="Search Page" class="h2 text-center"></Label>
        </GridLayout>
    </mdt:TabContentItem>
    <mdt:TabContentItem>
        <GridLayout>
            <Label text="TRansactions" class="h2 text-center"></Label>
        </GridLayout>
    </mdt:TabContentItem>
    <mdt:TabContentItem>
        <GridLayout>
            <Label text="Inbox" class="h2 text-center"></Label>
        </GridLayout>
    </mdt:TabContentItem>
  </mdt:BottomNavigation>
</Page>

Untuk url dengan bentuk font://&#x... adalah sebuah unicode milik icon Fontawesome, kamu dapat memasang dahulu icon Fontawesome-nya di projek Nativescript mu jika ingin menggunakannya.

Terakhir untuk stylingnya seperti ini, kamu dapat menyesuaikan warna sesukamu :

MDTabStrip {
  background-color: #40aeff;
  selected-item-color: #ffffff;
  un-selected-item-color: #a4d9fc; //#aeddfc;
  highlight-color: #ffffff;
}

TabStripClassStyle MDTabStripItem {
  background-color: #40aeff;
}

Pembahasan kali ini saya cukupkan sampai disini, semoga bermanfaat. Untuk informasi lebih lanjut kamu dapat mengunjungi repositori github-nya langusng disini : https://github.com/nativescript-community/ui-material-components

Terima kasih :)