mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-09 16:39:31 -06:00
50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<template>
|
|
<div class="flowing-menu-demo">
|
|
<TabbedLayout>
|
|
<template #preview>
|
|
<div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
|
|
<FlowingMenu :items="demoItems" />
|
|
</div>
|
|
|
|
<PropTable :data="propData" />
|
|
|
|
<Dependencies :dependency-list="['gsap']" />
|
|
</template>
|
|
|
|
<template #code>
|
|
<CodeExample :code-object="flowingMenu" />
|
|
</template>
|
|
|
|
<template #cli>
|
|
<CliInstallation :command="flowingMenu.cli" />
|
|
</template>
|
|
</TabbedLayout>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
|
import PropTable from '../../components/common/PropTable.vue';
|
|
import Dependencies from '../../components/code/Dependencies.vue';
|
|
import CliInstallation from '../../components/code/CliInstallation.vue';
|
|
import CodeExample from '../../components/code/CodeExample.vue';
|
|
import FlowingMenu from '../../content/Components/FlowingMenu/FlowingMenu.vue';
|
|
import { flowingMenu } from '@/constants/code/Components/flowingMenuCode';
|
|
|
|
const propData = [
|
|
{
|
|
name: 'items',
|
|
type: 'object[]',
|
|
default: '[]',
|
|
description: 'An array of objects containing: link, text, image.'
|
|
}
|
|
];
|
|
|
|
const demoItems = [
|
|
{ link: '#', text: 'Mojave', image: 'https://picsum.photos/600/400?random=1' },
|
|
{ link: '#', text: 'Sonoma', image: 'https://picsum.photos/600/400?random=2' },
|
|
{ link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
|
|
{ link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
|
|
];
|
|
</script>
|