mirror of
https://github.com/bitinflow/ui.git
synced 2026-03-13 13:45:59 +00:00
first commit
This commit is contained in:
103
playground/app.vue
Normal file
103
playground/app.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<bitinflow-floating-banner />
|
||||
<bitinflow-first-level-menu>
|
||||
<template #top>
|
||||
<bitinflow-first-level-link icon="fa-home">
|
||||
Home
|
||||
</bitinflow-first-level-link>
|
||||
<bitinflow-first-level-link icon="fa-location-dot">
|
||||
Pull Zones
|
||||
</bitinflow-first-level-link>
|
||||
<bitinflow-first-level-link icon="fa-bucket">
|
||||
Buckets
|
||||
</bitinflow-first-level-link>
|
||||
<bitinflow-first-level-link icon="fa-meteor">
|
||||
Spaces
|
||||
</bitinflow-first-level-link>
|
||||
<bitinflow-first-level-link icon="fa-globe">
|
||||
Domains
|
||||
</bitinflow-first-level-link>
|
||||
<bitinflow-first-level-link icon="fa-list">
|
||||
Zones
|
||||
</bitinflow-first-level-link>
|
||||
</template>
|
||||
|
||||
<template #bottom>
|
||||
<bitinflow-first-level-link icon="fa-wallet">
|
||||
Billing
|
||||
</bitinflow-first-level-link>
|
||||
<bitinflow-first-level-link icon="fa-fingerprint">
|
||||
Account
|
||||
</bitinflow-first-level-link>
|
||||
<bitinflow-first-level-link icon="fa-arrow-right-from-bracket">
|
||||
Logout
|
||||
</bitinflow-first-level-link>
|
||||
</template>
|
||||
|
||||
<bitinflow-second-level-menu>
|
||||
<template #title>
|
||||
Domains
|
||||
</template>
|
||||
|
||||
<bitinflow-second-level-link icon="fa-globe">
|
||||
example.com
|
||||
</bitinflow-second-level-link>
|
||||
<bitinflow-second-level-link icon="fa-globe">
|
||||
example.com
|
||||
</bitinflow-second-level-link>
|
||||
<bitinflow-second-level-link icon="fa-globe">
|
||||
example.com
|
||||
</bitinflow-second-level-link>
|
||||
<bitinflow-second-level-link icon="fa-globe">
|
||||
example.com
|
||||
</bitinflow-second-level-link>
|
||||
</bitinflow-second-level-menu>
|
||||
|
||||
<bitinflow-flex-auto>
|
||||
<bitinflow-screen-scroll-container>
|
||||
<bitinflow-third-level-menu>
|
||||
<template #title>
|
||||
Test
|
||||
</template>
|
||||
</bitinflow-third-level-menu>
|
||||
<bitinflow-container>
|
||||
<bitinflow-hero-card>
|
||||
<div class="text-3xl">
|
||||
Yeet!
|
||||
</div>
|
||||
</bitinflow-hero-card>
|
||||
<bitinflow-card>
|
||||
<bitinflow-card-header>Test</bitinflow-card-header>
|
||||
<bitinflow-card-body>Test</bitinflow-card-body>
|
||||
</bitinflow-card>
|
||||
<bitinflow-card>
|
||||
<bitinflow-card-header>Test</bitinflow-card-header>
|
||||
<bitinflow-card-body>Test</bitinflow-card-body>
|
||||
</bitinflow-card>
|
||||
</bitinflow-container>
|
||||
</bitinflow-screen-scroll-container>
|
||||
</bitinflow-flex-auto>
|
||||
</bitinflow-first-level-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
useMenu({
|
||||
thirdLevelLinks: [
|
||||
{
|
||||
name: 'Test',
|
||||
icon: 'fa-star',
|
||||
to: 'test'
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleDarkMode() {
|
||||
document.body.classList.toggle('dark')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user