bitinflow/ui-old
1
0
Fork 0
mirror of https://github.com/bitinflow/ui-old.git synced 2026-03-13 13:45:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change structure

Browse Source
This commit is contained in:
René Preuß
2022-10-31 18:20:33 +01:00
parent fb90843b98
commit 1ff9c3de33
25 changed files with 70 additions and 1272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
README.md
View File

@@ -57,67 +57,80 @@ This example skeleton provides the default ui experience for dashboards, featuri
third-level menus.
```html
<template>
<FloatingBanner></FloatingBanner>
<FirstLevelMenu>
<template v-slot:top>
<FirstLevelLink icon="fa-home">Home</FirstLevelLink>
<FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
<FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
<FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
<FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
<FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
</template>
<FloatingBanner></FloatingBanner>
<FirstLevelMenu>
<template v-slot:top>
<FirstLevelLink icon="fa-home">Home</FirstLevelLink>
<FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
<FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
<FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
<FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
<FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
</template>
<template v-slot:bottom>
<FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
<FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
<FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
</template>
<template v-slot:bottom>
<FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
<FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
<FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
</template>
<SecondLevelMenu>
<template v-slot:title>Domains</template>
<SecondLevelMenu>
<template v-slot:title>Domains</template>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
</SecondLevelMenu>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
<SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
</SecondLevelMenu>
<FlexAuto>
<ScreenScrollContainer>
<ThirdLevelMenu>
<template v-slot:title>Test</template>
</ThirdLevelMenu>
<Container>
<HeroCard>
<div class="text-3xl">Yeet!</div>
</HeroCard>
<Card>
<CardHeader>Test</CardHeader>
<CardBody>Test</CardBody>
</Card>
<Card>
<CardHeader>Test</CardHeader>
<CardBody>Test</CardBody>
</Card>
</Container>
</ScreenScrollContainer>
</FlexAuto>
</FirstLevelMenu>
<FlexAuto>
<ScreenScrollContainer>
<ThirdLevelMenu>
<template v-slot:title>Test</template>
</ThirdLevelMenu>
<Container>
<HeroCard>
<div class="text-3xl">Yeet!</div>
</HeroCard>
<Card>
<CardHeader>Test</CardHeader>
<CardBody>Test</CardBody>
</Card>
<Card>
<CardHeader>Test</CardHeader>
<CardBody>Test</CardBody>
</Card>
</Container>
</ScreenScrollContainer>
</FlexAuto>
</FirstLevelMenu>
</template>
<script>
import Card from "@bitinflow/ui/components/Card";
import CardHeader from "@bitinflow/ui/components/CardHeader";
import CardBody from "@bitinflow/ui/components/CardBody";
import SecondLevelMenu from "@bitinflow/ui/components/SecondLevelMenu";
import FloatingBanner from "@bitinflow/ui/components/FloatingBanner";
import FirstLevelMenu from "@bitinflow/ui/components/FirstLevelMenu";
import ScreenScrollContainer from "@bitinflow/ui/components/ScreenScrollContainer";
import components from "@bitinflow/ui/components";
import {useMenu} from "@bitinflow/ui/composables";
export default {
components: {FloatingBanner, ScreenScrollContainer, FirstLevelMenu, SecondLevelMenu, CardBody, CardHeader, Card},
}
export default {
components,
setup() {
useMenu({
thirdLevelLinks: [
{
name: 'Test',
icon: 'fa-star',
to: 'test'
}
]
})
},
methods: {
toggleDarkMode() {
document.body.classList.toggle('dark')
}
}
}
</script>
```