npm i vue3-tabs-chrome
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <template> <div> <vue3-tabs-chrome :tabs="tabs" v-model="tab" /> <div class="tab-content"> <div v-if="tab === 'google'"> <h2>Google Tab</h2> <p> Welcome to the Google tab. Here, you can explore Google's content. </p> </div> <div v-if="tab === 'facebook'"> <h2>Facebook Tab</h2> <p> This is the Facebook tab. Stay connected with your friends and family! </p> </div> <div v-if="tab === 'custom_key'"> <h2>New Tab</h2> <p>This is a new tab. You can customize the content here.</p> </div> </div> </div> </template> <script> import Vue3TabsChrome from "vue3-tabs-chrome"; import "vue3-tabs-chrome/dist/vue3-tabs-chrome.css"; import img1 from "./assets/1.jpeg"; import img2 from "./assets/2.jpeg"; import { defineComponent, reactive, ref } from "vue"; export default defineComponent({ components: { Vue3TabsChrome, }, setup() { const tab = ref("google"); const tabs = reactive([ { label: "Google", key: "google", favico: img1, }, { label: "Facebook", key: "facebook", favico: img2, }, { label: "New Tab", key: "custom_key", }, ]); return { tabs, tab, }; }, }); </script> <style> /* Add custom styles if needed */ button { margin-top: 10px; padding: 8px 16px; font-size: 16px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #2980b9; } .tab-content { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background: #f9f9f9; } h2 { margin-top: 0; } p { font-size: 16px; color: #333; } </style> |
