Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AlpineJS ile tab bileşeni yapımı
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"></script>
<div x-data="{ tab: 'main' }">
<a :class="{ 'active': tab === 'main' }" @click="tab = 'main'" href="#main" >Ana sayfa</a>
<a :class="{ 'active': tab === 'about' }" @click="tab = 'about'" href="#about">Hakkımızda</a>
<a :class="{ 'active': tab === 'contact' }" @click="tab = 'contact'" href="#contact">İletişim</a>
</br></br>
<div x-show="tab === 'main'">Ana sayfa</div>
<div x-show="tab === 'about'">Hakkımızda</div>
<div x-show="tab === 'contact'">İletişim</div>
</div>
<style>
a { text-decoration: none; padding: 5px; }
a.active { background-color: dodgerblue; color: #fff; }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.