You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
53 lines
1.9 KiB
53 lines
1.9 KiB
<script setup> |
|
import { ref } from 'vue'; |
|
|
|
const emits = defineEmits(["active"]); |
|
const active = ref("text"); |
|
// Set active tab |
|
const setActiveTab = (tab) => { |
|
active.value = tab; |
|
emits('active', tab) |
|
} |
|
</script> |
|
|
|
<template> |
|
<!-- Tab Menu --> |
|
<div class="w-full flex border-b border-gray-200 mb-1"> |
|
<button |
|
@click="setActiveTab('text')" |
|
class="px-4 py-2 font-medium text-sm transition-all" |
|
:class="active === 'text' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'"> |
|
Text Formatting |
|
</button> |
|
<button |
|
@click="setActiveTab('blocks')" |
|
class="px-4 py-2 font-medium text-sm transition-all" |
|
:class="active === 'blocks' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'"> |
|
Block Elements |
|
</button> |
|
<button |
|
@click="setActiveTab('lists')" |
|
class="px-4 py-2 font-medium text-sm transition-all" |
|
:class="active === 'lists' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'"> |
|
Lists |
|
</button> |
|
<button |
|
@click="setActiveTab('tables')" |
|
class="px-4 py-2 font-medium text-sm transition-all" |
|
:class="active === 'tables' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'"> |
|
Tables |
|
</button> |
|
<button |
|
@click="setActiveTab('media')" |
|
class="px-4 py-2 font-medium text-sm transition-all" |
|
:class="active === 'media' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'"> |
|
Media |
|
</button> |
|
<button |
|
@click="setActiveTab('history')" |
|
class="px-4 py-2 font-medium text-sm transition-all" |
|
:class="active === 'history' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500 hover:text-gray-700'"> |
|
History |
|
</button> |
|
</div> |
|
</template> |