first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import img1 from '@/assets/images/blog/blog-img1.jpg';
|
||||
import img2 from '@/assets/images/blog/blog-img2.jpg';
|
||||
import img3 from '@/assets/images/blog/blog-img3.jpg';
|
||||
import img4 from '@/assets/images/blog/blog-img4.jpg';
|
||||
import img5 from '@/assets/images/blog/blog-img5.jpg';
|
||||
|
||||
import img6 from '@/assets/images/products/s3.jpg';
|
||||
import img7 from '@/assets/images/products/s4.jpg';
|
||||
import img8 from '@/assets/images/products/s5.jpg';
|
||||
import img9 from '@/assets/images/products/s6.jpg';
|
||||
import img10 from '@/assets/images/products/s7.jpg';
|
||||
import img11 from '@/assets/images/products/s8.jpg';
|
||||
import img12 from '@/assets/images/products/s9.jpg';
|
||||
import img13 from '@/assets/images/products/s10.jpg';
|
||||
import img14 from '@/assets/images/products/s11.jpg';
|
||||
import img15 from '@/assets/images/products/s12.jpg';
|
||||
|
||||
const tab = ref(null);
|
||||
const tab1 = ref(
|
||||
[
|
||||
{img: img1},
|
||||
{img: img2},
|
||||
{img: img3},
|
||||
{img: img4},
|
||||
{img: img5},
|
||||
{img: img1},
|
||||
]
|
||||
)
|
||||
const tab2 = ref(
|
||||
[
|
||||
{img: img6},
|
||||
{img: img7},
|
||||
{img: img8},
|
||||
{img: img9},
|
||||
{img: img10},
|
||||
{img: img11},
|
||||
]
|
||||
)
|
||||
const tab3 = ref(
|
||||
[
|
||||
{img: img12},
|
||||
{img: img13},
|
||||
{img: img14},
|
||||
{img: img10},
|
||||
{img: img15},
|
||||
{img: img11},
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0">
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
color="primary"
|
||||
align-tabs="center"
|
||||
>
|
||||
<v-tab value="1">Landscape</v-tab>
|
||||
<v-tab value="2">Products</v-tab>
|
||||
<v-tab value="3">Abstract</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-card-text class="rounded-md pa-0 mt-6">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="1">
|
||||
<v-row>
|
||||
<v-col v-for="item in tab1" :key="item.img" cols="12" md="4" sm="6">
|
||||
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
<v-window-item value="2">
|
||||
<v-row>
|
||||
<v-col v-for="item in tab2" :key="item.img" cols="12" md="4" sm="6">
|
||||
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
<v-window-item value="3">
|
||||
<v-row>
|
||||
<v-col v-for="item in tab3" :key="item.img" cols="12" md="4" sm="6">
|
||||
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import img1 from '@/assets/images/blog/blog-img1.jpg';
|
||||
import img2 from '@/assets/images/blog/blog-img2.jpg';
|
||||
import img3 from '@/assets/images/blog/blog-img3.jpg';
|
||||
import img4 from '@/assets/images/blog/blog-img4.jpg';
|
||||
import img5 from '@/assets/images/blog/blog-img5.jpg';
|
||||
|
||||
import img6 from '@/assets/images/products/s3.jpg';
|
||||
import img7 from '@/assets/images/products/s4.jpg';
|
||||
import img8 from '@/assets/images/products/s5.jpg';
|
||||
import img9 from '@/assets/images/products/s6.jpg';
|
||||
import img10 from '@/assets/images/products/s7.jpg';
|
||||
import img11 from '@/assets/images/products/s8.jpg';
|
||||
import img12 from '@/assets/images/products/s9.jpg';
|
||||
import img13 from '@/assets/images/products/s10.jpg';
|
||||
import img14 from '@/assets/images/products/s11.jpg';
|
||||
import img15 from '@/assets/images/products/s12.jpg';
|
||||
|
||||
const tab = ref(null);
|
||||
const tab1 = ref(
|
||||
[
|
||||
{img: img1},
|
||||
{img: img2},
|
||||
{img: img3},
|
||||
{img: img4},
|
||||
{img: img5},
|
||||
{img: img1},
|
||||
]
|
||||
)
|
||||
const tab2 = ref(
|
||||
[
|
||||
{img: img6},
|
||||
{img: img7},
|
||||
{img: img8},
|
||||
{img: img9},
|
||||
{img: img10},
|
||||
{img: img11},
|
||||
]
|
||||
)
|
||||
const tab3 = ref(
|
||||
[
|
||||
{img: img12},
|
||||
{img: img13},
|
||||
{img: img14},
|
||||
{img: img10},
|
||||
{img: img15},
|
||||
{img: img11},
|
||||
]
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0">
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
color="primary"
|
||||
align-tabs="end"
|
||||
>
|
||||
<v-tab value="1">Landscape</v-tab>
|
||||
<v-tab value="2">Products</v-tab>
|
||||
<v-tab value="3">Abstract</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-card-text class="rounded-md pa-0 mt-6">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="1">
|
||||
<v-row>
|
||||
<v-col v-for="item in tab1" :key="item.img" cols="12" md="4" sm="6">
|
||||
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
<v-window-item value="2">
|
||||
<v-row>
|
||||
<v-col v-for="item in tab2" :key="item.img" cols="12" md="4" sm="6">
|
||||
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
<v-window-item value="3">
|
||||
<v-row>
|
||||
<v-col v-for="item in tab3" :key="item.img" cols="12" md="4" sm="6">
|
||||
<v-img :src="item.img" alt="tab" cover class="w-100" height="250"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const tab = ref(null);
|
||||
</script>
|
||||
<template>
|
||||
<v-tabs v-model="tab" bg-color="primary">
|
||||
<v-tab value="one">Item One</v-tab>
|
||||
<v-tab value="two">Item Two</v-tab>
|
||||
<v-tab value="three">Item Three</v-tab>
|
||||
</v-tabs>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text class="bg-grey100 mt-4 rounded-md">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="one">
|
||||
Item One
|
||||
</v-window-item>
|
||||
<v-window-item value="two">
|
||||
Item Two
|
||||
</v-window-item>
|
||||
<v-window-item value="three">
|
||||
Item Three
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
|
||||
const tab5 = ref(null);
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0" >
|
||||
<v-tabs
|
||||
bg-color="primary"
|
||||
center-active
|
||||
>
|
||||
<v-tab>One</v-tab>
|
||||
<v-tab>Two</v-tab>
|
||||
<v-tab>Three</v-tab>
|
||||
<v-tab>Four</v-tab>
|
||||
<v-tab>Five</v-tab>
|
||||
<v-tab>Six</v-tab>
|
||||
<v-tab>Seven</v-tab>
|
||||
<v-tab>Eight</v-tab>
|
||||
<v-tab>Nine</v-tab>
|
||||
<v-tab>Ten</v-tab>
|
||||
<v-tab>Eleven</v-tab>
|
||||
<v-tab>Twelve</v-tab>
|
||||
<v-tab>Thirteen</v-tab>
|
||||
<v-tab>Fourteen</v-tab>
|
||||
</v-tabs>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
|
||||
const tab6 = ref(null);
|
||||
</script>
|
||||
<template>
|
||||
<v-tabs v-model="tab6">
|
||||
<v-tab value="111111" color="secondary"> <PhoneIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item One </v-tab>
|
||||
<v-tab value="222222" color="warning"> <HeartIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Two </v-tab>
|
||||
<v-tab value="444444" color="primary"> <UserIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Three </v-tab>
|
||||
</v-tabs>
|
||||
<v-card-text class="bg-grey100 mt-4 rounded-md">
|
||||
<v-window v-model="tab6">
|
||||
<v-window-item value="111111">
|
||||
item one
|
||||
</v-window-item>
|
||||
<v-window-item value="222222">
|
||||
item two
|
||||
</v-window-item>
|
||||
<v-window-item value="444444">
|
||||
item three
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
|
||||
|
||||
<template>
|
||||
<v-sheet elevation="0">
|
||||
<v-tabs
|
||||
bg-color="primary"
|
||||
next-icon="mdi-arrow-right-bold-box-outline"
|
||||
prev-icon="mdi-arrow-left-bold-box-outline"
|
||||
show-arrows
|
||||
>
|
||||
<v-tab
|
||||
v-for="i in 30"
|
||||
:key="i"
|
||||
>
|
||||
Item {{ i }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-sheet>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
|
||||
const tab4 = ref(null);
|
||||
</script>
|
||||
<template>
|
||||
<v-tabs v-model="tab4" color="primary">
|
||||
<v-tab value="1111"> <PhoneIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item One </v-tab>
|
||||
<v-tab value="2222" disabled> <HeartIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Two </v-tab>
|
||||
<v-tab value="4444"> <UserIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Three </v-tab>
|
||||
</v-tabs>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text class="bg-grey100 mt-4 rounded-md">
|
||||
<v-window v-model="tab4">
|
||||
<v-window-item value="1111">
|
||||
item one
|
||||
</v-window-item>
|
||||
<v-window-item value="2222">
|
||||
item two
|
||||
</v-window-item>
|
||||
<v-window-item value="4444">
|
||||
item three
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
|
||||
const tab3 = ref(null);
|
||||
</script>
|
||||
<template>
|
||||
<v-tabs v-model="tab3" color="primary">
|
||||
<v-tab value="111">
|
||||
<PhoneIcon stroke-width="1.5" width="22" />
|
||||
</v-tab>
|
||||
<v-tab value="222">
|
||||
<HeartIcon stroke-width="1.5" width="22" />
|
||||
</v-tab>
|
||||
<v-tab value="444">
|
||||
<UserIcon stroke-width="1.5" width="22" />
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text class="bg-grey100 mt-4 rounded-md">
|
||||
<v-window v-model="tab3">
|
||||
<v-window-item value="111">
|
||||
Item One
|
||||
</v-window-item>
|
||||
<v-window-item value="222">
|
||||
Item two
|
||||
</v-window-item>
|
||||
<v-window-item value="444">
|
||||
Item three
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
|
||||
const tab = ref(null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="0">
|
||||
<v-tabs v-model="tab" bg-color="primary" stacked>
|
||||
<v-tab value="1">
|
||||
<PhoneIcon stroke-width="1.5" width="20" />
|
||||
Recents
|
||||
</v-tab>
|
||||
<v-tab value="2">
|
||||
<HeartIcon stroke-width="1.5" width="20" />
|
||||
Favorites
|
||||
</v-tab>
|
||||
<v-tab value="3">
|
||||
<UserIcon stroke-width="1.5" width="20" />
|
||||
Nearby
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-card-text class="bg-grey100 rounded-md mt-4">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="1">
|
||||
Item One
|
||||
</v-window-item>
|
||||
<v-window-item value="2">
|
||||
Item two
|
||||
</v-window-item>
|
||||
<v-window-item value="3">
|
||||
Item three
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user