change to folder template
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import {ChevronUpIcon} from 'vue-tabler-icons';
|
||||
import {ChevronDownIcon} from 'vue-tabler-icons';
|
||||
const props = defineProps(['icon']);
|
||||
const component = props.icon;
|
||||
// custom list data
|
||||
const customs = shallowRef([
|
||||
{
|
||||
title: 'Bajaj Finsery',
|
||||
profit: true,
|
||||
percent: '10',
|
||||
price: '1839.00'
|
||||
},
|
||||
{
|
||||
title: 'TTML',
|
||||
profit: false,
|
||||
percent: '10',
|
||||
price: '100.00'
|
||||
},
|
||||
{
|
||||
title: 'Reliance',
|
||||
profit: true,
|
||||
percent: '10',
|
||||
price: '200.00'
|
||||
},
|
||||
{
|
||||
title: 'TTML',
|
||||
profit: false,
|
||||
percent: '10',
|
||||
price: '189.00'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<v-list two-lines>
|
||||
<template v-for="(custom, i) in customs" :key="i">
|
||||
<v-list-item color="primary" class="py-3">
|
||||
<v-list-item-title class="text-subtitle-1">{{ custom.title }}</v-list-item-title>
|
||||
<v-list-item-subtitle v-if="custom.profit" class="text-subtitle-2 text-success text-high-emphasis"
|
||||
>{{ custom.percent }}% Profit</v-list-item-subtitle
|
||||
>
|
||||
<v-list-item-subtitle v-else class="text-subtitle-2 text-error "
|
||||
>{{ custom.percent }}% Loss</v-list-item-subtitle
|
||||
>
|
||||
<template v-slot:append>
|
||||
<v-list-item-subtitle class="text-subtitle-1 text-high-emphasis mr-3"> ${{ custom.price }}</v-list-item-subtitle>
|
||||
<v-chip color="success" label size="x-small" v-if="custom.profit">
|
||||
<ChevronUpIcon size="17" stroke-width="1.5" />
|
||||
</v-chip>
|
||||
<v-chip color="error" label size="x-small" v-else>
|
||||
<ChevronDownIcon size="17" stroke-width="1.5" />
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
</template>
|
||||
</v-list>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
|
||||
const props = defineProps(['icon']);
|
||||
const component = props.icon;
|
||||
// List 1,3 Data
|
||||
const list1 = shallowRef([
|
||||
{
|
||||
name: 'Sample Page',
|
||||
icon: AppsIcon,
|
||||
id: 1,
|
||||
link: '/basic/list'
|
||||
},
|
||||
{
|
||||
name: 'Elements',
|
||||
icon: CircleDotIcon,
|
||||
id: 2,
|
||||
link: ''
|
||||
},
|
||||
{
|
||||
name: 'Page Layouts',
|
||||
icon: FolderIcon,
|
||||
id: 3,
|
||||
link: ''
|
||||
},
|
||||
|
||||
]);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<v-list disabled>
|
||||
<v-card variant="outlined" class="py-2">
|
||||
<v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
|
||||
</template>
|
||||
<v-list-item-title v-text="list.name"></v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-list>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { FolderIcon,BriefcaseIcon,BeachIcon } from 'vue-tabler-icons';
|
||||
const props = defineProps(['icon']);
|
||||
const folders = shallowRef([
|
||||
{
|
||||
subtitle: 'Jan 9, 2022',
|
||||
title: 'Photos',
|
||||
icon:FolderIcon,
|
||||
},
|
||||
{
|
||||
subtitle: 'Jan 17, 2022',
|
||||
title: 'Works',
|
||||
icon:BriefcaseIcon
|
||||
},
|
||||
{
|
||||
subtitle: 'Jan 18, 2022',
|
||||
title: 'Vacation',
|
||||
icon:BeachIcon
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<v-list lines="two">
|
||||
<v-card variant="outlined">
|
||||
<v-list-item v-for="folder in folders" :key="folder.title" :subtitle="folder.subtitle">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="grey400">
|
||||
<component :is="folder.icon" size="20" stroke-width="1.5" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<template v-slot:title>
|
||||
<h5 class="text-subtitle-1">{{ folder.title }}</h5>
|
||||
</template>
|
||||
<template v-slot:subtitle>
|
||||
<span class="text-subtitle-2">{{ folder.subtitle }}</span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-list>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { CircleDotIcon, DragDropIcon, InboxIcon, MailIcon, SendIcon } from 'vue-tabler-icons';
|
||||
const props = defineProps(['icon']);
|
||||
// List 2 data
|
||||
const open = shallowRef(['Users']);
|
||||
</script>
|
||||
<template>
|
||||
<v-list >
|
||||
<v-card variant="outlined" class="py-2">
|
||||
<div class="text-subttile-2 pl-4 py-3">Nested List Items</div>
|
||||
<v-list-item value="" class="mb-2" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<SendIcon size="20" stroke-width="1.5" class="mr-2" />
|
||||
</template>
|
||||
<v-list-item-title >Sent Mail</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item value="" class="mb-2" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<MailIcon size="20" stroke-width="1.5" class="mr-2" />
|
||||
</template>
|
||||
<v-list-item-title >Drafts</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-group value="Users">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item v-bind="props" rounded="md" color="primary" title="inbox">
|
||||
<template v-slot:prepend>
|
||||
<InboxIcon size="20" stroke-width="1.5" class="mr-2" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item value="Started" color="primary" title="Started" rounded="md">
|
||||
<template v-slot:prepend>
|
||||
<CircleDotIcon size="15" stroke-width="1.5" class="mr-2" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
</v-card>
|
||||
</v-list>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import {AppsIcon} from 'vue-tabler-icons';
|
||||
const props = defineProps(['icon']);
|
||||
const component = props.icon;
|
||||
// List 1,3 Data
|
||||
const list1 = shallowRef([
|
||||
{
|
||||
name: 'Sample Page',
|
||||
icon: AppsIcon,
|
||||
id: 1,
|
||||
link: '/'
|
||||
},
|
||||
{
|
||||
name: 'Elements',
|
||||
icon: AppsIcon,
|
||||
id: 2,
|
||||
link: ''
|
||||
},
|
||||
{
|
||||
name: 'Page Layouts',
|
||||
icon: AppsIcon,
|
||||
id: 3,
|
||||
link: ''
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<v-list>
|
||||
<v-list-item class="mb-1" v-for="(list, i) in list1" :value="list" rounded="xl" :key="i" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
|
||||
</template>
|
||||
<v-list-item-title v-text="list.name"></v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<perfect-scrollbar style="max-height: 250px">
|
||||
<v-list>
|
||||
<v-list-item v-for="(n, index) in 200" :value="n" :key="index" color="primary">
|
||||
<v-list-item-title>Item {{ n }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</perfect-scrollbar>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
|
||||
const props = defineProps(['icon']);
|
||||
const component = props.icon;
|
||||
// List 1,3 Data
|
||||
const list1 = shallowRef([
|
||||
{
|
||||
name: 'Sample Page',
|
||||
icon: AppsIcon,
|
||||
id: 1,
|
||||
link: '/basic/list'
|
||||
},
|
||||
{
|
||||
name: 'Elements',
|
||||
icon: CircleDotIcon,
|
||||
id: 2,
|
||||
link: ''
|
||||
},
|
||||
{
|
||||
name: 'Page Layouts',
|
||||
icon: FolderIcon,
|
||||
id: 3,
|
||||
link: ''
|
||||
},
|
||||
{
|
||||
name: 'Components',
|
||||
icon: DragDropIcon,
|
||||
id: 4,
|
||||
link: ''
|
||||
}
|
||||
]);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<v-list>
|
||||
<v-card variant="outlined" class="py-2">
|
||||
<v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
|
||||
</template>
|
||||
<v-list-item-title v-text="list.name"></v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-list>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { WifiIcon,BluetoothIcon } from 'vue-tabler-icons';
|
||||
// List 4 data
|
||||
const swt1 = shallowRef(true);
|
||||
const swt2 = shallowRef(false);
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<v-list >
|
||||
<v-card variant="outlined" class="py-2">
|
||||
<v-list-item value="wifi" class="mb-2 " color="primary">
|
||||
<div class="d-flex align-center">
|
||||
<WifiIcon size="22" stroke-width="1.5" class="mr-2" />
|
||||
<div class="ml-3">Wi-Fi</div>
|
||||
<div class="ml-auto"><v-switch v-model="swt1" inset color="primary" hide-details></v-switch></div>
|
||||
</div>
|
||||
|
||||
</v-list-item>
|
||||
<v-list-item value="bluetooth" class="mb-2 " color="primary">
|
||||
<div class="d-flex align-center">
|
||||
<BluetoothIcon size="22" stroke-width="1.5" class="mr-2" />
|
||||
<div class="ml-3">Bluetooth</div>
|
||||
<div class="ml-auto"><v-switch v-model="swt2" inset color="primary" hide-details></v-switch></div>
|
||||
</div>
|
||||
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-list>
|
||||
|
||||
|
||||
<!-- <div class="rounded-sm px-5 py-3 my-3">
|
||||
<div class="d-flex align-center">
|
||||
<WifiIcon size="20" stroke-width="1.5"/>
|
||||
|
||||
</div>
|
||||
<v-switch v-model="swt1" inset label="Start DND Mode" color="primary" hide-details></v-switch>
|
||||
<v-switch v-model="swt2" inset label="Allow Notifications" color="primary" hide-details> </v-switch>
|
||||
</div> -->
|
||||
</template>
|
||||
Reference in New Issue
Block a user