İlk önce bu makaledeki kurulum yapılır..
npm install primevue
https://github.com/primefaces/primevue-tailwind/releases linkindeki son sürümdeki "primevue-tailwind-presets-*.*.*.zip" zip dosyası indirilerek kullanılacak preset klasörü ilgili Laravel resources/js içine konulur. (lara yada wind)
tailwind.config.js:
... content: [ './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', './storage/framework/views/*.php', './resources/views/**/*.blade.php', './resources/js/**/*.{vue,js,ts,jsx,tsx}', ], ...
resources/js/app.js:
... import Lara from "@/lara"; ... .use(PrimeVue, { unstyled: true, pt: Lara, ripple: true, //ripple etkin etmek için }) ....
resources/js/Pages/Index.vue:
<template> <div class="card p-8"> <MegaMenu :model="items"/> </div> </template> <script setup> import { ref } from "vue"; import MegaMenu from 'primevue/megamenu'; const items = ref([ { label: 'Furniture', icon: 'pi pi-box', items: [ [ { label: 'Living Room', items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }] } ], [ { label: 'Kitchen', items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }] }, { label: 'Bathroom', items: [{ label: 'Accessories' }] } ], [ { label: 'Bedroom', items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }] } ], [ { label: 'Office', items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }] } ] ] }, { label: 'Electronics', icon: 'pi pi-mobile', items: [ [ { label: 'Computer', items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }] } ], [ { label: 'Home Theather', items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }] } ], [ { label: 'Gaming', items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }] } ], [ { label: 'Appliances', items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }] } ] ] }, { label: 'Sports', icon: 'pi pi-clock', items: [ [ { label: 'Football', items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }] } ], [ { label: 'Running', items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }] } ], [ { label: 'Swimming', items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }] } ], [ { label: 'Tennis', items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }] } ] ] } ]); </script>
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.