Added tabs to Client detail page.
This commit is contained in:
parent
254cbf37a1
commit
ba507f8e6a
@ -1,8 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>{{ clientId }}</div>
|
<div>{{ clientName }}</div>
|
||||||
|
<Tabs value="0">
|
||||||
|
<TabList>
|
||||||
|
<Tab value="0">Overview</Tab>
|
||||||
|
<Tab value="1">Contact Info</Tab>
|
||||||
|
<Tab value="2">Project Status</Tab>
|
||||||
|
<Tab value="3">Accounting</Tab>
|
||||||
|
<Tab value="4">History</Tab>
|
||||||
|
</TabList>
|
||||||
|
<TabPanels>
|
||||||
|
<TabPanel value="0">
|
||||||
|
<h1>Overview</h1>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value="1">
|
||||||
|
<h1>Contact Info</h1>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value="2">
|
||||||
|
<h1>Project Status</h1>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value="3">
|
||||||
|
<h1>Accounting</h1>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value="4">
|
||||||
|
<h1>History</h1>
|
||||||
|
</TabPanel>
|
||||||
|
</TabPanels>
|
||||||
|
</Tabs>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref } from "vue";
|
import { onMounted, ref } from "vue";
|
||||||
|
import Tabs from 'primevue/tabs';
|
||||||
|
import TabList from 'primevue/tablist';
|
||||||
|
import Tab from 'primevue/tab';
|
||||||
|
import TabPanels from 'primevue/tabpanels';
|
||||||
|
import TabPanel from 'primevue/tabpanel';
|
||||||
|
|
||||||
const client = ref({});
|
const client = ref({});
|
||||||
const { clientName } = defineProps({
|
const { clientName } = defineProps({
|
||||||
clientName: { type: String, required: true },
|
clientName: { type: String, required: true },
|
||||||
@ -18,4 +50,13 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="css"></style>
|
<style lang="css">
|
||||||
|
.tab-bar {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
.tab-button {
|
||||||
|
border: black 1px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user