<template>
	<!-- Listen to before and after tab change events -->
	<ion-tabs>
		<ion-tab tab="regulasi">
			<ion-content>
				<regulasi/>
			</ion-content>
		</ion-tab>

		<!-- Match by "app.about" route name -->
		<ion-tab tab="about" :routes="'about'">
			<ion-content>
				<about/>
			</ion-content>
		</ion-tab>

		<!-- Use v-slot:bottom with Vue ^2.6.0 -->
		<template slot="bottom">
			<ion-tab-bar>
				<ion-tab-button tab="regulasi" :to="{ name: 'regulasi' }">
					<ion-icon name="calendar"></ion-icon>
					<ion-label>regulasi</ion-label>
				</ion-tab-button>

				<!-- Provide a custom route to navigate to -->
				<ion-tab-button tab="about" :to="{ name: 'about' }">
					<ion-icon name="contacts"></ion-icon>
					<ion-label>about</ion-label>
				</ion-tab-button>
			</ion-tab-bar>
		</template>
	</ion-tabs>
</template>

<script>
	import Regulasi from "../views/Regulasi";
	import About from "../views/About";
	export default {
		components: {
			Regulasi,
			About
		}
	};
</script>