Initial commit
This commit is contained in:
root
467
src/views/AlertsPage.vue
Normal file
467
src/views/AlertsPage.vue
Normal file
@@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Alerts</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Alerts</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert type="success">This is a success alert.</v-alert>
|
||||
<v-alert type="info">This is an info alert.</v-alert>
|
||||
<v-alert type="warning">This is a warning alert.</v-alert>
|
||||
<v-alert type="error">This is an error alert.</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Alert Variants -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alert Variants</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert variant="elevated" type="success">Elevated Alert</v-alert>
|
||||
<v-alert variant="flat" type="info">Flat Alert</v-alert>
|
||||
<v-alert variant="tonal" type="warning">Tonal Alert</v-alert>
|
||||
<v-alert variant="outlined" type="error">Outlined Alert</v-alert>
|
||||
<v-alert variant="plain" type="success">Plain Alert</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Alert Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Custom Colors</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert color="primary">Primary Color Alert</v-alert>
|
||||
<v-alert color="secondary">Secondary Color Alert</v-alert>
|
||||
<v-alert color="success">Success Color Alert</v-alert>
|
||||
<v-alert color="info">Info Color Alert</v-alert>
|
||||
<v-alert color="warning">Warning Color Alert</v-alert>
|
||||
<v-alert color="error">Error Color Alert</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Closable Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Closable Alerts</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert
|
||||
v-if="alert1"
|
||||
closable
|
||||
@click:close="alert1 = false"
|
||||
type="success"
|
||||
>
|
||||
This alert can be closed. Click the X button.
|
||||
</v-alert>
|
||||
<v-alert
|
||||
v-if="alert2"
|
||||
closable
|
||||
@click:close="alert2 = false"
|
||||
type="info"
|
||||
>
|
||||
Click to dismiss this info alert.
|
||||
</v-alert>
|
||||
<v-alert
|
||||
v-if="alert3"
|
||||
closable
|
||||
@click:close="alert3 = false"
|
||||
type="warning"
|
||||
>
|
||||
Warning: This can be dismissed.
|
||||
</v-alert>
|
||||
<v-btn v-if="!alert1 || !alert2 || !alert3" @click="resetAlerts" color="primary">
|
||||
Reset Closed Alerts
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Alerts with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alerts with Custom Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert icon="mdi-shield-check" type="success">
|
||||
Security verification successful!
|
||||
</v-alert>
|
||||
<v-alert icon="mdi-cloud-upload" type="info">
|
||||
Your files are being uploaded to the cloud.
|
||||
</v-alert>
|
||||
<v-alert icon="mdi-alert-circle" type="warning">
|
||||
Your session will expire in 5 minutes.
|
||||
</v-alert>
|
||||
<v-alert icon="mdi-wifi-off" type="error">
|
||||
Network connection lost. Check your internet.
|
||||
</v-alert>
|
||||
<v-alert icon="mdi-rocket" color="primary">
|
||||
New feature launched! Check it out now.
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Alerts without Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alerts without Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert icon="false" type="success">Success without icon</v-alert>
|
||||
<v-alert icon="false" type="info">Info without icon</v-alert>
|
||||
<v-alert icon="false" type="warning">Warning without icon</v-alert>
|
||||
<v-alert icon="false" type="error">Error without icon</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Alert Density -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alert Density</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert density="default" type="info">Default Density Alert</v-alert>
|
||||
<v-alert density="comfortable" type="info">Comfortable Density Alert</v-alert>
|
||||
<v-alert density="compact" type="info">Compact Density Alert</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Border Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Border Alerts</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert border="start" type="success">Border Start</v-alert>
|
||||
<v-alert border="end" type="info">Border End</v-alert>
|
||||
<v-alert border="top" type="warning">Border Top</v-alert>
|
||||
<v-alert border="bottom" type="error">Border Bottom</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Prominent Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Prominent Alerts</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert prominent type="success">
|
||||
<v-alert-title>Success!</v-alert-title>
|
||||
This is a prominent alert with increased visual weight.
|
||||
</v-alert>
|
||||
<v-alert prominent type="warning">
|
||||
<v-alert-title>Warning</v-alert-title>
|
||||
Prominent alerts draw more attention to important messages.
|
||||
</v-alert>
|
||||
<v-alert prominent type="error">
|
||||
<v-alert-title>Error</v-alert-title>
|
||||
Critical issues should be displayed prominently.
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Alerts with Titles -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alerts with Titles</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert type="success">
|
||||
<v-alert-title>Success</v-alert-title>
|
||||
Your changes have been saved successfully.
|
||||
</v-alert>
|
||||
<v-alert type="info">
|
||||
<v-alert-title>Information</v-alert-title>
|
||||
Here's some useful information about this feature.
|
||||
</v-alert>
|
||||
<v-alert type="warning">
|
||||
<v-alert-title>Warning</v-alert-title>
|
||||
Please review the following before continuing.
|
||||
</v-alert>
|
||||
<v-alert type="error">
|
||||
<v-alert-title>Error</v-alert-title>
|
||||
An error occurred while processing your request.
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Colored Border Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Border Alerts</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert border="start" border-color="primary" variant="tonal">
|
||||
Primary border alert
|
||||
</v-alert>
|
||||
<v-alert border="start" border-color="secondary" variant="tonal">
|
||||
Secondary border alert
|
||||
</v-alert>
|
||||
<v-alert border="start" border-color="success" variant="tonal">
|
||||
Success border alert
|
||||
</v-alert>
|
||||
<v-alert border="start" border-color="warning" variant="tonal">
|
||||
Warning border alert
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Alerts with Actions -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alerts with Action Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert type="info" variant="tonal">
|
||||
<v-alert-title>Update Available</v-alert-title>
|
||||
A new version of the application is available.
|
||||
<template v-slot:append>
|
||||
<v-btn size="small" @click="handleAction('update')">Update Now</v-btn>
|
||||
</template>
|
||||
</v-alert>
|
||||
|
||||
<v-alert type="warning" variant="tonal">
|
||||
<v-alert-title>Confirm Action</v-alert-title>
|
||||
Are you sure you want to delete this item?
|
||||
<template v-slot:append>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn size="small" color="error" @click="handleAction('delete')">Delete</v-btn>
|
||||
<v-btn size="small" variant="outlined" @click="handleAction('cancel')">Cancel</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-alert>
|
||||
|
||||
<v-alert type="success" variant="tonal">
|
||||
<v-alert-title>Invitation Sent</v-alert-title>
|
||||
Your invitation has been sent successfully.
|
||||
<template v-slot:append>
|
||||
<v-btn size="small" variant="text" @click="handleAction('undo')">Undo</v-btn>
|
||||
</template>
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Rich Content Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Rich Content Alerts</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert type="info" variant="tonal">
|
||||
<v-alert-title class="text-h6 mb-2">Welcome to Our Platform!</v-alert-title>
|
||||
<p class="mb-2">
|
||||
Thank you for joining us. Here are some quick tips to get started:
|
||||
</p>
|
||||
<ul class="mb-3">
|
||||
<li>Complete your profile settings</li>
|
||||
<li>Connect with team members</li>
|
||||
<li>Explore the dashboard features</li>
|
||||
</ul>
|
||||
<v-btn size="small" color="info">Get Started</v-btn>
|
||||
</v-alert>
|
||||
|
||||
<v-alert color="primary" variant="tonal">
|
||||
<v-alert-title class="text-h6 mb-2">System Maintenance Scheduled</v-alert-title>
|
||||
<div class="d-flex align-center gap-2 mb-2">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
<span><strong>Date:</strong> October 10, 2025</span>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2 mb-2">
|
||||
<v-icon>mdi-clock-outline</v-icon>
|
||||
<span><strong>Time:</strong> 2:00 AM - 4:00 AM EST</span>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2 mb-3">
|
||||
<v-icon>mdi-information-outline</v-icon>
|
||||
<span><strong>Impact:</strong> Service will be temporarily unavailable</span>
|
||||
</div>
|
||||
<v-btn size="small" variant="outlined" color="primary">Learn More</v-btn>
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Elevation Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alert Elevation</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert elevation="0" type="info">Elevation 0</v-alert>
|
||||
<v-alert elevation="2" type="info">Elevation 2</v-alert>
|
||||
<v-alert elevation="4" type="info">Elevation 4</v-alert>
|
||||
<v-alert elevation="8" type="info">Elevation 8</v-alert>
|
||||
<v-alert elevation="12" type="info">Elevation 12</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Rounded Alerts -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Rounded Alerts</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-alert rounded="0" type="success">Square (No Rounding)</v-alert>
|
||||
<v-alert rounded="sm" type="info">Small Rounding</v-alert>
|
||||
<v-alert rounded type="warning">Default Rounding</v-alert>
|
||||
<v-alert rounded="lg" type="error">Large Rounding</v-alert>
|
||||
<v-alert rounded="xl" type="success">Extra Large Rounding</v-alert>
|
||||
<v-alert rounded="pill" type="info">Pill Shape</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Transition Example -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Alert Transitions</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-btn @click="showTransitionAlert = !showTransitionAlert" color="primary">
|
||||
Toggle Alert
|
||||
</v-btn>
|
||||
<transition name="fade">
|
||||
<v-alert v-if="showTransitionAlert" type="success" closable @click:close="showTransitionAlert = false">
|
||||
<v-alert-title>Animated Alert</v-alert-title>
|
||||
This alert appears with a smooth fade transition.
|
||||
</v-alert>
|
||||
</transition>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<!-- Cookie Consent -->
|
||||
<v-alert
|
||||
v-if="showCookieAlert"
|
||||
color="grey-darken-3"
|
||||
variant="flat"
|
||||
icon="mdi-cookie"
|
||||
>
|
||||
<v-alert-title>Cookie Consent</v-alert-title>
|
||||
We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.
|
||||
<template v-slot:append>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn size="small" color="primary" @click="showCookieAlert = false">Accept</v-btn>
|
||||
<v-btn size="small" variant="outlined" @click="showCookieAlert = false">Decline</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-alert>
|
||||
|
||||
<!-- Form Validation Error -->
|
||||
<v-alert type="error" variant="tonal" icon="mdi-alert-circle">
|
||||
<v-alert-title>Form Validation Failed</v-alert-title>
|
||||
Please correct the following errors:
|
||||
<ul class="mt-2">
|
||||
<li>Email address is required</li>
|
||||
<li>Password must be at least 8 characters</li>
|
||||
<li>Terms and conditions must be accepted</li>
|
||||
</ul>
|
||||
</v-alert>
|
||||
|
||||
<!-- Success Message -->
|
||||
<v-alert type="success" variant="tonal" icon="mdi-check-circle">
|
||||
<v-alert-title>Profile Updated</v-alert-title>
|
||||
Your profile information has been saved successfully. Changes may take a few minutes to appear.
|
||||
</v-alert>
|
||||
|
||||
<!-- Offline Warning -->
|
||||
<v-alert type="warning" variant="tonal" icon="mdi-wifi-off" border="start">
|
||||
<v-alert-title>You are offline</v-alert-title>
|
||||
Some features may not be available. Please check your internet connection.
|
||||
</v-alert>
|
||||
|
||||
<!-- Promotional -->
|
||||
<v-alert color="purple" variant="tonal" icon="mdi-star">
|
||||
<v-alert-title>Limited Time Offer!</v-alert-title>
|
||||
Upgrade to Premium and get 50% off your first year. Offer ends soon!
|
||||
<template v-slot:append>
|
||||
<v-btn size="small" color="purple">Upgrade Now</v-btn>
|
||||
</template>
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const alert1 = ref(true)
|
||||
const alert2 = ref(true)
|
||||
const alert3 = ref(true)
|
||||
const showTransitionAlert = ref(true)
|
||||
const showCookieAlert = ref(true)
|
||||
|
||||
function resetAlerts() {
|
||||
alert1.value = true
|
||||
alert2.value = true
|
||||
alert3.value = true
|
||||
}
|
||||
|
||||
function handleAction(action: string) {
|
||||
console.log(`Action triggered: ${action}`)
|
||||
// Add your action handling logic here
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
756
src/views/AvatarsDividersPage.vue
Normal file
756
src/views/AvatarsDividersPage.vue
Normal file
@@ -0,0 +1,756 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Avatars & Dividers</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- AVATARS SECTION -->
|
||||
<v-col cols="12">
|
||||
<h2 class="text-h5 mb-4">Avatars</h2>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Avatars -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Avatars</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-avatar color="primary">
|
||||
<span class="text-h6">JD</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="secondary">
|
||||
<span class="text-h6">AS</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="success">
|
||||
<span class="text-h6">BJ</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="error">
|
||||
<span class="text-h6">MG</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="warning">
|
||||
<span class="text-h6">TC</span>
|
||||
</v-avatar>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Avatar Sizes -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Avatar Sizes</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-avatar color="primary" size="x-small">
|
||||
<span class="text-caption">XS</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="primary" size="small">
|
||||
<span class="text-caption">S</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="primary" size="default">
|
||||
<span>D</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="primary" size="large">
|
||||
<span class="text-h6">L</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="primary" size="x-large">
|
||||
<span class="text-h5">XL</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="primary" size="64">
|
||||
<span class="text-h5">64</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="primary" size="80">
|
||||
<span class="text-h4">80</span>
|
||||
</v-avatar>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Avatar with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Avatars with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-avatar color="primary">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
<v-avatar color="success">
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-avatar>
|
||||
<v-avatar color="error">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-avatar>
|
||||
<v-avatar color="warning">
|
||||
<v-icon>mdi-alert</v-icon>
|
||||
</v-avatar>
|
||||
<v-avatar color="info">
|
||||
<v-icon>mdi-information</v-icon>
|
||||
</v-avatar>
|
||||
<v-avatar color="secondary">
|
||||
<v-icon>mdi-star</v-icon>
|
||||
</v-avatar>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Avatar with Images -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Avatars with Images</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=1"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=2"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=3"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar size="large">
|
||||
<v-img src="https://i.pravatar.cc/150?img=4"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar size="x-large">
|
||||
<v-img src="https://i.pravatar.cc/150?img=5"></v-img>
|
||||
</v-avatar>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Rounded Avatars -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Rounded Avatars</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-avatar color="primary" rounded="0">
|
||||
<span>Square</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="secondary" rounded="sm">
|
||||
<span>SM</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="success" rounded="md">
|
||||
<span>MD</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="info" rounded="lg">
|
||||
<span>LG</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="warning">
|
||||
<span>Circle</span>
|
||||
</v-avatar>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Avatar with Badges -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Avatars with Badges</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-badge color="success" dot location="bottom right">
|
||||
<v-avatar color="primary">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
|
||||
<v-badge color="error" dot location="bottom right">
|
||||
<v-avatar color="secondary">
|
||||
<span>JD</span>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
|
||||
<v-badge content="3" color="error" location="top right">
|
||||
<v-avatar color="info">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
|
||||
<v-badge color="success" icon="mdi-check" location="bottom right">
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=6"></v-img>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
|
||||
<v-badge color="warning" dot location="top right">
|
||||
<v-avatar size="large">
|
||||
<v-img src="https://i.pravatar.cc/150?img=7"></v-img>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Avatar Groups -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Avatar Groups</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-subtitle-2 mb-3">Overlapping Avatars:</p>
|
||||
<v-avatar-group>
|
||||
<v-avatar color="primary">
|
||||
<span>JD</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="secondary">
|
||||
<span>AS</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="success">
|
||||
<span>BJ</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="info">
|
||||
<span>MG</span>
|
||||
</v-avatar>
|
||||
<v-avatar color="warning">
|
||||
<span>TC</span>
|
||||
</v-avatar>
|
||||
</v-avatar-group>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">With Images:</p>
|
||||
<v-avatar-group>
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=1"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=2"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=3"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=4"></v-img>
|
||||
</v-avatar>
|
||||
<v-avatar color="grey-darken-1">
|
||||
<span>+5</span>
|
||||
</v-avatar>
|
||||
</v-avatar-group>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Avatar with Tooltips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Avatars with Tooltips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-tooltip text="John Doe" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-avatar color="primary" v-bind="props">JD</v-avatar>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Alice Smith" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-avatar color="secondary" v-bind="props">AS</v-avatar>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-avatar v-bind="props">
|
||||
<v-img src="https://i.pravatar.cc/150?img=8"></v-img>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<div>
|
||||
<div class="font-weight-bold">Bob Johnson</div>
|
||||
<div class="text-caption">Senior Developer</div>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- DIVIDERS SECTION -->
|
||||
<v-col cols="12" class="mt-8">
|
||||
<h2 class="text-h5 mb-4">Dividers</h2>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Dividers -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Dividers</v-card-title>
|
||||
<v-card-text>
|
||||
<p>Content above divider</p>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<p>Content below divider</p>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<p>Multiple dividers for separation</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Vertical Dividers -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Vertical Dividers</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center" style="min-height: 60px;">
|
||||
<span>Left Content</span>
|
||||
<v-divider vertical class="mx-4"></v-divider>
|
||||
<span>Middle Content</span>
|
||||
<v-divider vertical class="mx-4"></v-divider>
|
||||
<span>Right Content</span>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Divider Thickness -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Divider Thickness</v-card-title>
|
||||
<v-card-text>
|
||||
<p>Default thickness</p>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<p>Thick divider (2px)</p>
|
||||
<v-divider class="my-4" :thickness="2"></v-divider>
|
||||
|
||||
<p>Very thick divider (4px)</p>
|
||||
<v-divider class="my-4" :thickness="4"></v-divider>
|
||||
|
||||
<p>Extra thick divider (8px)</p>
|
||||
<v-divider class="my-4" :thickness="8"></v-divider>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Divider Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Dividers</v-card-title>
|
||||
<v-card-text>
|
||||
<p>Primary divider</p>
|
||||
<v-divider color="primary" class="my-4" :thickness="2"></v-divider>
|
||||
|
||||
<p>Secondary divider</p>
|
||||
<v-divider color="secondary" class="my-4" :thickness="2"></v-divider>
|
||||
|
||||
<p>Success divider</p>
|
||||
<v-divider color="success" class="my-4" :thickness="2"></v-divider>
|
||||
|
||||
<p>Error divider</p>
|
||||
<v-divider color="error" class="my-4" :thickness="2"></v-divider>
|
||||
|
||||
<p>Warning divider</p>
|
||||
<v-divider color="warning" class="my-4" :thickness="2"></v-divider>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Dividers in Lists -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Dividers in Lists</v-card-title>
|
||||
<v-card-text>
|
||||
<v-list>
|
||||
<v-list-item title="Item 1" subtitle="First item"></v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Item 2" subtitle="Second item"></v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Item 3" subtitle="Third item"></v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Item 4" subtitle="Fourth item"></v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Dividers with Inset -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Inset Dividers</v-card-title>
|
||||
<v-card-text>
|
||||
<v-list>
|
||||
<v-list-item title="Item with inset divider" subtitle="Divider has left margin">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="primary">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-item title="Another item" subtitle="Inset divider below">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="secondary">
|
||||
<v-icon>mdi-email</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-item title="Third item" subtitle="Also with inset">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="success">
|
||||
<v-icon>mdi-phone</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- User Profile Card -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">User Profile Card:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center mb-4">
|
||||
<v-badge color="success" dot location="bottom right">
|
||||
<v-avatar size="64">
|
||||
<v-img src="https://i.pravatar.cc/150?img=10"></v-img>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
<div class="ml-4">
|
||||
<div class="text-h6">John Doe</div>
|
||||
<div class="text-caption text-grey">Senior Developer</div>
|
||||
<v-chip size="x-small" color="success" class="mt-1">Online</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<div class="mb-2">
|
||||
<v-icon size="small" class="mr-2">mdi-email</v-icon>
|
||||
<span class="text-body-2">john.doe@example.com</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<v-icon size="small" class="mr-2">mdi-phone</v-icon>
|
||||
<span class="text-body-2">+1 (555) 123-4567</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<v-icon size="small" class="mr-2">mdi-map-marker</v-icon>
|
||||
<span class="text-body-2">San Francisco, CA</span>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<div class="d-flex justify-space-around">
|
||||
<div class="text-center">
|
||||
<div class="text-h6">156</div>
|
||||
<div class="text-caption">Posts</div>
|
||||
</div>
|
||||
<v-divider vertical></v-divider>
|
||||
<div class="text-center">
|
||||
<div class="text-h6">2.4K</div>
|
||||
<div class="text-caption">Followers</div>
|
||||
</div>
|
||||
<v-divider vertical></v-divider>
|
||||
<div class="text-center">
|
||||
<div class="text-h6">342</div>
|
||||
<div class="text-caption">Following</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Team Members -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Team Members List:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item v-for="member in teamMembers" :key="member.name">
|
||||
<template v-slot:prepend>
|
||||
<v-badge :color="member.online ? 'success' : 'grey'" dot location="bottom right">
|
||||
<v-avatar :color="member.color">
|
||||
{{ member.initials }}
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</template>
|
||||
<v-list-item-title>{{ member.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ member.role }}</v-list-item-subtitle>
|
||||
<template v-slot:append>
|
||||
<v-btn icon="mdi-message" size="small" variant="text"></v-btn>
|
||||
<v-btn icon="mdi-email" size="small" variant="text"></v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider v-if="member !== teamMembers[teamMembers.length - 1]" inset></v-divider>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Comment Section -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Comments Section:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div v-for="(comment, index) in comments" :key="index">
|
||||
<div class="d-flex mb-3">
|
||||
<v-avatar size="40" :color="comment.avatarColor">
|
||||
{{ comment.initials }}
|
||||
</v-avatar>
|
||||
<div class="ml-3 flex-grow-1">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<span class="font-weight-bold">{{ comment.author }}</span>
|
||||
<span class="text-caption text-grey ml-2">{{ comment.time }}</span>
|
||||
</div>
|
||||
<p class="text-body-2 mb-2">{{ comment.text }}</p>
|
||||
<div>
|
||||
<v-btn size="x-small" variant="text" class="px-2">
|
||||
<v-icon start size="small">mdi-thumb-up-outline</v-icon>
|
||||
{{ comment.likes }}
|
||||
</v-btn>
|
||||
<v-btn size="x-small" variant="text" class="px-2">Reply</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider v-if="index < comments.length - 1" class="my-4"></v-divider>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Stats Dashboard -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Statistics Dashboard:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<div class="text-center">
|
||||
<v-avatar color="primary" size="56" class="mb-3">
|
||||
<v-icon size="large">mdi-account-group</v-icon>
|
||||
</v-avatar>
|
||||
<div class="text-h5">2,453</div>
|
||||
<div class="text-caption text-grey">Total Users</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-divider vertical></v-divider>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<div class="text-center">
|
||||
<v-avatar color="success" size="56" class="mb-3">
|
||||
<v-icon size="large">mdi-currency-usd</v-icon>
|
||||
</v-avatar>
|
||||
<div class="text-h5">$12.4K</div>
|
||||
<div class="text-caption text-grey">Revenue</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-divider vertical></v-divider>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<div class="text-center">
|
||||
<v-avatar color="info" size="56" class="mb-3">
|
||||
<v-icon size="large">mdi-cart</v-icon>
|
||||
</v-avatar>
|
||||
<div class="text-h5">1,234</div>
|
||||
<div class="text-caption text-grey">Orders</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-divider vertical></v-divider>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<div class="text-center">
|
||||
<v-avatar color="warning" size="56" class="mb-3">
|
||||
<v-icon size="large">mdi-star</v-icon>
|
||||
</v-avatar>
|
||||
<div class="text-h5">4.8</div>
|
||||
<div class="text-caption text-grey">Rating</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Social Media Card -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Social Media Post:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center mb-3">
|
||||
<v-avatar>
|
||||
<v-img src="https://i.pravatar.cc/150?img=11"></v-img>
|
||||
</v-avatar>
|
||||
<div class="ml-3">
|
||||
<div class="font-weight-bold">Sarah Johnson</div>
|
||||
<div class="text-caption text-grey">2 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-3">
|
||||
Just completed an amazing project! 🎉 Thanks to the team for all the hard work.
|
||||
</p>
|
||||
|
||||
<v-divider class="my-3"></v-divider>
|
||||
|
||||
<div class="d-flex justify-space-around">
|
||||
<v-btn variant="text" size="small">
|
||||
<v-icon start>mdi-thumb-up-outline</v-icon>
|
||||
156 Likes
|
||||
</v-btn>
|
||||
<v-divider vertical></v-divider>
|
||||
<v-btn variant="text" size="small">
|
||||
<v-icon start>mdi-comment-outline</v-icon>
|
||||
24 Comments
|
||||
</v-btn>
|
||||
<v-divider vertical></v-divider>
|
||||
<v-btn variant="text" size="small">
|
||||
<v-icon start>mdi-share-variant</v-icon>
|
||||
Share
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Contact List -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Contact List:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list density="compact">
|
||||
<v-list-subheader>RECENT CONTACTS</v-list-subheader>
|
||||
<v-list-item v-for="contact in contacts" :key="contact.name">
|
||||
<template v-slot:prepend>
|
||||
<v-badge :color="contact.status" dot location="bottom right">
|
||||
<v-avatar :color="contact.color" size="40">
|
||||
{{ contact.initials }}
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</template>
|
||||
<v-list-item-title>{{ contact.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ contact.message }}</v-list-item-subtitle>
|
||||
<template v-slot:append>
|
||||
<span class="text-caption text-grey">{{ contact.time }}</span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider v-if="contact !== contacts[contacts.length - 1]" inset></v-divider>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Toolbar with Avatar Actions -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Application Toolbar:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-toolbar color="primary">
|
||||
<v-toolbar-title>My Application</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn icon>
|
||||
<v-badge content="3" color="error">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
|
||||
<v-btn icon>
|
||||
<v-badge content="5" color="error">
|
||||
<v-icon>mdi-email</v-icon>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
|
||||
<v-divider vertical class="mx-2"></v-divider>
|
||||
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" class="ml-2">
|
||||
<v-badge color="success" dot location="bottom right">
|
||||
<v-avatar size="36">
|
||||
<v-img src="https://i.pravatar.cc/150?img=12"></v-img>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="primary">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title>Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="secondary">
|
||||
<v-icon>mdi-cog</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title>Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="error">
|
||||
<v-icon>mdi-logout</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title>Logout</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const teamMembers = [
|
||||
{ name: 'John Doe', role: 'Frontend Developer', initials: 'JD', color: 'primary', online: true },
|
||||
{ name: 'Alice Smith', role: 'Backend Developer', initials: 'AS', color: 'secondary', online: true },
|
||||
{ name: 'Bob Johnson', role: 'UI/UX Designer', initials: 'BJ', color: 'success', online: false },
|
||||
{ name: 'Maria Garcia', role: 'Project Manager', initials: 'MG', color: 'info', online: true }
|
||||
]
|
||||
|
||||
const comments = [
|
||||
{
|
||||
author: 'John Smith',
|
||||
initials: 'JS',
|
||||
avatarColor: 'primary',
|
||||
time: '2 hours ago',
|
||||
text: 'This is an excellent article! Really helped me understand the concept better.',
|
||||
likes: 12
|
||||
},
|
||||
{
|
||||
author: 'Emily Davis',
|
||||
initials: 'ED',
|
||||
avatarColor: 'secondary',
|
||||
time: '5 hours ago',
|
||||
text: 'Great work! Looking forward to more content like this.',
|
||||
likes: 8
|
||||
},
|
||||
{
|
||||
author: 'Michael Brown',
|
||||
initials: 'MB',
|
||||
avatarColor: 'success',
|
||||
time: '1 day ago',
|
||||
text: 'Very informative. Could you cover more advanced topics in the future?',
|
||||
likes: 15
|
||||
}
|
||||
]
|
||||
|
||||
const contacts = [
|
||||
{ name: 'Emma Wilson', initials: 'EW', color: 'primary', status: 'success', message: 'Hey, how are you?', time: '2m' },
|
||||
{ name: 'James Taylor', initials: 'JT', color: 'secondary', status: 'warning', message: 'Meeting at 3 PM?', time: '15m' },
|
||||
{ name: 'Olivia Martinez', initials: 'OM', color: 'success', status: 'success', message: 'Thanks for the help!', time: '1h' },
|
||||
{ name: 'William Anderson', initials: 'WA', color: 'info', status: 'grey', message: 'See you tomorrow', time: '2h' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
516
src/views/BadgesPage.vue
Normal file
516
src/views/BadgesPage.vue
Normal file
@@ -0,0 +1,516 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Badges</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Badges -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Badges</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge content="6">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="3" color="primary">
|
||||
<v-icon>mdi-email</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="12" color="secondary">
|
||||
<v-icon>mdi-message</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="5" color="success">
|
||||
<v-icon>mdi-check-circle</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="99" color="error">
|
||||
<v-icon>mdi-alert-circle</v-icon>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Badge Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Badge Colors</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge content="4" color="primary">
|
||||
<v-btn color="primary">Primary</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="4" color="secondary">
|
||||
<v-btn color="secondary">Secondary</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="4" color="success">
|
||||
<v-btn color="success">Success</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="4" color="info">
|
||||
<v-btn color="info">Info</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="4" color="warning">
|
||||
<v-btn color="warning">Warning</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="4" color="error">
|
||||
<v-btn color="error">Error</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Dot Badges -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Dot Badges</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge dot color="success">
|
||||
<v-icon size="large">mdi-account</v-icon>
|
||||
</v-badge>
|
||||
<v-badge dot color="error">
|
||||
<v-icon size="large">mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
<v-badge dot color="warning">
|
||||
<v-icon size="large">mdi-email</v-icon>
|
||||
</v-badge>
|
||||
<v-badge dot color="info">
|
||||
<v-btn color="primary">Online</v-btn>
|
||||
</v-badge>
|
||||
<v-badge dot color="success">
|
||||
<v-btn color="secondary">Available</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Positioned Badges -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Badge Positions</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<div class="text-center">
|
||||
<p class="text-caption mb-2">Top Start</p>
|
||||
<v-badge content="5" location="top start" color="error">
|
||||
<v-btn variant="outlined">Button</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-caption mb-2">Top End</p>
|
||||
<v-badge content="5" location="top end" color="error">
|
||||
<v-btn variant="outlined">Button</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-caption mb-2">Bottom Start</p>
|
||||
<v-badge content="5" location="bottom start" color="success">
|
||||
<v-btn variant="outlined">Button</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-caption mb-2">Bottom End</p>
|
||||
<v-badge content="5" location="bottom end" color="success">
|
||||
<v-btn variant="outlined">Button</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Max Value -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Badge Max Value</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-badge :content="notifications" :max="9" color="error">
|
||||
<v-icon size="large">mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
<v-badge :content="messages" :max="99" color="primary">
|
||||
<v-icon size="large">mdi-email</v-icon>
|
||||
</v-badge>
|
||||
<v-badge :content="alerts" :max="999" color="warning">
|
||||
<v-icon size="large">mdi-alert</v-icon>
|
||||
</v-badge>
|
||||
<div>
|
||||
<v-btn size="small" @click="incrementNotifications" class="mr-2">Add Notification</v-btn>
|
||||
<v-btn size="small" @click="resetCounters" color="secondary">Reset</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Dynamic Badges -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Dynamic Badges</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-badge :content="cartItems" color="error">
|
||||
<v-btn icon="mdi-cart" color="primary"></v-btn>
|
||||
</v-badge>
|
||||
<v-btn @click="addToCart">Add to Cart</v-btn>
|
||||
<v-btn @click="removeFromCart" color="error">Remove from Cart</v-btn>
|
||||
<v-btn @click="clearCart" color="secondary">Clear Cart</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Badges on Avatars -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Badges on Avatars</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge dot color="success" location="bottom end">
|
||||
<v-avatar color="primary" size="large">JD</v-avatar>
|
||||
</v-badge>
|
||||
<v-badge dot color="error" location="bottom end">
|
||||
<v-avatar color="secondary" size="large">AS</v-avatar>
|
||||
</v-badge>
|
||||
<v-badge dot color="warning" location="bottom end">
|
||||
<v-avatar color="info" size="large">BJ</v-avatar>
|
||||
</v-badge>
|
||||
<v-badge content="5" color="error" location="top end">
|
||||
<v-avatar color="success" size="large">MG</v-avatar>
|
||||
</v-badge>
|
||||
<v-badge content="NEW" color="primary" location="top end">
|
||||
<v-avatar color="warning" size="large">TC</v-avatar>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Badges with Text Content -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Text Content Badges</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge content="NEW" color="error">
|
||||
<v-btn color="primary">New Feature</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="HOT" color="error">
|
||||
<v-btn color="secondary">Hot Deal</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="SALE" color="success">
|
||||
<v-btn color="info">On Sale</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="PRO" color="warning">
|
||||
<v-btn color="default">Upgrade</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="BETA" color="info">
|
||||
<v-btn color="purple">Try Beta</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Inline Badges -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Inline Badges</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge inline content="12" color="error">
|
||||
<span class="text-h6">Notifications</span>
|
||||
</v-badge>
|
||||
<v-badge inline content="5" color="primary">
|
||||
<span class="text-h6">Messages</span>
|
||||
</v-badge>
|
||||
<v-badge inline content="3" color="success">
|
||||
<span class="text-h6">Updates</span>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Badges with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Badges with Different Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge content="8" color="error">
|
||||
<v-icon size="x-large" color="grey-darken-1">mdi-email</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="15" color="primary">
|
||||
<v-icon size="x-large" color="grey-darken-1">mdi-message</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="3" color="success">
|
||||
<v-icon size="x-large" color="grey-darken-1">mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="7" color="warning">
|
||||
<v-icon size="x-large" color="grey-darken-1">mdi-alert</v-icon>
|
||||
</v-badge>
|
||||
<v-badge content="22" color="info">
|
||||
<v-icon size="x-large" color="grey-darken-1">mdi-comment</v-icon>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Offset Badges -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Offset Badges</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge content="6" color="error" offset-x="10" offset-y="10">
|
||||
<v-btn icon="mdi-bell"></v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="3" color="primary" offset-x="-5" offset-y="-5">
|
||||
<v-btn icon="mdi-email"></v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="12" color="success" offset-x="15" offset-y="15">
|
||||
<v-avatar color="primary" size="large">AB</v-avatar>
|
||||
</v-badge>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Badges with Cards -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Badges on Cards</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-badge content="New" color="error" floating>
|
||||
<v-card>
|
||||
<v-card-title>Product 1</v-card-title>
|
||||
<v-card-text>
|
||||
Latest product just arrived!
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-badge>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-badge content="Sale" color="success" floating>
|
||||
<v-card>
|
||||
<v-card-title>Product 2</v-card-title>
|
||||
<v-card-text>
|
||||
Special discount available.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-badge>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-badge content="Hot" color="warning" floating>
|
||||
<v-card>
|
||||
<v-card-title>Product 3</v-card-title>
|
||||
<v-card-text>
|
||||
Trending item this week.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-badge>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-6">
|
||||
<!-- Navigation Menu -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-3">Navigation Menu with Badges:</p>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge :content="unreadMessages" color="error">
|
||||
<v-btn prepend-icon="mdi-email">Messages</v-btn>
|
||||
</v-badge>
|
||||
<v-badge :content="pendingTasks" color="warning">
|
||||
<v-btn prepend-icon="mdi-checkbox-marked">Tasks</v-btn>
|
||||
</v-badge>
|
||||
<v-badge dot color="success">
|
||||
<v-btn prepend-icon="mdi-account">Profile</v-btn>
|
||||
</v-badge>
|
||||
<v-badge :content="cartItems" color="primary">
|
||||
<v-btn prepend-icon="mdi-cart">Cart</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Status -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-3">User Status Indicators:</p>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<div class="text-center">
|
||||
<v-badge dot color="success" location="bottom end">
|
||||
<v-avatar color="primary" size="large">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
<div class="text-caption mt-2">Online</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<v-badge dot color="warning" location="bottom end">
|
||||
<v-avatar color="secondary" size="large">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
<div class="text-caption mt-2">Away</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<v-badge dot color="error" location="bottom end">
|
||||
<v-avatar color="info" size="large">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
<div class="text-caption mt-2">Busy</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<v-badge dot color="grey" location="bottom end">
|
||||
<v-avatar color="grey" size="large">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
<div class="text-caption mt-2">Offline</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification Panel -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-3">Notification Panel:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-badge dot color="error">
|
||||
<v-avatar color="primary">
|
||||
<v-icon>mdi-email</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</template>
|
||||
<v-list-item-title>New Email</v-list-item-title>
|
||||
<v-list-item-subtitle>You have unread messages</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-badge dot color="success">
|
||||
<v-avatar color="success">
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</template>
|
||||
<v-list-item-title>Task Completed</v-list-item-title>
|
||||
<v-list-item-subtitle>Your task has been marked as done</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-badge dot color="warning">
|
||||
<v-avatar color="warning">
|
||||
<v-icon>mdi-alert</v-icon>
|
||||
</v-avatar>
|
||||
</v-badge>
|
||||
</template>
|
||||
<v-list-item-title>System Update</v-list-item-title>
|
||||
<v-list-item-subtitle>A new update is available</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
<!-- Shopping Cart -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-3">E-commerce Badge Example:</p>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-badge :content="cartItems" color="error" overlap>
|
||||
<v-btn size="large" icon color="primary">
|
||||
<v-icon>mdi-cart</v-icon>
|
||||
</v-btn>
|
||||
</v-badge>
|
||||
<v-badge :content="wishlistItems" color="error" overlap>
|
||||
<v-btn size="large" icon color="error">
|
||||
<v-icon>mdi-heart</v-icon>
|
||||
</v-btn>
|
||||
</v-badge>
|
||||
<v-badge content="3" color="warning" overlap>
|
||||
<v-btn size="large" icon color="warning">
|
||||
<v-icon>mdi-compare</v-icon>
|
||||
</v-btn>
|
||||
</v-badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Dynamic counters
|
||||
const notifications = ref(12)
|
||||
const messages = ref(156)
|
||||
const alerts = ref(2547)
|
||||
const cartItems = ref(3)
|
||||
const unreadMessages = ref(8)
|
||||
const pendingTasks = ref(5)
|
||||
const wishlistItems = ref(12)
|
||||
|
||||
function incrementNotifications() {
|
||||
notifications.value += 1
|
||||
messages.value += 5
|
||||
alerts.value += 10
|
||||
}
|
||||
|
||||
function resetCounters() {
|
||||
notifications.value = 12
|
||||
messages.value = 156
|
||||
alerts.value = 2547
|
||||
}
|
||||
|
||||
function addToCart() {
|
||||
cartItems.value += 1
|
||||
}
|
||||
|
||||
function removeFromCart() {
|
||||
if (cartItems.value > 0) {
|
||||
cartItems.value -= 1
|
||||
}
|
||||
}
|
||||
|
||||
function clearCart() {
|
||||
cartItems.value = 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
591
src/views/BreadcrumbsPage.vue
Normal file
591
src/views/BreadcrumbsPage.vue
Normal file
@@ -0,0 +1,591 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Breadcrumbs</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Breadcrumbs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Breadcrumbs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="basicItems"></v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Breadcrumbs with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="iconItems">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-home</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs with Custom Divider -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Custom Divider</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-subtitle-2 mb-3">Arrow Divider:</p>
|
||||
<v-breadcrumbs :items="basicItems" divider=">"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Dash Divider:</p>
|
||||
<v-breadcrumbs :items="basicItems" divider="-"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Dot Divider:</p>
|
||||
<v-breadcrumbs :items="basicItems" divider="•"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Icon Divider:</p>
|
||||
<v-breadcrumbs :items="basicItems">
|
||||
<template v-slot:divider>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs with Disabled Items -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Disabled Items</v-card-title>
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="disabledItems"></v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs Density -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Breadcrumbs Density</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-subtitle-2 mb-3">Compact:</p>
|
||||
<v-breadcrumbs :items="basicItems" density="compact"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Default:</p>
|
||||
<v-breadcrumbs :items="basicItems" density="default"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Comfortable:</p>
|
||||
<v-breadcrumbs :items="basicItems" density="comfortable"></v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs with Links -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Breadcrumbs with Links</v-card-title>
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="linkItems">
|
||||
<template v-slot:item="{ item }">
|
||||
<v-breadcrumbs-item
|
||||
:disabled="item.disabled"
|
||||
:href="item.href"
|
||||
>
|
||||
{{ item.title }}
|
||||
</v-breadcrumbs-item>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Breadcrumbs</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-subtitle-2 mb-3">Primary:</p>
|
||||
<v-breadcrumbs :items="basicItems" color="primary"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Secondary:</p>
|
||||
<v-breadcrumbs :items="basicItems" color="secondary"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Success:</p>
|
||||
<v-breadcrumbs :items="basicItems" color="success"></v-breadcrumbs>
|
||||
|
||||
<p class="text-subtitle-2 mb-3 mt-6">Error:</p>
|
||||
<v-breadcrumbs :items="basicItems" color="error"></v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Large Breadcrumbs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Large Breadcrumbs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="basicItems" class="text-h6"></v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs with Custom Items -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Custom Item Template</v-card-title>
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="customItems">
|
||||
<template v-slot:item="{ item }">
|
||||
<v-breadcrumbs-item :disabled="item.disabled">
|
||||
<v-icon v-if="item.icon" start size="small">{{ item.icon }}</v-icon>
|
||||
{{ item.title }}
|
||||
</v-breadcrumbs-item>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Breadcrumbs with Actions -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Breadcrumbs with Actions</v-card-title>
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="basicItems">
|
||||
<template v-slot:append>
|
||||
<v-btn icon="mdi-magnify" size="small" variant="text"></v-btn>
|
||||
<v-btn icon="mdi-cog" size="small" variant="text"></v-btn>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- E-commerce Navigation -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">E-commerce Product Navigation:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="ecommerceItems" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-home</v-icon>
|
||||
</template>
|
||||
<template v-slot:divider>
|
||||
<v-icon size="small">mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<v-img
|
||||
src="https://via.placeholder.com/100"
|
||||
width="100"
|
||||
height="100"
|
||||
class="mr-4"
|
||||
></v-img>
|
||||
<div>
|
||||
<h3 class="mb-2">Wireless Headphones</h3>
|
||||
<div class="text-h5 text-primary mb-2">$99.99</div>
|
||||
<v-rating :model-value="4.5" readonly density="compact" size="small"></v-rating>
|
||||
<div class="text-caption">(124 reviews)</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- File System Navigation -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">File System Browser:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="fileSystemItems" density="compact">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-folder-home</v-icon>
|
||||
</template>
|
||||
<template v-slot:item="{ item }">
|
||||
<v-breadcrumbs-item
|
||||
:disabled="item.disabled"
|
||||
@click="navigateToFolder(item)"
|
||||
>
|
||||
<v-icon v-if="item.icon" start size="small">{{ item.icon }}</v-icon>
|
||||
{{ item.title }}
|
||||
</v-breadcrumbs-item>
|
||||
</template>
|
||||
<template v-slot:divider>
|
||||
<v-icon size="small">mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
<v-divider class="my-3"></v-divider>
|
||||
|
||||
<v-list density="compact">
|
||||
<v-list-item v-for="file in currentFiles" :key="file.name">
|
||||
<template v-slot:prepend>
|
||||
<v-icon :color="file.type === 'folder' ? 'primary' : 'grey'">
|
||||
{{ file.type === 'folder' ? 'mdi-folder' : 'mdi-file-document' }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ file.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ file.size }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Documentation Navigation -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Documentation Navigator:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="docsItems" color="primary" density="compact">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-book-open-variant</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
<v-divider class="my-3"></v-divider>
|
||||
|
||||
<h4 class="mb-3">Getting Started with Components</h4>
|
||||
<p class="text-body-2 mb-3">
|
||||
Learn how to use our component library effectively in your projects.
|
||||
This guide covers installation, basic usage, and best practices.
|
||||
</p>
|
||||
<v-alert type="info" density="compact">
|
||||
<strong>Tip:</strong> Use breadcrumbs to help users understand their location in the documentation hierarchy.
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Admin Dashboard Navigation -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Admin Dashboard with Breadcrumbs:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-toolbar color="primary" density="compact">
|
||||
<v-app-bar-nav-icon></v-app-bar-nav-icon>
|
||||
<v-toolbar-title>Admin Dashboard</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon="mdi-bell"></v-btn>
|
||||
<v-btn icon="mdi-account-circle"></v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card-text class="bg-grey-lighten-4">
|
||||
<v-breadcrumbs :items="adminItems" bg-color="white" class="px-3">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-view-dashboard</v-icon>
|
||||
</template>
|
||||
<template v-slot:divider>
|
||||
<v-icon size="small">mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">User Details - John Doe</h3>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Full Name"
|
||||
model-value="John Doe"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Email"
|
||||
model-value="john.doe@example.com"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Role"
|
||||
model-value="Administrator"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Status"
|
||||
model-value="Active"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Blog Post Navigation -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Blog Post with Category Breadcrumbs:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="blogItems" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-post</v-icon>
|
||||
</template>
|
||||
<template v-slot:divider>
|
||||
<v-icon size="small">mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<div class="d-flex align-center mb-3">
|
||||
<v-avatar size="40" color="primary" class="mr-3">
|
||||
<span>JD</span>
|
||||
</v-avatar>
|
||||
<div>
|
||||
<div class="font-weight-bold">John Doe</div>
|
||||
<div class="text-caption text-grey">Posted on October 4, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-3">Building Modern Web Applications</h2>
|
||||
|
||||
<v-chip-group class="mb-3">
|
||||
<v-chip size="small">Vue.js</v-chip>
|
||||
<v-chip size="small">Vuetify</v-chip>
|
||||
<v-chip size="small">TypeScript</v-chip>
|
||||
</v-chip-group>
|
||||
|
||||
<p class="text-body-2">
|
||||
Learn how to build modern, scalable web applications using the latest technologies
|
||||
and best practices. This comprehensive guide covers everything from setup to deployment.
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Settings Navigation -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Settings with Breadcrumb Navigation:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="settingsItems" density="compact">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-cog</v-icon>
|
||||
</template>
|
||||
<template v-slot:item="{ item }">
|
||||
<v-breadcrumbs-item :disabled="item.disabled">
|
||||
<v-icon v-if="item.icon" start size="small">{{ item.icon }}</v-icon>
|
||||
{{ item.title }}
|
||||
</v-breadcrumbs-item>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
<v-divider class="my-3"></v-divider>
|
||||
|
||||
<h4 class="mb-3">Notification Preferences</h4>
|
||||
<v-switch label="Email notifications" density="compact" model-value></v-switch>
|
||||
<v-switch label="Push notifications" density="compact" model-value></v-switch>
|
||||
<v-switch label="SMS notifications" density="compact"></v-switch>
|
||||
<v-switch label="Desktop notifications" density="compact" model-value></v-switch>
|
||||
|
||||
<v-btn color="primary" class="mt-3">Save Changes</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Project Management -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Project Management Tool:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="projectItems" density="compact" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-briefcase</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
<v-divider class="my-3"></v-divider>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mb-3">
|
||||
<h4>Task: Implement User Authentication</h4>
|
||||
<v-chip color="warning" size="small">In Progress</v-chip>
|
||||
</div>
|
||||
|
||||
<p class="text-body-2 mb-3">
|
||||
Add OAuth2 authentication with support for Google and GitHub providers.
|
||||
</p>
|
||||
|
||||
<div class="mb-2">
|
||||
<strong>Assigned to:</strong>
|
||||
<v-avatar-group class="ml-2" density="compact">
|
||||
<v-avatar size="24" color="primary">
|
||||
<span class="text-caption">JD</span>
|
||||
</v-avatar>
|
||||
<v-avatar size="24" color="secondary">
|
||||
<span class="text-caption">AS</span>
|
||||
</v-avatar>
|
||||
</v-avatar-group>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<strong>Due Date:</strong> Oct 10, 2025
|
||||
</div>
|
||||
|
||||
<v-progress-linear
|
||||
:model-value="65"
|
||||
color="primary"
|
||||
height="8"
|
||||
class="mt-3"
|
||||
></v-progress-linear>
|
||||
<div class="text-caption text-right mt-1">65% Complete</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Multi-level Navigation -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Deep Navigation Structure:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-breadcrumbs :items="deepItems" density="compact">
|
||||
<template v-slot:prepend>
|
||||
<v-icon size="small">mdi-home</v-icon>
|
||||
</template>
|
||||
<template v-slot:divider>
|
||||
<v-icon size="x-small">mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
<v-alert type="info" density="compact" class="mt-3">
|
||||
Breadcrumbs help users understand their location in deep navigation hierarchies
|
||||
and provide quick access to parent pages.
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const basicItems = [
|
||||
{ title: 'Home', disabled: false },
|
||||
{ title: 'Products', disabled: false },
|
||||
{ title: 'Category', disabled: false },
|
||||
{ title: 'Item', disabled: true }
|
||||
]
|
||||
|
||||
const iconItems = [
|
||||
{ title: 'Dashboard', disabled: false },
|
||||
{ title: 'Users', disabled: false },
|
||||
{ title: 'Profile', disabled: true }
|
||||
]
|
||||
|
||||
const disabledItems = [
|
||||
{ title: 'Home', disabled: false },
|
||||
{ title: 'Products', disabled: true },
|
||||
{ title: 'Details', disabled: true }
|
||||
]
|
||||
|
||||
const linkItems = [
|
||||
{ title: 'Home', disabled: false, href: '#' },
|
||||
{ title: 'Library', disabled: false, href: '#' },
|
||||
{ title: 'Data', disabled: true }
|
||||
]
|
||||
|
||||
const customItems = [
|
||||
{ title: 'Home', icon: 'mdi-home', disabled: false },
|
||||
{ title: 'Documents', icon: 'mdi-folder', disabled: false },
|
||||
{ title: 'Projects', icon: 'mdi-briefcase', disabled: false },
|
||||
{ title: 'File.pdf', icon: 'mdi-file-pdf-box', disabled: true }
|
||||
]
|
||||
|
||||
const ecommerceItems = [
|
||||
{ title: 'Home', disabled: false },
|
||||
{ title: 'Electronics', disabled: false },
|
||||
{ title: 'Audio', disabled: false },
|
||||
{ title: 'Headphones', disabled: false },
|
||||
{ title: 'Wireless Headphones', disabled: true }
|
||||
]
|
||||
|
||||
const fileSystemItems = [
|
||||
{ title: 'Home', icon: 'mdi-folder-home', disabled: false },
|
||||
{ title: 'Documents', icon: 'mdi-folder', disabled: false },
|
||||
{ title: 'Projects', icon: 'mdi-folder', disabled: false },
|
||||
{ title: 'Web App', icon: 'mdi-folder-open', disabled: true }
|
||||
]
|
||||
|
||||
const currentFiles = [
|
||||
{ name: 'src', type: 'folder', size: '—' },
|
||||
{ name: 'public', type: 'folder', size: '—' },
|
||||
{ name: 'package.json', type: 'file', size: '2.4 KB' },
|
||||
{ name: 'README.md', type: 'file', size: '1.2 KB' },
|
||||
{ name: 'tsconfig.json', type: 'file', size: '854 B' }
|
||||
]
|
||||
|
||||
const docsItems = [
|
||||
{ title: 'Docs', disabled: false },
|
||||
{ title: 'Components', disabled: false },
|
||||
{ title: 'Getting Started', disabled: true }
|
||||
]
|
||||
|
||||
const adminItems = [
|
||||
{ title: 'Dashboard', disabled: false },
|
||||
{ title: 'Users', disabled: false },
|
||||
{ title: 'User Details', disabled: true }
|
||||
]
|
||||
|
||||
const blogItems = [
|
||||
{ title: 'Blog', disabled: false },
|
||||
{ title: 'Technology', disabled: false },
|
||||
{ title: 'Web Development', disabled: false },
|
||||
{ title: 'Building Modern Web Applications', disabled: true }
|
||||
]
|
||||
|
||||
const settingsItems = [
|
||||
{ title: 'Settings', icon: 'mdi-cog', disabled: false },
|
||||
{ title: 'Preferences', icon: 'mdi-tune', disabled: false },
|
||||
{ title: 'Notifications', icon: 'mdi-bell', disabled: true }
|
||||
]
|
||||
|
||||
const projectItems = [
|
||||
{ title: 'Projects', disabled: false },
|
||||
{ title: 'Website Redesign', disabled: false },
|
||||
{ title: 'Sprint 3', disabled: false },
|
||||
{ title: 'Authentication Task', disabled: true }
|
||||
]
|
||||
|
||||
const deepItems = [
|
||||
{ title: 'Level 1', disabled: false },
|
||||
{ title: 'Level 2', disabled: false },
|
||||
{ title: 'Level 3', disabled: false },
|
||||
{ title: 'Level 4', disabled: false },
|
||||
{ title: 'Level 5', disabled: false },
|
||||
{ title: 'Level 6', disabled: true }
|
||||
]
|
||||
|
||||
const navigateToFolder = (item: any) => {
|
||||
console.log('Navigate to:', item.title)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
422
src/views/ButtonsPage.vue
Normal file
422
src/views/ButtonsPage.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Buttons</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn>Default</v-btn>
|
||||
<v-btn color="primary">Primary</v-btn>
|
||||
<v-btn color="secondary">Secondary</v-btn>
|
||||
<v-btn color="success">Success</v-btn>
|
||||
<v-btn color="info">Info</v-btn>
|
||||
<v-btn color="warning">Warning</v-btn>
|
||||
<v-btn color="error">Error</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Outlined Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Outlined Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn variant="outlined">Default</v-btn>
|
||||
<v-btn variant="outlined" color="primary">Primary</v-btn>
|
||||
<v-btn variant="outlined" color="secondary">Secondary</v-btn>
|
||||
<v-btn variant="outlined" color="success">Success</v-btn>
|
||||
<v-btn variant="outlined" color="info">Info</v-btn>
|
||||
<v-btn variant="outlined" color="warning">Warning</v-btn>
|
||||
<v-btn variant="outlined" color="error">Error</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Text Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Text Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn variant="text">Default</v-btn>
|
||||
<v-btn variant="text" color="primary">Primary</v-btn>
|
||||
<v-btn variant="text" color="secondary">Secondary</v-btn>
|
||||
<v-btn variant="text" color="success">Success</v-btn>
|
||||
<v-btn variant="text" color="info">Info</v-btn>
|
||||
<v-btn variant="text" color="warning">Warning</v-btn>
|
||||
<v-btn variant="text" color="error">Error</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Flat Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Flat Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn variant="flat">Default</v-btn>
|
||||
<v-btn variant="flat" color="primary">Primary</v-btn>
|
||||
<v-btn variant="flat" color="secondary">Secondary</v-btn>
|
||||
<v-btn variant="flat" color="success">Success</v-btn>
|
||||
<v-btn variant="flat" color="info">Info</v-btn>
|
||||
<v-btn variant="flat" color="warning">Warning</v-btn>
|
||||
<v-btn variant="flat" color="error">Error</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Tonal Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tonal Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn variant="tonal">Default</v-btn>
|
||||
<v-btn variant="tonal" color="primary">Primary</v-btn>
|
||||
<v-btn variant="tonal" color="secondary">Secondary</v-btn>
|
||||
<v-btn variant="tonal" color="success">Success</v-btn>
|
||||
<v-btn variant="tonal" color="info">Info</v-btn>
|
||||
<v-btn variant="tonal" color="warning">Warning</v-btn>
|
||||
<v-btn variant="tonal" color="error">Error</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Button Sizes -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Button Sizes</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-btn size="x-small" color="primary">X-Small</v-btn>
|
||||
<v-btn size="small" color="primary">Small</v-btn>
|
||||
<v-btn size="default" color="primary">Default</v-btn>
|
||||
<v-btn size="large" color="primary">Large</v-btn>
|
||||
<v-btn size="x-large" color="primary">X-Large</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Rounded Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Rounded Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn rounded="0" color="primary">Square</v-btn>
|
||||
<v-btn rounded="sm" color="primary">Small</v-btn>
|
||||
<v-btn rounded color="primary">Default</v-btn>
|
||||
<v-btn rounded="lg" color="primary">Large</v-btn>
|
||||
<v-btn rounded="xl" color="primary">X-Large</v-btn>
|
||||
<v-btn rounded="pill" color="primary">Pill</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Buttons with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Buttons with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" prepend-icon="mdi-cloud-upload">Upload</v-btn>
|
||||
<v-btn color="success" append-icon="mdi-chevron-right">Next</v-btn>
|
||||
<v-btn color="error" prepend-icon="mdi-delete">Delete</v-btn>
|
||||
<v-btn color="info" prepend-icon="mdi-download">Download</v-btn>
|
||||
<v-btn color="warning" prepend-icon="mdi-alert">Warning</v-btn>
|
||||
<v-btn color="secondary" prepend-icon="mdi-content-save">Save</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Icon Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Icon Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn icon="mdi-heart" color="error"></v-btn>
|
||||
<v-btn icon="mdi-star" color="warning"></v-btn>
|
||||
<v-btn icon="mdi-thumb-up" color="primary"></v-btn>
|
||||
<v-btn icon="mdi-share-variant" color="info"></v-btn>
|
||||
<v-btn icon="mdi-bookmark" color="secondary"></v-btn>
|
||||
<v-btn icon="mdi-cog" color="default"></v-btn>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-4 mt-4">
|
||||
<v-btn icon="mdi-heart" variant="outlined" color="error"></v-btn>
|
||||
<v-btn icon="mdi-star" variant="outlined" color="warning"></v-btn>
|
||||
<v-btn icon="mdi-thumb-up" variant="outlined" color="primary"></v-btn>
|
||||
<v-btn icon="mdi-share-variant" variant="outlined" color="info"></v-btn>
|
||||
<v-btn icon="mdi-bookmark" variant="outlined" color="secondary"></v-btn>
|
||||
<v-btn icon="mdi-cog" variant="outlined" color="default"></v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Fab Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Floating Action Buttons (FAB)</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-btn icon="mdi-plus" color="primary" size="small"></v-btn>
|
||||
<v-btn icon="mdi-plus" color="primary"></v-btn>
|
||||
<v-btn icon="mdi-plus" color="primary" size="large"></v-btn>
|
||||
<v-btn icon="mdi-plus" color="primary" size="x-large"></v-btn>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-4 align-center mt-4">
|
||||
<v-btn color="primary" size="small">
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
<v-btn color="secondary">
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
<v-btn color="success" size="large">
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Block Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Block Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-btn block color="primary">Block Button</v-btn>
|
||||
<v-btn block variant="outlined" color="secondary">Outlined Block</v-btn>
|
||||
<v-btn block variant="tonal" color="success">Tonal Block</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Loading State -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Loading State</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn :loading="loading1" color="primary" @click="simulateLoading(1)">
|
||||
Click to Load
|
||||
</v-btn>
|
||||
<v-btn :loading="loading2" color="secondary" @click="simulateLoading(2)">
|
||||
<v-icon start>mdi-cloud-upload</v-icon>
|
||||
Upload
|
||||
</v-btn>
|
||||
<v-btn loading color="success">Always Loading</v-btn>
|
||||
<v-btn loading variant="outlined" color="info">Loading Outlined</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Disabled State -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Disabled State</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn disabled>Default</v-btn>
|
||||
<v-btn disabled color="primary">Primary</v-btn>
|
||||
<v-btn disabled variant="outlined" color="secondary">Outlined</v-btn>
|
||||
<v-btn disabled variant="text" color="success">Text</v-btn>
|
||||
<v-btn disabled icon="mdi-heart" color="error"></v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Elevated & Flat -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Elevation</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn elevation="0" color="primary">Elevation 0</v-btn>
|
||||
<v-btn elevation="2" color="primary">Elevation 2</v-btn>
|
||||
<v-btn elevation="4" color="primary">Elevation 4</v-btn>
|
||||
<v-btn elevation="8" color="primary">Elevation 8</v-btn>
|
||||
<v-btn elevation="12" color="primary">Elevation 12</v-btn>
|
||||
<v-btn elevation="24" color="primary">Elevation 24</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Button Groups -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Button Groups</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-btn-group>
|
||||
<v-btn>Left</v-btn>
|
||||
<v-btn>Center</v-btn>
|
||||
<v-btn>Right</v-btn>
|
||||
</v-btn-group>
|
||||
|
||||
<v-btn-group color="primary">
|
||||
<v-btn>One</v-btn>
|
||||
<v-btn>Two</v-btn>
|
||||
<v-btn>Three</v-btn>
|
||||
<v-btn>Four</v-btn>
|
||||
</v-btn-group>
|
||||
|
||||
<v-btn-group variant="outlined" divided>
|
||||
<v-btn icon="mdi-format-align-left"></v-btn>
|
||||
<v-btn icon="mdi-format-align-center"></v-btn>
|
||||
<v-btn icon="mdi-format-align-right"></v-btn>
|
||||
<v-btn icon="mdi-format-align-justify"></v-btn>
|
||||
</v-btn-group>
|
||||
|
||||
<v-btn-group variant="outlined" divided color="primary">
|
||||
<v-btn prepend-icon="mdi-format-bold">Bold</v-btn>
|
||||
<v-btn prepend-icon="mdi-format-italic">Italic</v-btn>
|
||||
<v-btn prepend-icon="mdi-format-underline">Underline</v-btn>
|
||||
</v-btn-group>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Toggle Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Toggle Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<p class="mb-2">Selected: {{ toggle }}</p>
|
||||
<v-btn-toggle v-model="toggle" color="primary">
|
||||
<v-btn value="left">
|
||||
<v-icon>mdi-format-align-left</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="center">
|
||||
<v-icon>mdi-format-align-center</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="right">
|
||||
<v-icon>mdi-format-align-right</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="justify">
|
||||
<v-icon>mdi-format-align-justify</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2">Multiple Selection: {{ multiToggle.join(', ') || 'None' }}</p>
|
||||
<v-btn-toggle v-model="multiToggle" multiple color="primary">
|
||||
<v-btn value="bold">
|
||||
<v-icon>mdi-format-bold</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="italic">
|
||||
<v-icon>mdi-format-italic</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="underline">
|
||||
<v-icon>mdi-format-underline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="color">
|
||||
<v-icon>mdi-format-color-fill</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2">Mandatory: {{ mandatoryToggle }}</p>
|
||||
<v-btn-toggle v-model="mandatoryToggle" mandatory color="success">
|
||||
<v-btn value="web">
|
||||
<v-icon>mdi-web</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="android">
|
||||
<v-icon>mdi-android</v-icon>
|
||||
</v-btn>
|
||||
<v-btn value="apple">
|
||||
<v-icon>mdi-apple</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Router Link Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Router Link Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" to="/tables">Go to Tables</v-btn>
|
||||
<v-btn variant="outlined" color="secondary" to="/typography">Typography</v-btn>
|
||||
<v-btn variant="tonal" color="info" to="/cards">View Cards</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- External Link Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>External Link Buttons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" href="https://vuetifyjs.com" target="_blank" append-icon="mdi-open-in-new">
|
||||
Vuetify Docs
|
||||
</v-btn>
|
||||
<v-btn variant="outlined" color="secondary" href="https://github.com" target="_blank" prepend-icon="mdi-github">
|
||||
GitHub
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const loading1 = ref(false)
|
||||
const loading2 = ref(false)
|
||||
const toggle = ref('center')
|
||||
const multiToggle = ref<string[]>([])
|
||||
const mandatoryToggle = ref('web')
|
||||
|
||||
function simulateLoading(button: number) {
|
||||
if (button === 1) {
|
||||
loading1.value = true
|
||||
setTimeout(() => loading1.value = false, 2000)
|
||||
} else {
|
||||
loading2.value = true
|
||||
setTimeout(() => loading2.value = false, 2000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
27
src/views/CardsPage.vue
Normal file
27
src/views/CardsPage.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import CardBasic from '@/components/cards/CardBasic.vue'
|
||||
import CardNavigation from '@/components/cards/CardNavigation.vue'
|
||||
import CardSolid from '@/components/cards/CardSolid.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-2xl mb-6">
|
||||
Basic Cards
|
||||
</p>
|
||||
|
||||
<CardBasic />
|
||||
|
||||
<p class="text-2xl mb-6 mt-14">
|
||||
Navigation Cards
|
||||
</p>
|
||||
|
||||
<CardNavigation />
|
||||
|
||||
<p class="text-2xl mt-14 mb-6 ">
|
||||
Solid Cards
|
||||
</p>
|
||||
|
||||
<CardSolid />
|
||||
</div>
|
||||
</template>
|
||||
492
src/views/ChipsPage.vue
Normal file
492
src/views/ChipsPage.vue
Normal file
@@ -0,0 +1,492 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Chips</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-chip>Default</v-chip>
|
||||
<v-chip color="primary">Primary</v-chip>
|
||||
<v-chip color="secondary">Secondary</v-chip>
|
||||
<v-chip color="success">Success</v-chip>
|
||||
<v-chip color="info">Info</v-chip>
|
||||
<v-chip color="warning">Warning</v-chip>
|
||||
<v-chip color="error">Error</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Chip Variants -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Chip Variants</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Elevated (Default):</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip variant="elevated" color="primary">Elevated</v-chip>
|
||||
<v-chip variant="elevated" color="secondary">Elevated</v-chip>
|
||||
<v-chip variant="elevated" color="success">Elevated</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Flat:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip variant="flat" color="primary">Flat</v-chip>
|
||||
<v-chip variant="flat" color="secondary">Flat</v-chip>
|
||||
<v-chip variant="flat" color="success">Flat</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Tonal:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip variant="tonal" color="primary">Tonal</v-chip>
|
||||
<v-chip variant="tonal" color="secondary">Tonal</v-chip>
|
||||
<v-chip variant="tonal" color="success">Tonal</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Outlined:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip variant="outlined" color="primary">Outlined</v-chip>
|
||||
<v-chip variant="outlined" color="secondary">Outlined</v-chip>
|
||||
<v-chip variant="outlined" color="success">Outlined</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Plain:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip variant="plain" color="primary">Plain</v-chip>
|
||||
<v-chip variant="plain" color="secondary">Plain</v-chip>
|
||||
<v-chip variant="plain" color="success">Plain</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Chip Sizes -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Chip Sizes</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-chip size="x-small" color="primary">X-Small</v-chip>
|
||||
<v-chip size="small" color="primary">Small</v-chip>
|
||||
<v-chip size="default" color="primary">Default</v-chip>
|
||||
<v-chip size="large" color="primary">Large</v-chip>
|
||||
<v-chip size="x-large" color="primary">X-Large</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Closable Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Closable Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip
|
||||
v-for="(chip, index) in closableChips"
|
||||
:key="index"
|
||||
closable
|
||||
@click:close="removeChip(index)"
|
||||
:color="chip.color"
|
||||
>
|
||||
{{ chip.text }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<v-btn
|
||||
v-if="closableChips.length === 0"
|
||||
@click="resetClosableChips"
|
||||
color="primary"
|
||||
class="mt-4"
|
||||
>
|
||||
Reset Chips
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Chips with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Chips with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Prepend Icon:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip prepend-icon="mdi-account" color="primary">User</v-chip>
|
||||
<v-chip prepend-icon="mdi-email" color="info">Email</v-chip>
|
||||
<v-chip prepend-icon="mdi-phone" color="success">Phone</v-chip>
|
||||
<v-chip prepend-icon="mdi-map-marker" color="error">Location</v-chip>
|
||||
<v-chip prepend-icon="mdi-calendar" color="warning">Calendar</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Append Icon:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip append-icon="mdi-check" color="success">Verified</v-chip>
|
||||
<v-chip append-icon="mdi-star" color="warning">Featured</v-chip>
|
||||
<v-chip append-icon="mdi-lock" color="error">Private</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Both Icons:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip prepend-icon="mdi-folder" append-icon="mdi-chevron-right" color="primary">
|
||||
Documents
|
||||
</v-chip>
|
||||
<v-chip prepend-icon="mdi-image" append-icon="mdi-chevron-right" color="info">
|
||||
Photos
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Chips with Avatars -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Chips with Avatars</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip>
|
||||
<v-avatar start color="primary">JD</v-avatar>
|
||||
John Doe
|
||||
</v-chip>
|
||||
<v-chip>
|
||||
<v-avatar start color="secondary">AS</v-avatar>
|
||||
Alice Smith
|
||||
</v-chip>
|
||||
<v-chip>
|
||||
<v-avatar start color="success">BJ</v-avatar>
|
||||
Bob Johnson
|
||||
</v-chip>
|
||||
<v-chip closable>
|
||||
<v-avatar start color="info">MK</v-avatar>
|
||||
Maria Garcia
|
||||
</v-chip>
|
||||
<v-chip closable>
|
||||
<v-avatar start color="warning">TC</v-avatar>
|
||||
Tom Chen
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Filter Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Filter Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="mb-4">
|
||||
<p class="text-subtitle-2 mb-2">Selected Filters: {{ selectedFilters.join(', ') || 'None' }}</p>
|
||||
</div>
|
||||
<v-chip-group v-model="selectedFilters" column multiple>
|
||||
<v-chip filter variant="outlined" value="javascript">JavaScript</v-chip>
|
||||
<v-chip filter variant="outlined" value="typescript">TypeScript</v-chip>
|
||||
<v-chip filter variant="outlined" value="vue">Vue.js</v-chip>
|
||||
<v-chip filter variant="outlined" value="react">React</v-chip>
|
||||
<v-chip filter variant="outlined" value="angular">Angular</v-chip>
|
||||
<v-chip filter variant="outlined" value="node">Node.js</v-chip>
|
||||
<v-chip filter variant="outlined" value="python">Python</v-chip>
|
||||
<v-chip filter variant="outlined" value="php">PHP</v-chip>
|
||||
</v-chip-group>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Single Selection Chip Group -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Single Selection Chip Group</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="mb-4">
|
||||
<p class="text-subtitle-2 mb-2">Selected Size: {{ selectedSize || 'None' }}</p>
|
||||
</div>
|
||||
<v-chip-group v-model="selectedSize" mandatory color="primary">
|
||||
<v-chip value="xs">Extra Small</v-chip>
|
||||
<v-chip value="s">Small</v-chip>
|
||||
<v-chip value="m">Medium</v-chip>
|
||||
<v-chip value="l">Large</v-chip>
|
||||
<v-chip value="xl">Extra Large</v-chip>
|
||||
</v-chip-group>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Chip Groups with Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Chip Groups</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="mb-4">
|
||||
<p class="text-subtitle-2 mb-2">Selected Priority: {{ selectedPriority || 'None' }}</p>
|
||||
</div>
|
||||
<v-chip-group v-model="selectedPriority" mandatory>
|
||||
<v-chip value="low" color="success">Low</v-chip>
|
||||
<v-chip value="medium" color="warning">Medium</v-chip>
|
||||
<v-chip value="high" color="error">High</v-chip>
|
||||
<v-chip value="urgent" color="purple">Urgent</v-chip>
|
||||
</v-chip-group>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Action Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Action Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip @click="handleAction('download')" prepend-icon="mdi-download" color="primary">
|
||||
Download
|
||||
</v-chip>
|
||||
<v-chip @click="handleAction('share')" prepend-icon="mdi-share" color="info">
|
||||
Share
|
||||
</v-chip>
|
||||
<v-chip @click="handleAction('favorite')" prepend-icon="mdi-heart" color="error">
|
||||
Favorite
|
||||
</v-chip>
|
||||
<v-chip @click="handleAction('bookmark')" prepend-icon="mdi-bookmark" color="warning">
|
||||
Bookmark
|
||||
</v-chip>
|
||||
<v-chip @click="handleAction('delete')" prepend-icon="mdi-delete" color="error" variant="outlined">
|
||||
Delete
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Disabled Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Disabled Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip disabled>Disabled</v-chip>
|
||||
<v-chip disabled color="primary">Disabled Primary</v-chip>
|
||||
<v-chip disabled closable color="secondary">Disabled Closable</v-chip>
|
||||
<v-chip disabled prepend-icon="mdi-account" color="success">Disabled with Icon</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Link Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Link Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip link to="/tables" color="primary" prepend-icon="mdi-table">
|
||||
Go to Tables
|
||||
</v-chip>
|
||||
<v-chip link to="/typography" color="secondary" prepend-icon="mdi-format-text">
|
||||
Typography
|
||||
</v-chip>
|
||||
<v-chip
|
||||
link
|
||||
href="https://vuetifyjs.com"
|
||||
target="_blank"
|
||||
color="info"
|
||||
append-icon="mdi-open-in-new"
|
||||
>
|
||||
Vuetify Docs
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Pill Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Pill Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip pill color="primary">Pill Shape</v-chip>
|
||||
<v-chip pill color="secondary">Rounded Ends</v-chip>
|
||||
<v-chip pill color="success" prepend-icon="mdi-check">Active</v-chip>
|
||||
<v-chip pill color="error" closable>Removable</v-chip>
|
||||
<v-chip pill color="warning">
|
||||
<v-avatar start>AB</v-avatar>
|
||||
With Avatar
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Label Chips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Label Chips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip label color="primary">Label</v-chip>
|
||||
<v-chip label color="secondary">Square Corners</v-chip>
|
||||
<v-chip label color="success" prepend-icon="mdi-tag">Tag</v-chip>
|
||||
<v-chip label color="info" closable>Category</v-chip>
|
||||
<v-chip label color="warning" variant="outlined">Outlined Label</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<!-- Tags -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Blog Post Tags:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip size="small" variant="tonal" color="primary">Vue.js</v-chip>
|
||||
<v-chip size="small" variant="tonal" color="primary">JavaScript</v-chip>
|
||||
<v-chip size="small" variant="tonal" color="primary">Frontend</v-chip>
|
||||
<v-chip size="small" variant="tonal" color="primary">Tutorial</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Order Status:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip color="warning" prepend-icon="mdi-clock-outline">Pending</v-chip>
|
||||
<v-chip color="info" prepend-icon="mdi-truck-delivery">Shipped</v-chip>
|
||||
<v-chip color="success" prepend-icon="mdi-check-circle">Delivered</v-chip>
|
||||
<v-chip color="error" prepend-icon="mdi-close-circle">Cancelled</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Members -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Team Members:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip closable @click:close="handleRemoveMember('john')">
|
||||
<v-avatar start color="primary">JD</v-avatar>
|
||||
John Doe
|
||||
</v-chip>
|
||||
<v-chip closable @click:close="handleRemoveMember('alice')">
|
||||
<v-avatar start color="secondary">AS</v-avatar>
|
||||
Alice Smith
|
||||
</v-chip>
|
||||
<v-chip closable @click:close="handleRemoveMember('bob')">
|
||||
<v-avatar start color="success">BJ</v-avatar>
|
||||
Bob Johnson
|
||||
</v-chip>
|
||||
<v-chip color="primary" prepend-icon="mdi-plus" @click="handleAddMember">
|
||||
Add Member
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skills -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-2">Skills (Multi-select):</p>
|
||||
<v-chip-group v-model="selectedSkills" column multiple>
|
||||
<v-chip filter variant="outlined" color="primary" value="html">HTML</v-chip>
|
||||
<v-chip filter variant="outlined" color="primary" value="css">CSS</v-chip>
|
||||
<v-chip filter variant="outlined" color="primary" value="js">JavaScript</v-chip>
|
||||
<v-chip filter variant="outlined" color="primary" value="ts">TypeScript</v-chip>
|
||||
<v-chip filter variant="outlined" color="primary" value="vue">Vue.js</v-chip>
|
||||
<v-chip filter variant="outlined" color="primary" value="react">React</v-chip>
|
||||
<v-chip filter variant="outlined" color="primary" value="node">Node.js</v-chip>
|
||||
<v-chip filter variant="outlined" color="primary" value="sql">SQL</v-chip>
|
||||
</v-chip-group>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Closable chips
|
||||
const closableChips = ref([
|
||||
{ text: 'Apple', color: 'error' },
|
||||
{ text: 'Banana', color: 'warning' },
|
||||
{ text: 'Orange', color: 'primary' },
|
||||
{ text: 'Grape', color: 'purple' },
|
||||
{ text: 'Kiwi', color: 'success' }
|
||||
])
|
||||
|
||||
const initialChips = [
|
||||
{ text: 'Apple', color: 'error' },
|
||||
{ text: 'Banana', color: 'warning' },
|
||||
{ text: 'Orange', color: 'primary' },
|
||||
{ text: 'Grape', color: 'purple' },
|
||||
{ text: 'Kiwi', color: 'success' }
|
||||
]
|
||||
|
||||
// Filter chips
|
||||
const selectedFilters = ref<string[]>([])
|
||||
|
||||
// Single selection
|
||||
const selectedSize = ref('m')
|
||||
const selectedPriority = ref('medium')
|
||||
|
||||
// Skills selection
|
||||
const selectedSkills = ref<string[]>([])
|
||||
|
||||
// Functions
|
||||
function removeChip(index: number) {
|
||||
closableChips.value.splice(index, 1)
|
||||
}
|
||||
|
||||
function resetClosableChips() {
|
||||
closableChips.value = [...initialChips]
|
||||
}
|
||||
|
||||
function handleAction(action: string) {
|
||||
console.log(`Action triggered: ${action}`)
|
||||
}
|
||||
|
||||
function handleRemoveMember(member: string) {
|
||||
console.log(`Removing member: ${member}`)
|
||||
}
|
||||
|
||||
function handleAddMember() {
|
||||
console.log('Adding new member')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
652
src/views/ColorPage.vue
Normal file
652
src/views/ColorPage.vue
Normal file
@@ -0,0 +1,652 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Theme & Colors</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Vuetify Standard Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Vuetify Standard Colors</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row class="gap-4">
|
||||
<v-col cols="12" md="3" v-for="color in standardColors" :key="color.name">
|
||||
<v-sheet
|
||||
:color="color.value"
|
||||
rounded="lg"
|
||||
class="pa-4 d-flex flex-column align-center justify-center"
|
||||
height="120"
|
||||
dark
|
||||
>
|
||||
<div class="text-h6 mb-2">{{ color.label }}</div>
|
||||
<v-chip size="small" variant="elevated" color="white" class="text-black">
|
||||
{{ color.value }}
|
||||
</v-chip>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Material Design Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Material Design Color Palette</v-card-title>
|
||||
<v-card-subtitle>All Material Design color shades</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<div v-for="colorFamily in materialColors" :key="colorFamily.name" class="mb-6">
|
||||
<h3 class="text-h6 mb-3">{{ colorFamily.label }}</h3>
|
||||
<v-row>
|
||||
<v-col cols="6" sm="4" md="2" v-for="shade in colorFamily.shades" :key="shade.name">
|
||||
<v-sheet
|
||||
:color="shade.value"
|
||||
rounded="lg"
|
||||
class="pa-3 d-flex flex-column align-center justify-center"
|
||||
height="100"
|
||||
>
|
||||
<div class="text-caption font-weight-bold mb-1" :class="shade.dark ? 'text-white' : 'text-black'">
|
||||
{{ shade.label }}
|
||||
</div>
|
||||
<div class="text-caption" :class="shade.dark ? 'text-white' : 'text-black'">
|
||||
{{ shade.value }}
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Text Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Text Colors</v-card-title>
|
||||
<v-card-subtitle>Using text color utility classes</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-row class="gap-4">
|
||||
<v-col cols="12" md="6">
|
||||
<v-sheet color="grey-lighten-4" rounded="lg" class="pa-6">
|
||||
<div class="text-primary mb-2">text-primary - Primary text color</div>
|
||||
<div class="text-secondary mb-2">text-secondary - Secondary text color</div>
|
||||
<div class="text-success mb-2">text-success - Success text color</div>
|
||||
<div class="text-info mb-2">text-info - Info text color</div>
|
||||
<div class="text-warning mb-2">text-warning - Warning text color</div>
|
||||
<div class="text-error mb-2">text-error - Error text color</div>
|
||||
<div class="text-disabled mb-2">text-disabled - Disabled text color</div>
|
||||
<div class="text-high-emphasis mb-2">text-high-emphasis - High emphasis</div>
|
||||
<div class="text-medium-emphasis mb-2">text-medium-emphasis - Medium emphasis</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-sheet color="grey-darken-4" rounded="lg" class="pa-6">
|
||||
<div class="text-white mb-2">text-white - White text</div>
|
||||
<div class="text-grey-lighten-3 mb-2">text-grey-lighten-3 - Light grey</div>
|
||||
<div class="text-grey-lighten-1 mb-2">text-grey-lighten-1 - Grey</div>
|
||||
<div class="text-blue-lighten-2 mb-2">text-blue-lighten-2 - Light blue</div>
|
||||
<div class="text-green-lighten-2 mb-2">text-green-lighten-2 - Light green</div>
|
||||
<div class="text-red-lighten-2 mb-2">text-red-lighten-2 - Light red</div>
|
||||
<div class="text-orange-lighten-2 mb-2">text-orange-lighten-2 - Light orange</div>
|
||||
<div class="text-purple-lighten-2 mb-2">text-purple-lighten-2 - Light purple</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Background Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Background Colors</v-card-title>
|
||||
<v-card-subtitle>Using bg-* utility classes</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-row class="gap-2">
|
||||
<v-col cols="12" sm="6" md="4" lg="3" v-for="bgColor in backgroundColors" :key="bgColor.class">
|
||||
<v-sheet
|
||||
:class="`bg-${bgColor.class}`"
|
||||
rounded="lg"
|
||||
class="pa-4 d-flex align-center justify-center"
|
||||
height="80"
|
||||
>
|
||||
<span :class="bgColor.textClass">bg-{{ bgColor.class }}</span>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Gradient Backgrounds -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Custom Gradient Backgrounds</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row class="gap-4">
|
||||
<v-col cols="12" md="4" v-for="gradient in gradients" :key="gradient.name">
|
||||
<v-sheet
|
||||
rounded="lg"
|
||||
class="pa-6 d-flex align-center justify-center"
|
||||
height="120"
|
||||
:style="{ background: gradient.value }"
|
||||
>
|
||||
<div class="text-white text-h6 font-weight-bold">{{ gradient.label }}</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Border Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Border Colors</v-card-title>
|
||||
<v-card-subtitle>Using border and border-color utilities</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-row class="gap-4">
|
||||
<v-col cols="12" sm="6" md="4" v-for="borderColor in borderColors" :key="borderColor.class">
|
||||
<v-sheet
|
||||
rounded="lg"
|
||||
class="pa-4 d-flex align-center justify-center border"
|
||||
:class="`border-${borderColor.class}`"
|
||||
height="80"
|
||||
>
|
||||
border-{{ borderColor.class }}
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Opacity Variations -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Opacity Variations</v-card-title>
|
||||
<v-card-subtitle>Text and background opacity utilities</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<h4 class="mb-3">Text Opacity</h4>
|
||||
<v-sheet color="grey-lighten-4" rounded="lg" class="pa-4">
|
||||
<div class="text-primary mb-2" style="opacity: 1">Opacity 100% (default)</div>
|
||||
<div class="text-primary mb-2" style="opacity: 0.87">Opacity 87% (high emphasis)</div>
|
||||
<div class="text-primary mb-2" style="opacity: 0.60">Opacity 60% (medium emphasis)</div>
|
||||
<div class="text-primary mb-2" style="opacity: 0.38">Opacity 38% (disabled)</div>
|
||||
<div class="text-primary mb-2" style="opacity: 0.12">Opacity 12% (divider)</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<h4 class="mb-3">Background Opacity</h4>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<v-sheet color="primary" rounded="lg" class="pa-4" style="opacity: 1">
|
||||
<span class="text-white">Opacity 100%</span>
|
||||
</v-sheet>
|
||||
<v-sheet color="primary" rounded="lg" class="pa-4" style="opacity: 0.75">
|
||||
<span class="text-white">Opacity 75%</span>
|
||||
</v-sheet>
|
||||
<v-sheet color="primary" rounded="lg" class="pa-4" style="opacity: 0.50">
|
||||
<span class="text-white">Opacity 50%</span>
|
||||
</v-sheet>
|
||||
<v-sheet color="primary" rounded="lg" class="pa-4" style="opacity: 0.25">
|
||||
<span class="text-white">Opacity 25%</span>
|
||||
</v-sheet>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Theme Variants -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Component Theme Variants</v-card-title>
|
||||
<v-card-subtitle>Different visual styles for components</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-row class="gap-4">
|
||||
<v-col cols="12">
|
||||
<h4 class="mb-3">Buttons with Color Variants</h4>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-btn color="primary">Primary</v-btn>
|
||||
<v-btn color="secondary">Secondary</v-btn>
|
||||
<v-btn color="success">Success</v-btn>
|
||||
<v-btn color="info">Info</v-btn>
|
||||
<v-btn color="warning">Warning</v-btn>
|
||||
<v-btn color="error">Error</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<h4 class="mb-3">Chips with Color Variants</h4>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-chip color="primary">Primary</v-chip>
|
||||
<v-chip color="secondary">Secondary</v-chip>
|
||||
<v-chip color="success">Success</v-chip>
|
||||
<v-chip color="info">Info</v-chip>
|
||||
<v-chip color="warning">Warning</v-chip>
|
||||
<v-chip color="error">Error</v-chip>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<h4 class="mb-3">Alerts with Color Variants</h4>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<v-alert type="success" variant="tonal">Success alert with tonal variant</v-alert>
|
||||
<v-alert type="info" variant="tonal">Info alert with tonal variant</v-alert>
|
||||
<v-alert type="warning" variant="tonal">Warning alert with tonal variant</v-alert>
|
||||
<v-alert type="error" variant="tonal">Error alert with tonal variant</v-alert>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Dark vs Light Theme -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Light vs Dark Theme</v-card-title>
|
||||
<v-card-subtitle>Theme prop demonstration</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-sheet theme="light" color="surface" rounded="lg" class="pa-6 border">
|
||||
<h4 class="mb-4">Light Theme</h4>
|
||||
<v-text-field label="Input Field" variant="outlined" class="mb-3"></v-text-field>
|
||||
<v-btn color="primary" class="mb-3 mr-2">Primary</v-btn>
|
||||
<v-btn color="secondary" class="mb-3">Secondary</v-btn>
|
||||
<v-list class="mt-3">
|
||||
<v-list-item title="List Item 1" subtitle="Subtitle"></v-list-item>
|
||||
<v-list-item title="List Item 2" subtitle="Subtitle"></v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-sheet theme="dark" color="surface" rounded="lg" class="pa-6 border">
|
||||
<h4 class="mb-4">Dark Theme</h4>
|
||||
<v-text-field label="Input Field" variant="outlined" class="mb-3"></v-text-field>
|
||||
<v-btn color="primary" class="mb-3 mr-2">Primary</v-btn>
|
||||
<v-btn color="secondary" class="mb-3">Secondary</v-btn>
|
||||
<v-list class="mt-3">
|
||||
<v-list-item title="List Item 1" subtitle="Subtitle"></v-list-item>
|
||||
<v-list-item title="List Item 2" subtitle="Subtitle"></v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Color on Hover/Focus -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Interactive Color States</v-card-title>
|
||||
<v-card-subtitle>Hover and focus color changes</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-row class="gap-4">
|
||||
<v-col cols="12" md="4" v-for="color in interactiveColors" :key="color">
|
||||
<v-card
|
||||
:color="color"
|
||||
class="hover-card transition-swing"
|
||||
height="100"
|
||||
>
|
||||
<v-card-text class="d-flex align-center justify-center h-100 text-white">
|
||||
<span class="text-h6">Hover {{ color }}</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Example: Dashboard Card -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Example: Colored Dashboard Cards</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="3" v-for="stat in dashboardStats" :key="stat.title">
|
||||
<v-card :color="stat.color" dark>
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="text-caption">{{ stat.title }}</div>
|
||||
<div class="text-h4 font-weight-bold mt-2">{{ stat.value }}</div>
|
||||
<div class="text-caption mt-1">
|
||||
<v-icon size="small" :icon="stat.trend === 'up' ? 'mdi-trending-up' : 'mdi-trending-down'"></v-icon>
|
||||
{{ stat.change }}
|
||||
</div>
|
||||
</div>
|
||||
<v-icon :icon="stat.icon" size="48" style="opacity: 0.3"></v-icon>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Example: Status Indicators -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Example: Status Indicators</v-card-title>
|
||||
<v-card-text>
|
||||
<v-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task Name</th>
|
||||
<th>Assignee</th>
|
||||
<th>Priority</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="task in tasks" :key="task.id">
|
||||
<td>{{ task.name }}</td>
|
||||
<td>{{ task.assignee }}</td>
|
||||
<td>
|
||||
<v-chip :color="task.priorityColor" size="small" variant="flat">
|
||||
{{ task.priority }}
|
||||
</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip :color="task.statusColor" size="small" variant="tonal">
|
||||
{{ task.status }}
|
||||
</v-chip>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const standardColors = [
|
||||
{ name: 'primary', label: 'Primary', value: 'primary' },
|
||||
{ name: 'secondary', label: 'Secondary', value: 'secondary' },
|
||||
{ name: 'success', label: 'Success', value: 'success' },
|
||||
{ name: 'info', label: 'Info', value: 'info' },
|
||||
{ name: 'warning', label: 'Warning', value: 'warning' },
|
||||
{ name: 'error', label: 'Error', value: 'error' },
|
||||
{ name: 'surface', label: 'Surface', value: 'surface' },
|
||||
{ name: 'background', label: 'Background', value: 'background' }
|
||||
]
|
||||
|
||||
const materialColors = [
|
||||
{
|
||||
name: 'red',
|
||||
label: 'Red',
|
||||
shades: [
|
||||
{ label: 'Lighten-5', value: 'red-lighten-5', dark: false },
|
||||
{ label: 'Lighten-4', value: 'red-lighten-4', dark: false },
|
||||
{ label: 'Lighten-3', value: 'red-lighten-3', dark: false },
|
||||
{ label: 'Lighten-2', value: 'red-lighten-2', dark: false },
|
||||
{ label: 'Lighten-1', value: 'red-lighten-1', dark: false },
|
||||
{ label: 'Base', value: 'red', dark: true },
|
||||
{ label: 'Darken-1', value: 'red-darken-1', dark: true },
|
||||
{ label: 'Darken-2', value: 'red-darken-2', dark: true },
|
||||
{ label: 'Darken-3', value: 'red-darken-3', dark: true },
|
||||
{ label: 'Darken-4', value: 'red-darken-4', dark: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'blue',
|
||||
label: 'Blue',
|
||||
shades: [
|
||||
{ label: 'Lighten-5', value: 'blue-lighten-5', dark: false },
|
||||
{ label: 'Lighten-4', value: 'blue-lighten-4', dark: false },
|
||||
{ label: 'Lighten-3', value: 'blue-lighten-3', dark: false },
|
||||
{ label: 'Lighten-2', value: 'blue-lighten-2', dark: false },
|
||||
{ label: 'Lighten-1', value: 'blue-lighten-1', dark: false },
|
||||
{ label: 'Base', value: 'blue', dark: true },
|
||||
{ label: 'Darken-1', value: 'blue-darken-1', dark: true },
|
||||
{ label: 'Darken-2', value: 'blue-darken-2', dark: true },
|
||||
{ label: 'Darken-3', value: 'blue-darken-3', dark: true },
|
||||
{ label: 'Darken-4', value: 'blue-darken-4', dark: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
label: 'Green',
|
||||
shades: [
|
||||
{ label: 'Lighten-5', value: 'green-lighten-5', dark: false },
|
||||
{ label: 'Lighten-4', value: 'green-lighten-4', dark: false },
|
||||
{ label: 'Lighten-3', value: 'green-lighten-3', dark: false },
|
||||
{ label: 'Lighten-2', value: 'green-lighten-2', dark: false },
|
||||
{ label: 'Lighten-1', value: 'green-lighten-1', dark: false },
|
||||
{ label: 'Base', value: 'green', dark: true },
|
||||
{ label: 'Darken-1', value: 'green-darken-1', dark: true },
|
||||
{ label: 'Darken-2', value: 'green-darken-2', dark: true },
|
||||
{ label: 'Darken-3', value: 'green-darken-3', dark: true },
|
||||
{ label: 'Darken-4', value: 'green-darken-4', dark: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'orange',
|
||||
label: 'Orange',
|
||||
shades: [
|
||||
{ label: 'Lighten-5', value: 'orange-lighten-5', dark: false },
|
||||
{ label: 'Lighten-4', value: 'orange-lighten-4', dark: false },
|
||||
{ label: 'Lighten-3', value: 'orange-lighten-3', dark: false },
|
||||
{ label: 'Lighten-2', value: 'orange-lighten-2', dark: false },
|
||||
{ label: 'Lighten-1', value: 'orange-lighten-1', dark: false },
|
||||
{ label: 'Base', value: 'orange', dark: false },
|
||||
{ label: 'Darken-1', value: 'orange-darken-1', dark: false },
|
||||
{ label: 'Darken-2', value: 'orange-darken-2', dark: true },
|
||||
{ label: 'Darken-3', value: 'orange-darken-3', dark: true },
|
||||
{ label: 'Darken-4', value: 'orange-darken-4', dark: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
label: 'Purple',
|
||||
shades: [
|
||||
{ label: 'Lighten-5', value: 'purple-lighten-5', dark: false },
|
||||
{ label: 'Lighten-4', value: 'purple-lighten-4', dark: false },
|
||||
{ label: 'Lighten-3', value: 'purple-lighten-3', dark: false },
|
||||
{ label: 'Lighten-2', value: 'purple-lighten-2', dark: false },
|
||||
{ label: 'Lighten-1', value: 'purple-lighten-1', dark: false },
|
||||
{ label: 'Base', value: 'purple', dark: true },
|
||||
{ label: 'Darken-1', value: 'purple-darken-1', dark: true },
|
||||
{ label: 'Darken-2', value: 'purple-darken-2', dark: true },
|
||||
{ label: 'Darken-3', value: 'purple-darken-3', dark: true },
|
||||
{ label: 'Darken-4', value: 'purple-darken-4', dark: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'grey',
|
||||
label: 'Grey',
|
||||
shades: [
|
||||
{ label: 'Lighten-5', value: 'grey-lighten-5', dark: false },
|
||||
{ label: 'Lighten-4', value: 'grey-lighten-4', dark: false },
|
||||
{ label: 'Lighten-3', value: 'grey-lighten-3', dark: false },
|
||||
{ label: 'Lighten-2', value: 'grey-lighten-2', dark: false },
|
||||
{ label: 'Lighten-1', value: 'grey-lighten-1', dark: false },
|
||||
{ label: 'Base', value: 'grey', dark: false },
|
||||
{ label: 'Darken-1', value: 'grey-darken-1', dark: false },
|
||||
{ label: 'Darken-2', value: 'grey-darken-2', dark: true },
|
||||
{ label: 'Darken-3', value: 'grey-darken-3', dark: true },
|
||||
{ label: 'Darken-4', value: 'grey-darken-4', dark: true }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const backgroundColors = [
|
||||
{ class: 'primary', textClass: 'text-white' },
|
||||
{ class: 'secondary', textClass: 'text-white' },
|
||||
{ class: 'success', textClass: 'text-white' },
|
||||
{ class: 'info', textClass: 'text-white' },
|
||||
{ class: 'warning', textClass: 'text-white' },
|
||||
{ class: 'error', textClass: 'text-white' },
|
||||
{ class: 'red-lighten-3', textClass: 'text-black' },
|
||||
{ class: 'blue-lighten-3', textClass: 'text-black' },
|
||||
{ class: 'green-lighten-3', textClass: 'text-black' },
|
||||
{ class: 'orange-lighten-3', textClass: 'text-black' },
|
||||
{ class: 'purple-lighten-3', textClass: 'text-black' },
|
||||
{ class: 'grey-lighten-3', textClass: 'text-black' }
|
||||
]
|
||||
|
||||
const gradients = [
|
||||
{
|
||||
name: 'sunset',
|
||||
label: 'Sunset',
|
||||
value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
||||
},
|
||||
{
|
||||
name: 'ocean',
|
||||
label: 'Ocean',
|
||||
value: 'linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%)'
|
||||
},
|
||||
{
|
||||
name: 'forest',
|
||||
label: 'Forest',
|
||||
value: 'linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%)'
|
||||
},
|
||||
{
|
||||
name: 'fire',
|
||||
label: 'Fire',
|
||||
value: 'linear-gradient(135deg, #f12711 0%, #f5af19 100%)'
|
||||
},
|
||||
{
|
||||
name: 'cool',
|
||||
label: 'Cool Blue',
|
||||
value: 'linear-gradient(135deg, #2196F3 0%, #21CBF3 100%)'
|
||||
},
|
||||
{
|
||||
name: 'passion',
|
||||
label: 'Passion',
|
||||
value: 'linear-gradient(135deg, #e53935 0%, #e35d5b 100%)'
|
||||
}
|
||||
]
|
||||
|
||||
const borderColors = [
|
||||
{ class: 'primary' },
|
||||
{ class: 'secondary' },
|
||||
{ class: 'success' },
|
||||
{ class: 'info' },
|
||||
{ class: 'warning' },
|
||||
{ class: 'error' }
|
||||
]
|
||||
|
||||
const interactiveColors = ['primary', 'secondary', 'success', 'info', 'warning', 'error']
|
||||
|
||||
const dashboardStats = [
|
||||
{
|
||||
title: 'Total Users',
|
||||
value: '2,847',
|
||||
change: '+12.5%',
|
||||
trend: 'up',
|
||||
color: 'primary',
|
||||
icon: 'mdi-account-group'
|
||||
},
|
||||
{
|
||||
title: 'Revenue',
|
||||
value: '$48,291',
|
||||
change: '+8.2%',
|
||||
trend: 'up',
|
||||
color: 'success',
|
||||
icon: 'mdi-currency-usd'
|
||||
},
|
||||
{
|
||||
title: 'Orders',
|
||||
value: '1,234',
|
||||
change: '-2.4%',
|
||||
trend: 'down',
|
||||
color: 'warning',
|
||||
icon: 'mdi-cart'
|
||||
},
|
||||
{
|
||||
title: 'Bounce Rate',
|
||||
value: '34.2%',
|
||||
change: '-5.1%',
|
||||
trend: 'up',
|
||||
color: 'info',
|
||||
icon: 'mdi-chart-line'
|
||||
}
|
||||
]
|
||||
|
||||
const tasks = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Update documentation',
|
||||
assignee: 'John Doe',
|
||||
priority: 'High',
|
||||
priorityColor: 'error',
|
||||
status: 'In Progress',
|
||||
statusColor: 'primary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Fix login bug',
|
||||
assignee: 'Alice Smith',
|
||||
priority: 'Critical',
|
||||
priorityColor: 'error',
|
||||
status: 'Completed',
|
||||
statusColor: 'success'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Design new landing page',
|
||||
assignee: 'Bob Johnson',
|
||||
priority: 'Medium',
|
||||
priorityColor: 'warning',
|
||||
status: 'Review',
|
||||
statusColor: 'info'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Optimize database queries',
|
||||
assignee: 'Maria Garcia',
|
||||
priority: 'Low',
|
||||
priorityColor: 'success',
|
||||
status: 'Pending',
|
||||
statusColor: 'grey'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Add unit tests',
|
||||
assignee: 'Tom Chen',
|
||||
priority: 'Medium',
|
||||
priorityColor: 'warning',
|
||||
status: 'In Progress',
|
||||
statusColor: 'primary'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hover-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
569
src/views/DialogsPage.vue
Normal file
569
src/views/DialogsPage.vue
Normal file
@@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Dialogs</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="basicDialog" width="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Open Basic Dialog</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Dialog Title</v-card-title>
|
||||
<v-card-text>
|
||||
This is a basic dialog with some content. Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="basicDialog = false">Cancel</v-btn>
|
||||
<v-btn color="primary" @click="basicDialog = false">OK</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Confirmation Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Confirmation Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="confirmDialog" max-width="400">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="error" v-bind="props">Delete Item</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="text-h5">Confirm Deletion</v-card-title>
|
||||
<v-card-text>
|
||||
Are you sure you want to delete this item? This action cannot be undone.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="confirmDialog = false">Cancel</v-btn>
|
||||
<v-btn color="error" @click="handleDelete">Delete</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Scrollable Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Scrollable Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="scrollableDialog" max-width="600">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Terms & Conditions</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Privacy Policy</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text style="max-height: 400px; overflow-y: auto;">
|
||||
<p v-for="i in 10" :key="i" class="mb-4">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="scrollableDialog = false">Decline</v-btn>
|
||||
<v-btn color="primary" @click="scrollableDialog = false">Accept</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Form Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Form Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="formDialog" max-width="600">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Add User</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="text-h5">New User</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-form ref="form">
|
||||
<v-text-field
|
||||
v-model="formData.name"
|
||||
label="Full Name"
|
||||
prepend-icon="mdi-account"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="formData.email"
|
||||
label="Email"
|
||||
prepend-icon="mdi-email"
|
||||
type="email"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-select
|
||||
v-model="formData.role"
|
||||
:items="['Admin', 'Editor', 'Viewer']"
|
||||
label="Role"
|
||||
prepend-icon="mdi-account-key"
|
||||
required
|
||||
></v-select>
|
||||
<v-textarea
|
||||
v-model="formData.bio"
|
||||
label="Bio"
|
||||
prepend-icon="mdi-text"
|
||||
rows="3"
|
||||
></v-textarea>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="formDialog = false">Cancel</v-btn>
|
||||
<v-btn color="primary" @click="handleFormSubmit">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Fullscreen Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Fullscreen Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="fullscreenDialog" fullscreen>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Open Fullscreen</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-toolbar color="primary">
|
||||
<v-btn icon @click="fullscreenDialog = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title>Fullscreen Dialog</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="fullscreenDialog = false">Save</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<h2 class="mb-4">Full Screen Content</h2>
|
||||
<p class="mb-4">
|
||||
This dialog takes up the entire screen. It's useful for complex forms,
|
||||
detailed content, or immersive experiences.
|
||||
</p>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6" v-for="i in 6" :key="i">
|
||||
<v-card>
|
||||
<v-card-title>Section {{ i }}</v-card-title>
|
||||
<v-card-text>
|
||||
Content for section {{ i }}. You can add any content here including
|
||||
forms, tables, charts, or other components.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Persistent Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Persistent Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="persistentDialog" persistent max-width="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="warning" v-bind="props">Persistent Dialog</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="text-h5">Persistent Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
This dialog cannot be closed by clicking outside or pressing ESC.
|
||||
You must use the action buttons to close it.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="persistentDialog = false">Cancel</v-btn>
|
||||
<v-btn color="primary" @click="persistentDialog = false">Agree</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Multiple Sizes -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Dialog Sizes</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-dialog v-model="smallDialog" max-width="300">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Small (300px)</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Small Dialog</v-card-title>
|
||||
<v-card-text>This is a small dialog at 300px width.</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="smallDialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="mediumDialog" max-width="600">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Medium (600px)</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Medium Dialog</v-card-title>
|
||||
<v-card-text>This is a medium dialog at 600px width.</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="mediumDialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="largeDialog" max-width="900">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Large (900px)</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Large Dialog</v-card-title>
|
||||
<v-card-text>This is a large dialog at 900px width.</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="largeDialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Transitions -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Dialog Transitions</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-dialog v-model="fadeDialog" transition="fade-transition" max-width="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Fade</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Fade Transition</v-card-title>
|
||||
<v-card-text>This dialog uses a fade transition.</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="fadeDialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="scaleDialog" transition="scale-transition" max-width="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Scale</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Scale Transition</v-card-title>
|
||||
<v-card-text>This dialog uses a scale transition.</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="scaleDialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="slideDialog" transition="dialog-bottom-transition" max-width="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Slide Up</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Slide Transition</v-card-title>
|
||||
<v-card-text>This dialog slides up from the bottom.</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="slideDialog = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Loading Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Loading Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn color="primary" @click="showLoadingDialog">Show Loading</v-btn>
|
||||
<v-dialog v-model="loadingDialog" persistent max-width="400">
|
||||
<v-card>
|
||||
<v-card-text class="text-center py-8">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
size="64"
|
||||
class="mb-4"
|
||||
></v-progress-circular>
|
||||
<div class="text-h6">{{ loadingMessage }}</div>
|
||||
<div class="text-caption mt-2">Please wait...</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Custom Content Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Custom Content Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="customDialog" max-width="700">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Product Details</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-img
|
||||
src="https://picsum.photos/700/300"
|
||||
height="300"
|
||||
cover
|
||||
></v-img>
|
||||
<v-card-title class="text-h5">Premium Headphones</v-card-title>
|
||||
<v-card-subtitle>High-Quality Audio Experience</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-chip class="mr-2" color="success">In Stock</v-chip>
|
||||
<v-chip class="mr-2">Free Shipping</v-chip>
|
||||
<v-chip>Best Seller</v-chip>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="text-h4 mb-2">$299.99</div>
|
||||
<p>
|
||||
Experience crystal-clear sound with our premium wireless headphones.
|
||||
Features active noise cancellation, 30-hour battery life, and premium
|
||||
comfort design.
|
||||
</p>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<div class="mb-2"><strong>Features:</strong></div>
|
||||
<ul class="mb-4">
|
||||
<li>Active Noise Cancellation</li>
|
||||
<li>30-hour battery life</li>
|
||||
<li>Bluetooth 5.0</li>
|
||||
<li>Premium leather cushions</li>
|
||||
</ul>
|
||||
|
||||
<v-select
|
||||
v-model="selectedColor"
|
||||
:items="['Black', 'Silver', 'Rose Gold']"
|
||||
label="Color"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-select>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn variant="text" @click="customDialog = false">Close</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" size="large" @click="handleAddToCart">
|
||||
Add to Cart
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Bottom Sheet Dialog -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Bottom Sheet</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="bottomSheet" location="bottom" max-width="100%">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Open Bottom Sheet</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="d-flex align-center">
|
||||
<span>Share</span>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon variant="text" @click="bottomSheet = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in shareOptions"
|
||||
:key="item.title"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
@click="handleShare(item.title)"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Nested Dialogs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Nested Dialogs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-dialog v-model="nestedDialog1" max-width="600">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Open First Dialog</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>First Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="mb-4">This is the first dialog. You can open another dialog from here.</p>
|
||||
|
||||
<v-dialog v-model="nestedDialog2" max-width="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="secondary" v-bind="props">Open Second Dialog</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>Second Dialog</v-card-title>
|
||||
<v-card-text>
|
||||
This is a nested dialog. You can have multiple layers of dialogs.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="nestedDialog2 = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" @click="nestedDialog1 = false">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Dialog states
|
||||
const basicDialog = ref(false)
|
||||
const confirmDialog = ref(false)
|
||||
const scrollableDialog = ref(false)
|
||||
const formDialog = ref(false)
|
||||
const fullscreenDialog = ref(false)
|
||||
const persistentDialog = ref(false)
|
||||
const smallDialog = ref(false)
|
||||
const mediumDialog = ref(false)
|
||||
const largeDialog = ref(false)
|
||||
const fadeDialog = ref(false)
|
||||
const scaleDialog = ref(false)
|
||||
const slideDialog = ref(false)
|
||||
const loadingDialog = ref(false)
|
||||
const customDialog = ref(false)
|
||||
const bottomSheet = ref(false)
|
||||
const nestedDialog1 = ref(false)
|
||||
const nestedDialog2 = ref(false)
|
||||
|
||||
// Form data
|
||||
const formData = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
role: '',
|
||||
bio: ''
|
||||
})
|
||||
|
||||
// Loading state
|
||||
const loadingMessage = ref('Processing...')
|
||||
|
||||
// Custom dialog data
|
||||
const selectedColor = ref('Black')
|
||||
|
||||
// Share options
|
||||
const shareOptions = [
|
||||
{ title: 'Facebook', icon: 'mdi-facebook' },
|
||||
{ title: 'Twitter', icon: 'mdi-twitter' },
|
||||
{ title: 'LinkedIn', icon: 'mdi-linkedin' },
|
||||
{ title: 'Email', icon: 'mdi-email' },
|
||||
{ title: 'Copy Link', icon: 'mdi-content-copy' }
|
||||
]
|
||||
|
||||
// Handlers
|
||||
function handleDelete() {
|
||||
console.log('Item deleted')
|
||||
confirmDialog.value = false
|
||||
}
|
||||
|
||||
function handleFormSubmit() {
|
||||
console.log('Form submitted:', formData.value)
|
||||
formDialog.value = false
|
||||
// Reset form
|
||||
formData.value = {
|
||||
name: '',
|
||||
email: '',
|
||||
role: '',
|
||||
bio: ''
|
||||
}
|
||||
}
|
||||
|
||||
function showLoadingDialog() {
|
||||
loadingDialog.value = true
|
||||
loadingMessage.value = 'Processing your request...'
|
||||
|
||||
// Simulate async operation
|
||||
setTimeout(() => {
|
||||
loadingMessage.value = 'Almost done...'
|
||||
}, 1500)
|
||||
|
||||
setTimeout(() => {
|
||||
loadingDialog.value = false
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
function handleAddToCart() {
|
||||
console.log('Added to cart:', selectedColor.value)
|
||||
customDialog.value = false
|
||||
}
|
||||
|
||||
function handleShare(platform: string) {
|
||||
console.log('Sharing via:', platform)
|
||||
bottomSheet.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
754
src/views/ExpansionPanelsPage.vue
Normal file
754
src/views/ExpansionPanelsPage.vue
Normal file
@@ -0,0 +1,754 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Expansion Panels</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Expansion Panels -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Expansion Panels</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel title="Panel 1">
|
||||
<v-expansion-panel-text>
|
||||
This is the content of panel 1. It can contain any type of content including text, images, or other components.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Panel 2">
|
||||
<v-expansion-panel-text>
|
||||
This is the content of panel 2. Expansion panels are great for organizing content in a collapsible format.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Panel 3">
|
||||
<v-expansion-panel-text>
|
||||
This is the content of panel 3. Users can expand one or multiple panels at a time.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Accordion (Single Expand) -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Accordion (Single Expand)</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels variant="accordion">
|
||||
<v-expansion-panel title="Section 1">
|
||||
<v-expansion-panel-text>
|
||||
Only one panel can be open at a time in accordion mode.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Section 2">
|
||||
<v-expansion-panel-text>
|
||||
Opening a new panel will close the previously open one.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Section 3">
|
||||
<v-expansion-panel-text>
|
||||
This is useful for FAQs or step-by-step instructions.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Popout Variant -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Popout Variant</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels variant="popout">
|
||||
<v-expansion-panel title="Popout Panel 1">
|
||||
<v-expansion-panel-text>
|
||||
Popout panels have a slight elevation effect when opened.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Popout Panel 2">
|
||||
<v-expansion-panel-text>
|
||||
This creates a nice visual effect for the expanded panel.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Popout Panel 3">
|
||||
<v-expansion-panel-text>
|
||||
The panel appears to "pop out" from the list.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Inset Variant -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Inset Variant</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels variant="inset">
|
||||
<v-expansion-panel title="Inset Panel 1">
|
||||
<v-expansion-panel-text>
|
||||
Inset panels have a contained appearance with rounded corners.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Inset Panel 2">
|
||||
<v-expansion-panel-text>
|
||||
They provide a cleaner, more compact look.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Inset Panel 3">
|
||||
<v-expansion-panel-text>
|
||||
Great for settings or configuration panels.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- With Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Expansion Panels with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-account</v-icon>
|
||||
User Profile
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Manage your user profile settings and preferences.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-cog</v-icon>
|
||||
Settings
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Configure application settings and options.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-bell</v-icon>
|
||||
Notifications
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Control your notification preferences.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-shield</v-icon>
|
||||
Security
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
Manage security settings and two-factor authentication.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Disabled Panels -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Disabled Panels</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel title="Active Panel">
|
||||
<v-expansion-panel-text>
|
||||
This panel is active and can be expanded.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Disabled Panel" disabled>
|
||||
<v-expansion-panel-text>
|
||||
This panel is disabled and cannot be expanded.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Another Active Panel">
|
||||
<v-expansion-panel-text>
|
||||
This panel is also active.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Readonly Panels -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Readonly Panels</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels readonly>
|
||||
<v-expansion-panel title="Readonly Panel 1">
|
||||
<v-expansion-panel-text>
|
||||
These panels cannot be collapsed once opened.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Readonly Panel 2">
|
||||
<v-expansion-panel-text>
|
||||
Useful for displaying information that should stay visible.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Multiple Open -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Multiple Open (Default Behavior)</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels multiple>
|
||||
<v-expansion-panel title="Panel 1">
|
||||
<v-expansion-panel-text>
|
||||
Multiple panels can be open at the same time.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Panel 2">
|
||||
<v-expansion-panel-text>
|
||||
This is the default behavior for expansion panels.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Panel 3">
|
||||
<v-expansion-panel-text>
|
||||
Try opening all three panels together.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Controlled State -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Controlled Expansion Panels</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="mb-4">
|
||||
<v-btn color="primary" size="small" @click="expandAll" class="mr-2">Expand All</v-btn>
|
||||
<v-btn color="secondary" size="small" @click="collapseAll" class="mr-2">Collapse All</v-btn>
|
||||
<v-btn color="info" size="small" @click="togglePanel(1)">Toggle Panel 2</v-btn>
|
||||
</div>
|
||||
|
||||
<v-expansion-panels v-model="controlledPanels" multiple>
|
||||
<v-expansion-panel value="0" title="Controlled Panel 1">
|
||||
<v-expansion-panel-text>
|
||||
Panel state can be controlled programmatically.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel value="1" title="Controlled Panel 2">
|
||||
<v-expansion-panel-text>
|
||||
Use v-model to control which panels are open.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel value="2" title="Controlled Panel 3">
|
||||
<v-expansion-panel-text>
|
||||
This is useful for complex interactions.
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Custom Content -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Panels with Custom Content</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<div class="d-flex align-center justify-space-between w-100 pr-4">
|
||||
<div>
|
||||
<v-icon start>mdi-email</v-icon>
|
||||
Messages
|
||||
</div>
|
||||
<v-badge color="error" content="5"></v-badge>
|
||||
</div>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-list density="compact">
|
||||
<v-list-item title="New message from John" subtitle="2 minutes ago"></v-list-item>
|
||||
<v-list-item title="Team meeting reminder" subtitle="1 hour ago"></v-list-item>
|
||||
<v-list-item title="Project update" subtitle="3 hours ago"></v-list-item>
|
||||
</v-list>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<div class="d-flex align-center justify-space-between w-100 pr-4">
|
||||
<div>
|
||||
<v-icon start>mdi-chart-line</v-icon>
|
||||
Statistics
|
||||
</div>
|
||||
<v-chip size="small" color="success">Up 12%</v-chip>
|
||||
</div>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<div class="text-center">
|
||||
<div class="text-h4">2,453</div>
|
||||
<div class="text-caption">Total Users</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<div class="text-center">
|
||||
<div class="text-h4">$12,450</div>
|
||||
<div class="text-caption">Revenue</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<div class="d-flex align-center justify-space-between w-100 pr-4">
|
||||
<div>
|
||||
<v-icon start>mdi-clock</v-icon>
|
||||
Activity
|
||||
</div>
|
||||
<span class="text-caption">Last updated: 5m ago</span>
|
||||
</div>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-timeline density="compact" side="end">
|
||||
<v-timeline-item dot-color="success" size="x-small">
|
||||
<div class="text-caption">Deployed to production</div>
|
||||
</v-timeline-item>
|
||||
<v-timeline-item dot-color="primary" size="x-small">
|
||||
<div class="text-caption">Code review completed</div>
|
||||
</v-timeline-item>
|
||||
<v-timeline-item dot-color="info" size="x-small">
|
||||
<div class="text-caption">Pull request created</div>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- FAQ Section -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">FAQ Section:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-expansion-panels variant="accordion">
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-help-circle</v-icon>
|
||||
How do I reset my password?
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<p class="mb-3">To reset your password:</p>
|
||||
<ol>
|
||||
<li>Click on "Forgot Password" on the login page</li>
|
||||
<li>Enter your email address</li>
|
||||
<li>Check your email for a reset link</li>
|
||||
<li>Follow the link and create a new password</li>
|
||||
</ol>
|
||||
<v-btn color="primary" size="small" class="mt-2">Reset Password</v-btn>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-help-circle</v-icon>
|
||||
How do I contact support?
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<p class="mb-3">You can contact our support team through:</p>
|
||||
<v-list density="compact">
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-email</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Email: support@example.com</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-phone</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Phone: +1 (555) 123-4567</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-chat</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Live Chat: Available 24/7</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-help-circle</v-icon>
|
||||
What payment methods do you accept?
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<p>We accept the following payment methods:</p>
|
||||
<v-chip-group class="mt-3">
|
||||
<v-chip prepend-icon="mdi-credit-card">Credit Card</v-chip>
|
||||
<v-chip prepend-icon="mdi-credit-card">Debit Card</v-chip>
|
||||
<v-chip>PayPal</v-chip>
|
||||
<v-chip>Apple Pay</v-chip>
|
||||
<v-chip>Google Pay</v-chip>
|
||||
</v-chip-group>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-help-circle</v-icon>
|
||||
Can I cancel my subscription?
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<p class="mb-3">Yes, you can cancel your subscription at any time. Your access will continue until the end of your current billing period.</p>
|
||||
<v-alert type="info" density="compact" class="mb-3">
|
||||
Note: Cancellation takes effect at the end of the billing cycle.
|
||||
</v-alert>
|
||||
<v-btn color="error" variant="outlined" size="small">Cancel Subscription</v-btn>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Settings Panel -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Application Settings:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-account</v-icon>
|
||||
Profile Settings
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-text-field
|
||||
label="Display Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
model-value="John Doe"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
model-value="john@example.com"
|
||||
class="mt-3"
|
||||
></v-text-field>
|
||||
<v-textarea
|
||||
label="Bio"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
rows="3"
|
||||
class="mt-3"
|
||||
></v-textarea>
|
||||
<v-btn color="primary" size="small" class="mt-2">Save Changes</v-btn>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-bell</v-icon>
|
||||
Notifications
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-switch label="Email notifications" density="compact" model-value></v-switch>
|
||||
<v-switch label="Push notifications" density="compact" model-value></v-switch>
|
||||
<v-switch label="SMS notifications" density="compact"></v-switch>
|
||||
<v-switch label="Marketing emails" density="compact"></v-switch>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-shield</v-icon>
|
||||
Security
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-switch label="Two-factor authentication" density="compact" model-value></v-switch>
|
||||
<v-switch label="Login alerts" density="compact" model-value></v-switch>
|
||||
<v-btn color="primary" size="small" class="mt-3">Change Password</v-btn>
|
||||
<v-btn color="secondary" size="small" class="mt-3 ml-2">View Login History</v-btn>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-palette</v-icon>
|
||||
Appearance
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-select
|
||||
:items="['Light', 'Dark', 'Auto']"
|
||||
label="Theme"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
model-value="Auto"
|
||||
></v-select>
|
||||
<v-select
|
||||
:items="['Compact', 'Comfortable', 'Spacious']"
|
||||
label="Density"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
model-value="Comfortable"
|
||||
class="mt-3"
|
||||
></v-select>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Product Details -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Product Information:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-expansion-panels variant="accordion">
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-information</v-icon>
|
||||
Description
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<p class="mb-3">
|
||||
This is a high-quality product designed to meet your needs. It features advanced technology
|
||||
and premium materials for optimal performance and durability.
|
||||
</p>
|
||||
<v-chip-group>
|
||||
<v-chip size="small">Premium Quality</v-chip>
|
||||
<v-chip size="small">Eco-Friendly</v-chip>
|
||||
<v-chip size="small">Warranty Included</v-chip>
|
||||
</v-chip-group>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-format-list-bulleted</v-icon>
|
||||
Specifications
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-list density="compact">
|
||||
<v-list-item title="Dimensions" subtitle="10 x 8 x 2 inches"></v-list-item>
|
||||
<v-list-item title="Weight" subtitle="1.5 lbs"></v-list-item>
|
||||
<v-list-item title="Material" subtitle="Premium aluminum"></v-list-item>
|
||||
<v-list-item title="Color" subtitle="Space Gray"></v-list-item>
|
||||
<v-list-item title="Warranty" subtitle="2 years"></v-list-item>
|
||||
</v-list>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<div class="d-flex align-center justify-space-between w-100 pr-4">
|
||||
<div>
|
||||
<v-icon start>mdi-star</v-icon>
|
||||
Reviews
|
||||
</div>
|
||||
<v-rating :model-value="4.5" readonly density="compact" size="small"></v-rating>
|
||||
</div>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<div class="mb-3">
|
||||
<strong>4.5 out of 5</strong> (based on 124 reviews)
|
||||
</div>
|
||||
<v-list density="compact">
|
||||
<v-list-item>
|
||||
<v-list-item-title>Excellent quality!</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-rating :model-value="5" readonly density="compact" size="x-small"></v-rating>
|
||||
<span class="ml-2">- John D.</span>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-title>Great value for money</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-rating :model-value="4" readonly density="compact" size="x-small"></v-rating>
|
||||
<span class="ml-2">- Sarah M.</span>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon start>mdi-truck</v-icon>
|
||||
Shipping Information
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-alert type="success" density="compact" class="mb-3">
|
||||
Free shipping on orders over $50
|
||||
</v-alert>
|
||||
<p><strong>Standard Shipping:</strong> 5-7 business days</p>
|
||||
<p><strong>Express Shipping:</strong> 2-3 business days</p>
|
||||
<p><strong>International:</strong> 10-15 business days</p>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Order History -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Order History:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel v-for="order in orders" :key="order.id">
|
||||
<v-expansion-panel-title>
|
||||
<div class="d-flex align-center justify-space-between w-100 pr-4">
|
||||
<div>
|
||||
<div class="font-weight-bold">Order #{{ order.id }}</div>
|
||||
<div class="text-caption">{{ order.date }}</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<v-chip :color="order.statusColor" size="small">{{ order.status }}</v-chip>
|
||||
<div class="text-caption mt-1">${{ order.total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="item in order.items"
|
||||
:key="item.name"
|
||||
:title="item.name"
|
||||
:subtitle="`Quantity: ${item.quantity} × $${item.price}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="grey-lighten-2">
|
||||
<v-icon>mdi-package-variant</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-divider class="my-3"></v-divider>
|
||||
<div class="d-flex justify-space-between">
|
||||
<span><strong>Total:</strong></span>
|
||||
<span><strong>${{ order.total }}</strong></span>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<v-btn color="primary" variant="outlined" size="small" class="mr-2">Track Order</v-btn>
|
||||
<v-btn variant="outlined" size="small">View Invoice</v-btn>
|
||||
</div>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const controlledPanels = ref<number[]>([])
|
||||
|
||||
const expandAll = () => {
|
||||
controlledPanels.value = [0, 1, 2]
|
||||
}
|
||||
|
||||
const collapseAll = () => {
|
||||
controlledPanels.value = []
|
||||
}
|
||||
|
||||
const togglePanel = (index: number) => {
|
||||
const idx = controlledPanels.value.indexOf(index)
|
||||
if (idx > -1) {
|
||||
controlledPanels.value.splice(idx, 1)
|
||||
} else {
|
||||
controlledPanels.value.push(index)
|
||||
}
|
||||
}
|
||||
|
||||
const orders = [
|
||||
{
|
||||
id: '10234',
|
||||
date: 'Oct 1, 2025',
|
||||
status: 'Delivered',
|
||||
statusColor: 'success',
|
||||
total: '129.97',
|
||||
items: [
|
||||
{ name: 'Product A', quantity: 2, price: '29.99' },
|
||||
{ name: 'Product B', quantity: 1, price: '49.99' },
|
||||
{ name: 'Product C', quantity: 1, price: '19.99' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '10198',
|
||||
date: 'Sep 28, 2025',
|
||||
status: 'Shipped',
|
||||
statusColor: 'info',
|
||||
total: '79.98',
|
||||
items: [
|
||||
{ name: 'Product D', quantity: 1, price: '39.99' },
|
||||
{ name: 'Product E', quantity: 2, price: '19.99' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '10156',
|
||||
date: 'Sep 15, 2025',
|
||||
status: 'Processing',
|
||||
statusColor: 'warning',
|
||||
total: '149.99',
|
||||
items: [
|
||||
{ name: 'Product F', quantity: 1, price: '149.99' }
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
382
src/views/InputsPage.vue
Normal file
382
src/views/InputsPage.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Form data
|
||||
const textField = ref('')
|
||||
const password = ref('')
|
||||
const email = ref('')
|
||||
const number = ref(0)
|
||||
const url = ref('')
|
||||
const tel = ref('')
|
||||
const search = ref('')
|
||||
const textarea = ref('')
|
||||
const selectedItem = ref('')
|
||||
const comboboxValue = ref('')
|
||||
const autocompleteValue = ref('')
|
||||
const multiSelect = ref([])
|
||||
const checkbox = ref(false)
|
||||
const checkboxes = ref([])
|
||||
const radio = ref('')
|
||||
const switchValue = ref(false)
|
||||
const slider = ref(50)
|
||||
const rangeSlider = ref([20, 80])
|
||||
const fileInput = ref(null)
|
||||
const date = ref('')
|
||||
const time = ref('')
|
||||
const color = ref('#1976D2')
|
||||
const rating = ref(3)
|
||||
|
||||
// Select options
|
||||
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
|
||||
const checkboxItems = ['Option 1', 'Option 2', 'Option 3']
|
||||
const radioItems = ['Radio 1', 'Radio 2', 'Radio 3']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- Text Inputs Section -->
|
||||
<v-col cols="12">
|
||||
<v-card title="Text Inputs">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="textField"
|
||||
label="Standard Text Field"
|
||||
placeholder="Enter text"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="number"
|
||||
label="Number"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="url"
|
||||
label="URL"
|
||||
type="url"
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="tel"
|
||||
label="Telephone"
|
||||
type="tel"
|
||||
placeholder="+1 (555) 123-4567"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
label="Search"
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
clearable
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Disabled"
|
||||
value="Disabled field"
|
||||
disabled
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Readonly"
|
||||
value="Readonly field"
|
||||
readonly
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="With Icon"
|
||||
prepend-icon="mdi-account"
|
||||
append-icon="mdi-information"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
v-model="textarea"
|
||||
label="Text Area"
|
||||
placeholder="Enter multiple lines of text"
|
||||
rows="3"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Select Inputs Section -->
|
||||
<v-col cols="12">
|
||||
<v-card title="Select Inputs">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="selectedItem"
|
||||
:items="items"
|
||||
label="Standard Select"
|
||||
placeholder="Select an item"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="multiSelect"
|
||||
:items="items"
|
||||
label="Multiple Select"
|
||||
placeholder="Select items"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-combobox
|
||||
v-model="comboboxValue"
|
||||
:items="items"
|
||||
label="Combobox"
|
||||
placeholder="Type or select"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-autocomplete
|
||||
v-model="autocompleteValue"
|
||||
:items="items"
|
||||
label="Autocomplete"
|
||||
placeholder="Start typing"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Checkboxes and Radio Buttons -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="Checkboxes">
|
||||
<v-card-text>
|
||||
<v-checkbox
|
||||
v-model="checkbox"
|
||||
label="Single Checkbox"
|
||||
/>
|
||||
|
||||
<v-divider class="my-4" />
|
||||
|
||||
<p class="text-subtitle-2 mb-2">Multiple Checkboxes:</p>
|
||||
<v-checkbox
|
||||
v-for="item in checkboxItems"
|
||||
:key="item"
|
||||
v-model="checkboxes"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="Radio Buttons">
|
||||
<v-card-text>
|
||||
<v-radio-group v-model="radio">
|
||||
<v-radio
|
||||
v-for="item in radioItems"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</v-radio-group>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Switch -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="Switch">
|
||||
<v-card-text>
|
||||
<v-switch
|
||||
v-model="switchValue"
|
||||
label="Toggle Switch"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<v-switch
|
||||
v-model="switchValue"
|
||||
label="Inset Switch"
|
||||
color="success"
|
||||
inset
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Sliders -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="Sliders">
|
||||
<v-card-text>
|
||||
<p class="text-subtitle-2 mb-2">Single Slider: {{ slider }}</p>
|
||||
<v-slider
|
||||
v-model="slider"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
thumb-label
|
||||
/>
|
||||
|
||||
<p class="text-subtitle-2 mb-2 mt-6">Range Slider: {{ rangeSlider[0] }} - {{ rangeSlider[1] }}</p>
|
||||
<v-range-slider
|
||||
v-model="rangeSlider"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
thumb-label
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- File Input -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="File Input">
|
||||
<v-card-text>
|
||||
<v-file-input
|
||||
v-model="fileInput"
|
||||
label="File input"
|
||||
placeholder="Select a file"
|
||||
prepend-icon="mdi-paperclip"
|
||||
/>
|
||||
|
||||
<v-file-input
|
||||
label="Multiple files"
|
||||
placeholder="Select files"
|
||||
multiple
|
||||
chips
|
||||
/>
|
||||
|
||||
<v-file-input
|
||||
label="Accept images only"
|
||||
accept="image/*"
|
||||
prepend-icon="mdi-image"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Date and Time -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="Date and Time">
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="date"
|
||||
label="Date"
|
||||
type="date"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="time"
|
||||
label="Time"
|
||||
type="time"
|
||||
class="mt-4"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
label="Datetime"
|
||||
type="datetime-local"
|
||||
class="mt-4"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Color and Rating -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="Color Picker">
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="color"
|
||||
label="Color"
|
||||
type="color"
|
||||
/>
|
||||
|
||||
<p class="text-subtitle-2 mt-4">Selected color: <span :style="{ color: color }">{{ color }}</span></p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-card title="Rating">
|
||||
<v-card-text>
|
||||
<p class="text-subtitle-2 mb-2">Rating: {{ rating }}</p>
|
||||
<v-rating
|
||||
v-model="rating"
|
||||
color="warning"
|
||||
hover
|
||||
/>
|
||||
|
||||
<p class="text-subtitle-2 mb-2 mt-6">Half increments:</p>
|
||||
<v-rating
|
||||
v-model="rating"
|
||||
color="warning"
|
||||
half-increments
|
||||
hover
|
||||
/>
|
||||
|
||||
<p class="text-subtitle-2 mb-2 mt-6">Readonly:</p>
|
||||
<v-rating
|
||||
:model-value="4.5"
|
||||
color="warning"
|
||||
half-increments
|
||||
readonly
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- OTP Input -->
|
||||
<v-col cols="12">
|
||||
<v-card title="OTP Input">
|
||||
<v-card-text>
|
||||
<v-otp-input
|
||||
length="6"
|
||||
type="number"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
770
src/views/ListsPage.vue
Normal file
770
src/views/ListsPage.vue
Normal file
@@ -0,0 +1,770 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Lists</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Lists -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Basic List</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in basicItems"
|
||||
:key="item"
|
||||
:title="item"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Subtitles -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Subtitles</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in itemsWithSubtitles"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Icons -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Icons</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in itemsWithIcons"
|
||||
:key="item.title"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Avatars -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Avatars</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="user in users"
|
||||
:key="user.name"
|
||||
:title="user.name"
|
||||
:subtitle="user.email"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar :color="user.color">
|
||||
{{ user.initials }}
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Actions -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Actions</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in actionItems"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<v-btn
|
||||
icon="mdi-information"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="handleAction('info', item.title)"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Multiple Actions -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Multiple Actions</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in actionItems"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="primary">
|
||||
<v-icon>mdi-file-document</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn
|
||||
icon="mdi-pencil"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="handleAction('edit', item.title)"
|
||||
></v-btn>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="error"
|
||||
@click="handleAction('delete', item.title)"
|
||||
></v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Three Line List -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Three Line List</v-card-title>
|
||||
<v-list lines="three">
|
||||
<v-list-item
|
||||
v-for="item in threeLineItems"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar :color="item.color">
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Selectable List -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Selectable List</v-card-title>
|
||||
<v-card-subtitle>Selected: {{ selectedItem || 'None' }}</v-card-subtitle>
|
||||
<v-list v-model:selected="selectedItem" mandatory>
|
||||
<v-list-item
|
||||
v-for="item in selectableItems"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:title="item.title"
|
||||
:prepend-icon="item.icon"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Dividers -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Dividers</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item title="Item 1" subtitle="First item"></v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Item 2" subtitle="Second item"></v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Item 3" subtitle="Third item"></v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Item 4" subtitle="Fourth item"></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Subheaders -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Subheaders</v-card-title>
|
||||
<v-list>
|
||||
<v-list-subheader>Recent</v-list-subheader>
|
||||
<v-list-item
|
||||
v-for="i in 2"
|
||||
:key="`recent-${i}`"
|
||||
:title="`Recent Item ${i}`"
|
||||
prepend-icon="mdi-clock"
|
||||
></v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
|
||||
<v-list-subheader>Favorites</v-list-subheader>
|
||||
<v-list-item
|
||||
v-for="i in 3"
|
||||
:key="`favorite-${i}`"
|
||||
:title="`Favorite Item ${i}`"
|
||||
prepend-icon="mdi-star"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Nested Lists (Accordion) -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Nested List (Accordion)</v-card-title>
|
||||
<v-list>
|
||||
<v-list-group value="users">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-account-multiple"
|
||||
title="Users"
|
||||
></v-list-item>
|
||||
</template>
|
||||
<v-list-item
|
||||
v-for="user in users.slice(0, 3)"
|
||||
:key="user.name"
|
||||
:title="user.name"
|
||||
:subtitle="user.email"
|
||||
prepend-icon="mdi-account"
|
||||
></v-list-item>
|
||||
</v-list-group>
|
||||
|
||||
<v-list-group value="settings">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-cog"
|
||||
title="Settings"
|
||||
></v-list-item>
|
||||
</template>
|
||||
<v-list-item
|
||||
title="Profile"
|
||||
prepend-icon="mdi-account-cog"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Notifications"
|
||||
prepend-icon="mdi-bell-cog"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Privacy"
|
||||
prepend-icon="mdi-shield-account"
|
||||
></v-list-item>
|
||||
</v-list-group>
|
||||
|
||||
<v-list-group value="help">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-help-circle"
|
||||
title="Help"
|
||||
></v-list-item>
|
||||
</template>
|
||||
<v-list-item
|
||||
title="Documentation"
|
||||
prepend-icon="mdi-book-open"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Support"
|
||||
prepend-icon="mdi-lifebuoy"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Feedback"
|
||||
prepend-icon="mdi-message-alert"
|
||||
></v-list-item>
|
||||
</v-list-group>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List Density -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List Density</v-card-title>
|
||||
<v-tabs v-model="densityTab">
|
||||
<v-tab value="default">Default</v-tab>
|
||||
<v-tab value="comfortable">Comfortable</v-tab>
|
||||
<v-tab value="compact">Compact</v-tab>
|
||||
</v-tabs>
|
||||
<v-window v-model="densityTab">
|
||||
<v-window-item value="default">
|
||||
<v-list density="default">
|
||||
<v-list-item
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
:title="`Item ${i}`"
|
||||
prepend-icon="mdi-file"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-window-item>
|
||||
<v-window-item value="comfortable">
|
||||
<v-list density="comfortable">
|
||||
<v-list-item
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
:title="`Item ${i}`"
|
||||
prepend-icon="mdi-file"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-window-item>
|
||||
<v-window-item value="compact">
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
:title="`Item ${i}`"
|
||||
prepend-icon="mdi-file"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Active/Selected States -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Active States</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
title="Normal Item"
|
||||
prepend-icon="mdi-file"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Active Item"
|
||||
prepend-icon="mdi-file"
|
||||
active
|
||||
color="primary"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Another Normal Item"
|
||||
prepend-icon="mdi-file"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Disabled List Items -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Disabled List Items</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
title="Enabled Item"
|
||||
subtitle="This item is clickable"
|
||||
prepend-icon="mdi-check-circle"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Disabled Item"
|
||||
subtitle="This item is disabled"
|
||||
prepend-icon="mdi-close-circle"
|
||||
disabled
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Another Enabled Item"
|
||||
subtitle="This item is clickable"
|
||||
prepend-icon="mdi-check-circle"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Clickable/Link List Items -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Clickable/Link Items</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
title="Go to Tables"
|
||||
subtitle="Navigate to tables page"
|
||||
prepend-icon="mdi-table"
|
||||
to="/tables"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="Go to Buttons"
|
||||
subtitle="Navigate to buttons page"
|
||||
prepend-icon="mdi-gesture-tap"
|
||||
to="/buttons"
|
||||
></v-list-item>
|
||||
<v-list-item
|
||||
title="External Link"
|
||||
subtitle="Opens in new tab"
|
||||
prepend-icon="mdi-open-in-new"
|
||||
href="https://vuetifyjs.com"
|
||||
target="_blank"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Checkboxes -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Checkboxes</v-card-title>
|
||||
<v-card-subtitle>Selected: {{ checkedItems.length }} items</v-card-subtitle>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in checkboxItems"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-checkbox
|
||||
v-model="checkedItems"
|
||||
:value="item.value"
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
</template>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Switches -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Switches</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="setting in switchSettings"
|
||||
:key="setting.id"
|
||||
:title="setting.title"
|
||||
:subtitle="setting.subtitle"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon>{{ setting.icon }}</v-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<v-switch
|
||||
v-model="setting.enabled"
|
||||
color="primary"
|
||||
hide-details
|
||||
></v-switch>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- List with Progress -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>List with Progress Bars</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="task in tasks"
|
||||
:key="task.name"
|
||||
:title="task.name"
|
||||
:subtitle="`${task.progress}% complete`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar :color="task.progress === 100 ? 'success' : 'primary'">
|
||||
<v-icon>{{ task.progress === 100 ? 'mdi-check' : 'mdi-clock-outline' }}</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<div style="width: 100px;">
|
||||
<v-progress-linear
|
||||
:model-value="task.progress"
|
||||
:color="task.progress === 100 ? 'success' : 'primary'"
|
||||
height="6"
|
||||
></v-progress-linear>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Email List -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Email Inbox:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="email in emails"
|
||||
:key="email.id"
|
||||
:title="email.from"
|
||||
:subtitle="email.subject"
|
||||
lines="two"
|
||||
@click="handleAction('openEmail', email.id)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar :color="email.unread ? 'primary' : 'grey'">
|
||||
{{ email.from.charAt(0) }}
|
||||
</v-avatar>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<div class="d-flex flex-column align-end">
|
||||
<span class="text-caption">{{ email.time }}</span>
|
||||
<v-icon v-if="email.starred" color="warning">mdi-star</v-icon>
|
||||
<v-badge
|
||||
v-if="email.unread"
|
||||
dot
|
||||
color="primary"
|
||||
></v-badge>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Notifications List -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Notifications:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="notification in notifications"
|
||||
:key="notification.id"
|
||||
:title="notification.title"
|
||||
:subtitle="notification.message"
|
||||
lines="two"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar :color="notification.color">
|
||||
<v-icon>{{ notification.icon }}</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<div class="d-flex flex-column align-end gap-2">
|
||||
<span class="text-caption">{{ notification.time }}</span>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
@click.stop="removeNotification(notification.id)"
|
||||
></v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- File Manager -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">File Manager:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="file in files"
|
||||
:key="file.name"
|
||||
:title="file.name"
|
||||
:subtitle="`${file.size} • ${file.modified}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon :color="file.type === 'folder' ? 'warning' : 'primary'">
|
||||
{{ file.type === 'folder' ? 'mdi-folder' : 'mdi-file-document' }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
icon="mdi-dots-vertical"
|
||||
variant="text"
|
||||
size="small"
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-eye" @click="handleAction('view', file.name)">
|
||||
<v-list-item-title>View</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-download" @click="handleAction('download', file.name)">
|
||||
<v-list-item-title>Download</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-delete" @click="handleAction('delete', file.name)">
|
||||
<v-list-item-title>Delete</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Contacts List -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Contacts:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="contact in contacts"
|
||||
:key="contact.id"
|
||||
:title="contact.name"
|
||||
:subtitle="contact.phone"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar :color="contact.online ? 'success' : 'grey'">
|
||||
{{ contact.initials }}
|
||||
<v-badge
|
||||
v-if="contact.online"
|
||||
dot
|
||||
color="success"
|
||||
location="bottom end"
|
||||
></v-badge>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn
|
||||
icon="mdi-phone"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="success"
|
||||
@click="handleAction('call', contact.name)"
|
||||
></v-btn>
|
||||
<v-btn
|
||||
icon="mdi-message"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="primary"
|
||||
@click="handleAction('message', contact.name)"
|
||||
></v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Basic data
|
||||
const basicItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
|
||||
|
||||
const itemsWithSubtitles = [
|
||||
{ title: 'Item 1', subtitle: 'Description for item 1' },
|
||||
{ title: 'Item 2', subtitle: 'Description for item 2' },
|
||||
{ title: 'Item 3', subtitle: 'Description for item 3' }
|
||||
]
|
||||
|
||||
const itemsWithIcons = [
|
||||
{ title: 'Home', icon: 'mdi-home' },
|
||||
{ title: 'Settings', icon: 'mdi-cog' },
|
||||
{ title: 'Profile', icon: 'mdi-account' },
|
||||
{ title: 'Messages', icon: 'mdi-email' }
|
||||
]
|
||||
|
||||
const users = [
|
||||
{ name: 'John Doe', email: 'john@example.com', initials: 'JD', color: 'primary' },
|
||||
{ name: 'Alice Smith', email: 'alice@example.com', initials: 'AS', color: 'secondary' },
|
||||
{ name: 'Bob Johnson', email: 'bob@example.com', initials: 'BJ', color: 'success' },
|
||||
{ name: 'Maria Garcia', email: 'maria@example.com', initials: 'MG', color: 'info' }
|
||||
]
|
||||
|
||||
const actionItems = [
|
||||
{ title: 'Document 1', subtitle: 'Created yesterday' },
|
||||
{ title: 'Document 2', subtitle: 'Created last week' },
|
||||
{ title: 'Document 3', subtitle: 'Created last month' }
|
||||
]
|
||||
|
||||
const threeLineItems = [
|
||||
{
|
||||
title: 'Project Alpha',
|
||||
subtitle: 'This is a detailed description of the project. It contains multiple lines of text to demonstrate the three-line list item capability.',
|
||||
icon: 'mdi-folder',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
title: 'Project Beta',
|
||||
subtitle: 'Another project with a longer description that spans multiple lines. This shows how the list handles overflow content.',
|
||||
icon: 'mdi-folder',
|
||||
color: 'secondary'
|
||||
}
|
||||
]
|
||||
|
||||
const selectableItems = [
|
||||
{ title: 'Option 1', value: 'opt1', icon: 'mdi-numeric-1-circle' },
|
||||
{ title: 'Option 2', value: 'opt2', icon: 'mdi-numeric-2-circle' },
|
||||
{ title: 'Option 3', value: 'opt3', icon: 'mdi-numeric-3-circle' }
|
||||
]
|
||||
|
||||
const checkboxItems = [
|
||||
{ title: 'Task 1', subtitle: 'Complete documentation', value: 'task1' },
|
||||
{ title: 'Task 2', subtitle: 'Review pull requests', value: 'task2' },
|
||||
{ title: 'Task 3', subtitle: 'Update dependencies', value: 'task3' }
|
||||
]
|
||||
|
||||
const switchSettings = ref([
|
||||
{ id: 1, title: 'Notifications', subtitle: 'Receive push notifications', icon: 'mdi-bell', enabled: true },
|
||||
{ id: 2, title: 'Dark Mode', subtitle: 'Use dark theme', icon: 'mdi-weather-night', enabled: false },
|
||||
{ id: 3, title: 'Auto-save', subtitle: 'Automatically save changes', icon: 'mdi-content-save-auto', enabled: true }
|
||||
])
|
||||
|
||||
const tasks = [
|
||||
{ name: 'Setup Database', progress: 100 },
|
||||
{ name: 'API Integration', progress: 75 },
|
||||
{ name: 'UI Design', progress: 50 },
|
||||
{ name: 'Testing', progress: 25 }
|
||||
]
|
||||
|
||||
const emails = [
|
||||
{ id: 1, from: 'John Doe', subject: 'Meeting Tomorrow', time: '10:30 AM', unread: true, starred: true },
|
||||
{ id: 2, from: 'Alice Smith', subject: 'Project Update', time: '9:15 AM', unread: true, starred: false },
|
||||
{ id: 3, from: 'Bob Johnson', subject: 'Re: Budget Review', time: 'Yesterday', unread: false, starred: false }
|
||||
]
|
||||
|
||||
const notifications = ref([
|
||||
{ id: 1, title: 'New Message', message: 'You have a new message from John', icon: 'mdi-email', color: 'primary', time: '2m ago' },
|
||||
{ id: 2, title: 'Task Completed', message: 'Your task has been marked as complete', icon: 'mdi-check-circle', color: 'success', time: '1h ago' },
|
||||
{ id: 3, title: 'Update Available', message: 'A new version is available', icon: 'mdi-update', color: 'warning', time: '3h ago' }
|
||||
])
|
||||
|
||||
const files = [
|
||||
{ name: 'Documents', type: 'folder', size: '12 items', modified: 'Today' },
|
||||
{ name: 'Report.pdf', type: 'file', size: '2.5 MB', modified: 'Yesterday' },
|
||||
{ name: 'Presentation.pptx', type: 'file', size: '8.1 MB', modified: 'Last week' }
|
||||
]
|
||||
|
||||
const contacts = [
|
||||
{ id: 1, name: 'John Doe', phone: '+1 234 567 8900', initials: 'JD', online: true },
|
||||
{ id: 2, name: 'Alice Smith', phone: '+1 234 567 8901', initials: 'AS', online: false },
|
||||
{ id: 3, name: 'Bob Johnson', phone: '+1 234 567 8902', initials: 'BJ', online: true }
|
||||
]
|
||||
|
||||
// State
|
||||
const selectedItem = ref(['opt1'])
|
||||
const checkedItems = ref<string[]>([])
|
||||
const densityTab = ref('default')
|
||||
|
||||
// Functions
|
||||
function handleAction(action: string, item?: string) {
|
||||
console.log(`Action: ${action}`, item)
|
||||
}
|
||||
|
||||
function removeNotification(id: number) {
|
||||
notifications.value = notifications.value.filter(n => n.id !== id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
615
src/views/MenusPage.vue
Normal file
615
src/views/MenusPage.vue
Normal file
@@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Menus</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Menu -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Menu</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Open Menu</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item value="option1">
|
||||
<v-list-item-title>Option 1</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item value="option2">
|
||||
<v-list-item-title>Option 2</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item value="option3">
|
||||
<v-list-item-title>Option 3</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Menu with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Menu with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" prepend-icon="mdi-menu" v-bind="props">
|
||||
Actions
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-pencil" value="edit" @click="handleAction('edit')">
|
||||
<v-list-item-title>Edit</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-content-copy" value="copy" @click="handleAction('copy')">
|
||||
<v-list-item-title>Copy</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-delete" value="delete" @click="handleAction('delete')">
|
||||
<v-list-item-title>Delete</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-download" value="download" @click="handleAction('download')">
|
||||
<v-list-item-title>Download</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Menu Positions -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Menu Positions</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-menu location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Bottom</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Item {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-menu location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Top</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Item {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-menu location="start">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Start</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Item {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-menu location="end">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">End</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Item {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Menu with Dividers -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Menu with Dividers</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">File Menu</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-file-plus" @click="handleAction('new')">
|
||||
<v-list-item-title>New</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-folder-open" @click="handleAction('open')">
|
||||
<v-list-item-title>Open</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-content-save" @click="handleAction('save')">
|
||||
<v-list-item-title>Save</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-content-save-all" @click="handleAction('saveAs')">
|
||||
<v-list-item-title>Save As...</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-export" @click="handleAction('export')">
|
||||
<v-list-item-title>Export</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-printer" @click="handleAction('print')">
|
||||
<v-list-item-title>Print</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-close" @click="handleAction('close')">
|
||||
<v-list-item-title>Close</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Nested Menus -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Nested Menus</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Main Menu</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-home" @click="handleAction('home')">
|
||||
<v-list-item-title>Home</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-menu location="end" open-on-hover>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item prepend-icon="mdi-cog" v-bind="props">
|
||||
<v-list-item-title>Settings</v-list-item-title>
|
||||
<template v-slot:append>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item @click="handleAction('profile')">
|
||||
<v-list-item-title>Profile Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="handleAction('account')">
|
||||
<v-list-item-title>Account Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="handleAction('privacy')">
|
||||
<v-list-item-title>Privacy Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-menu location="end" open-on-hover>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item prepend-icon="mdi-help-circle" v-bind="props">
|
||||
<v-list-item-title>Help</v-list-item-title>
|
||||
<template v-slot:append>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item @click="handleAction('docs')">
|
||||
<v-list-item-title>Documentation</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="handleAction('support')">
|
||||
<v-list-item-title>Support</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="handleAction('about')">
|
||||
<v-list-item-title>About</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-logout" @click="handleAction('logout')">
|
||||
<v-list-item-title>Logout</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Context Menu -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Context Menu (Right Click)</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu v-model="contextMenu" :location-x="contextMenuX" :location-y="contextMenuY" absolute>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-content-cut" @click="handleAction('cut')">
|
||||
<v-list-item-title>Cut</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-content-copy" @click="handleAction('copy')">
|
||||
<v-list-item-title>Copy</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-content-paste" @click="handleAction('paste')">
|
||||
<v-list-item-title>Paste</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-delete" @click="handleAction('delete')">
|
||||
<v-list-item-title>Delete</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-card
|
||||
variant="outlined"
|
||||
height="200"
|
||||
class="d-flex align-center justify-center"
|
||||
@contextmenu.prevent="showContextMenu"
|
||||
>
|
||||
<span class="text-h6">Right click me!</span>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Menu with Subheaders -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Menu with Subheaders</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">View Menu</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-subheader>View Options</v-list-subheader>
|
||||
<v-list-item prepend-icon="mdi-view-grid" @click="handleAction('grid')">
|
||||
<v-list-item-title>Grid View</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-view-list" @click="handleAction('list')">
|
||||
<v-list-item-title>List View</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-subheader>Sort By</v-list-subheader>
|
||||
<v-list-item prepend-icon="mdi-sort-alphabetical-ascending" @click="handleAction('sortName')">
|
||||
<v-list-item-title>Name</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-sort-calendar-ascending" @click="handleAction('sortDate')">
|
||||
<v-list-item-title>Date</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-sort-numeric-ascending" @click="handleAction('sortSize')">
|
||||
<v-list-item-title>Size</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Menu Activators -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Different Activators</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<!-- Button Activator -->
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Button</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Option {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<!-- Icon Button Activator -->
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Option {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<!-- Chip Activator -->
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip color="primary" v-bind="props" append-icon="mdi-chevron-down">
|
||||
Filter
|
||||
</v-chip>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Filter {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<!-- Avatar Activator -->
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-avatar color="primary" v-bind="props" style="cursor: pointer;">JD</v-avatar>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-account">
|
||||
<v-list-item-title>Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-cog">
|
||||
<v-list-item-title>Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-logout">
|
||||
<v-list-item-title>Logout</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Open on Hover -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Open on Hover</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu open-on-hover>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Hover Over Me</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-account">
|
||||
<v-list-item-title>Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-email">
|
||||
<v-list-item-title>Messages</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-bell">
|
||||
<v-list-item-title>Notifications</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Menu with Custom Content -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Menu with Custom Content</v-card-title>
|
||||
<v-card-text>
|
||||
<v-menu :close-on-content-click="false" max-width="300">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">User Menu</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<div class="text-center mb-3">
|
||||
<v-avatar size="80" color="primary">JD</v-avatar>
|
||||
<div class="text-h6 mt-2">John Doe</div>
|
||||
<div class="text-caption">john.doe@example.com</div>
|
||||
</div>
|
||||
<v-divider class="mb-2"></v-divider>
|
||||
<v-list density="compact">
|
||||
<v-list-item prepend-icon="mdi-account" @click="handleAction('profile')">
|
||||
<v-list-item-title>My Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-cog" @click="handleAction('settings')">
|
||||
<v-list-item-title>Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-list-item prepend-icon="mdi-logout" @click="handleAction('logout')">
|
||||
<v-list-item-title>Logout</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Offset Menu -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Menu with Offset</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-menu :offset="[0, 10]">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Offset Y: 10</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Item {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-menu :offset="[20, 0]">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Offset X: 20</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Item {{ i }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-6">
|
||||
<!-- Toolbar Menu -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-3">Toolbar with Menu:</p>
|
||||
<v-toolbar color="primary">
|
||||
<v-toolbar-title>My App</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-magnify" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<v-card min-width="300">
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
label="Search..."
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon v-bind="props">
|
||||
<v-badge content="5" color="error">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list max-width="300">
|
||||
<v-list-subheader>Notifications</v-list-subheader>
|
||||
<v-list-item v-for="i in 3" :key="i">
|
||||
<v-list-item-title>Notification {{ i }}</v-list-item-title>
|
||||
<v-list-item-subtitle>Just now</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-cog">
|
||||
<v-list-item-title>Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-help-circle">
|
||||
<v-list-item-title>Help</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-logout">
|
||||
<v-list-item-title>Logout</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
</div>
|
||||
|
||||
<!-- Data Table Row Actions -->
|
||||
<div>
|
||||
<p class="text-subtitle-2 mb-3">Table Row Actions:</p>
|
||||
<v-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in sampleUsers" :key="user.id">
|
||||
<td>{{ user.name }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>
|
||||
<v-chip :color="user.status === 'Active' ? 'success' : 'error'" size="small">
|
||||
{{ user.status }}
|
||||
</v-chip>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-dots-vertical" size="small" variant="text" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-eye" @click="handleAction('view')">
|
||||
<v-list-item-title>View</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-pencil" @click="handleAction('edit')">
|
||||
<v-list-item-title>Edit</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-content-copy" @click="handleAction('duplicate')">
|
||||
<v-list-item-title>Duplicate</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-delete" @click="handleAction('delete')" class="text-error">
|
||||
<v-list-item-title>Delete</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Context menu state
|
||||
const contextMenu = ref(false)
|
||||
const contextMenuX = ref(0)
|
||||
const contextMenuY = ref(0)
|
||||
|
||||
// Sample data
|
||||
const sampleUsers = ref([
|
||||
{ id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
|
||||
{ id: 2, name: 'Alice Smith', email: 'alice@example.com', status: 'Active' },
|
||||
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'Inactive' }
|
||||
])
|
||||
|
||||
function handleAction(action: string) {
|
||||
console.log(`Action triggered: ${action}`)
|
||||
contextMenu.value = false
|
||||
}
|
||||
|
||||
function showContextMenu(event: MouseEvent) {
|
||||
event.preventDefault()
|
||||
contextMenu.value = false
|
||||
contextMenuX.value = event.clientX
|
||||
contextMenuY.value = event.clientY
|
||||
setTimeout(() => {
|
||||
contextMenu.value = true
|
||||
}, 10)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
529
src/views/ProgressPage.vue
Normal file
529
src/views/ProgressPage.vue
Normal file
@@ -0,0 +1,529 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Progress Indicators</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Linear Progress - Indeterminate -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Linear Progress - Indeterminate</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-progress-linear indeterminate></v-progress-linear>
|
||||
<v-progress-linear indeterminate color="primary"></v-progress-linear>
|
||||
<v-progress-linear indeterminate color="secondary"></v-progress-linear>
|
||||
<v-progress-linear indeterminate color="success"></v-progress-linear>
|
||||
<v-progress-linear indeterminate color="error"></v-progress-linear>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Linear Progress - Determinate -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Linear Progress - Determinate</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<span>25%</span>
|
||||
</div>
|
||||
<v-progress-linear :model-value="25" color="primary"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<span>50%</span>
|
||||
</div>
|
||||
<v-progress-linear :model-value="50" color="secondary"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<span>75%</span>
|
||||
</div>
|
||||
<v-progress-linear :model-value="75" color="success"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<span>100%</span>
|
||||
</div>
|
||||
<v-progress-linear :model-value="100" color="success"></v-progress-linear>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Linear Progress Heights -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Linear Progress - Different Heights</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<p class="text-caption mb-2">Height: 4px (Default)</p>
|
||||
<v-progress-linear :model-value="60" color="primary"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-caption mb-2">Height: 8px</p>
|
||||
<v-progress-linear :model-value="60" color="primary" height="8"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-caption mb-2">Height: 15px</p>
|
||||
<v-progress-linear :model-value="60" color="primary" height="15"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-caption mb-2">Height: 25px</p>
|
||||
<v-progress-linear :model-value="60" color="primary" height="25"></v-progress-linear>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Circular Progress - Indeterminate -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Circular Progress - Indeterminate</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
<v-progress-circular indeterminate color="primary"></v-progress-circular>
|
||||
<v-progress-circular indeterminate color="secondary"></v-progress-circular>
|
||||
<v-progress-circular indeterminate color="success"></v-progress-circular>
|
||||
<v-progress-circular indeterminate color="warning"></v-progress-circular>
|
||||
<v-progress-circular indeterminate color="error"></v-progress-circular>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Circular Progress - Determinate -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Circular Progress - Determinate</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-progress-circular :model-value="0" color="primary">0%</v-progress-circular>
|
||||
<v-progress-circular :model-value="25" color="info">25%</v-progress-circular>
|
||||
<v-progress-circular :model-value="50" color="warning">50%</v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="secondary">75%</v-progress-circular>
|
||||
<v-progress-circular :model-value="100" color="success">100%</v-progress-circular>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Circular Progress Sizes -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Circular Progress - Sizes</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-progress-circular :model-value="75" color="primary" :size="32"></v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="primary" :size="48"></v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="primary" :size="64"></v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="primary" :size="80"></v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="primary" :size="96"></v-progress-circular>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Circular Progress Widths -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Circular Progress - Widths</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-progress-circular :model-value="75" color="primary" :size="64" :width="2"></v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="primary" :size="64" :width="4"></v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="primary" :size="64" :width="8"></v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="primary" :size="64" :width="12"></v-progress-circular>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Rotate Progress -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Circular Progress - Rotate</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-progress-circular :model-value="75" color="primary" :rotate="0">0°</v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="secondary" :rotate="90">90°</v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="success" :rotate="180">180°</v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="warning" :rotate="270">270°</v-progress-circular>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Buffer Progress -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Buffer Progress</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-progress-linear
|
||||
:model-value="bufferValue"
|
||||
:buffer-value="bufferValue + 20"
|
||||
color="primary"
|
||||
stream
|
||||
></v-progress-linear>
|
||||
<v-progress-linear
|
||||
:model-value="bufferValue"
|
||||
:buffer-value="bufferValue + 20"
|
||||
color="secondary"
|
||||
stream
|
||||
></v-progress-linear>
|
||||
<v-btn @click="startBuffer" color="primary" size="small">Simulate Buffering</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Query/Stream Progress -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Query/Stream Progress</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<p class="text-caption mb-2">Stream</p>
|
||||
<v-progress-linear indeterminate stream color="primary"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-caption mb-2">Query (Indeterminate)</p>
|
||||
<v-progress-linear indeterminate color="secondary"></v-progress-linear>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Animated Progress -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Animated Progress</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<span>Progress: {{ animatedProgress }}%</span>
|
||||
<v-btn size="small" @click="toggleAnimation">
|
||||
{{ isAnimating ? 'Stop' : 'Start' }}
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-progress-linear :model-value="animatedProgress" color="primary"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<v-progress-circular
|
||||
:model-value="animatedProgress"
|
||||
:size="80"
|
||||
:width="8"
|
||||
color="primary"
|
||||
>
|
||||
{{ animatedProgress }}%
|
||||
</v-progress-circular>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Progress with Icons -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Progress with Custom Content</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<v-progress-circular :model-value="100" color="success" :size="64">
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-progress-circular>
|
||||
<v-progress-circular :model-value="50" color="warning" :size="64">
|
||||
<v-icon>mdi-clock</v-icon>
|
||||
</v-progress-circular>
|
||||
<v-progress-circular :model-value="75" color="error" :size="64">
|
||||
<v-icon>mdi-alert</v-icon>
|
||||
</v-progress-circular>
|
||||
<v-progress-circular :model-value="90" color="info" :size="64">
|
||||
<v-icon>mdi-information</v-icon>
|
||||
</v-progress-circular>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Rounded Progress -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Rounded Linear Progress</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-progress-linear :model-value="60" color="primary" height="10" rounded></v-progress-linear>
|
||||
<v-progress-linear :model-value="70" color="secondary" height="15" rounded></v-progress-linear>
|
||||
<v-progress-linear :model-value="80" color="success" height="20" rounded></v-progress-linear>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Striped Progress -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Striped Progress</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<v-progress-linear :model-value="60" color="primary" height="20" striped></v-progress-linear>
|
||||
<v-progress-linear :model-value="70" color="secondary" height="20" striped></v-progress-linear>
|
||||
<v-progress-linear :model-value="80" color="success" height="20" striped></v-progress-linear>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- File Upload -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">File Upload Progress:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div v-for="file in uploadFiles" :key="file.name">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon>mdi-file</v-icon>
|
||||
<span>{{ file.name }}</span>
|
||||
</div>
|
||||
<span class="text-caption">{{ file.progress }}%</span>
|
||||
</div>
|
||||
<v-progress-linear
|
||||
:model-value="file.progress"
|
||||
:color="file.progress === 100 ? 'success' : 'primary'"
|
||||
height="8"
|
||||
rounded
|
||||
></v-progress-linear>
|
||||
</div>
|
||||
<v-btn @click="simulateUpload" color="primary" size="small">Simulate Upload</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Storage Usage -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Storage Usage:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<span>Total: 85 GB of 100 GB used</span>
|
||||
<span>85%</span>
|
||||
</div>
|
||||
<v-progress-linear
|
||||
:model-value="85"
|
||||
color="warning"
|
||||
height="20"
|
||||
>
|
||||
<strong>85%</strong>
|
||||
</v-progress-linear>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon color="primary">mdi-file-document</v-icon>
|
||||
<span>Documents</span>
|
||||
</div>
|
||||
<span>25 GB</span>
|
||||
</div>
|
||||
<v-progress-linear :model-value="25" color="primary" height="10"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon color="success">mdi-image</v-icon>
|
||||
<span>Photos</span>
|
||||
</div>
|
||||
<span>35 GB</span>
|
||||
</div>
|
||||
<v-progress-linear :model-value="35" color="success" height="10"></v-progress-linear>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon color="error">mdi-video</v-icon>
|
||||
<span>Videos</span>
|
||||
</div>
|
||||
<span>25 GB</span>
|
||||
</div>
|
||||
<v-progress-linear :model-value="25" color="error" height="10"></v-progress-linear>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Task Progress Dashboard -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Project Tasks:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div v-for="task in projectTasks" :key="task.name">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<div>
|
||||
<div class="font-weight-medium">{{ task.name }}</div>
|
||||
<div class="text-caption text-grey">{{ task.assignee }}</div>
|
||||
</div>
|
||||
<v-chip :color="task.status === 'completed' ? 'success' : 'primary'" size="small">
|
||||
{{ task.progress }}%
|
||||
</v-chip>
|
||||
</div>
|
||||
<v-progress-linear
|
||||
:model-value="task.progress"
|
||||
:color="task.status === 'completed' ? 'success' : 'primary'"
|
||||
height="10"
|
||||
></v-progress-linear>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Loading States -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Loading States:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<div class="text-center">
|
||||
<v-progress-circular indeterminate color="primary" :size="48"></v-progress-circular>
|
||||
<p class="text-caption mt-2">Loading data...</p>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div class="text-center">
|
||||
<v-progress-circular indeterminate color="secondary" :size="48"></v-progress-circular>
|
||||
<p class="text-caption mt-2">Processing...</p>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div class="text-center">
|
||||
<v-progress-circular :model-value="100" color="success" :size="48">
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-progress-circular>
|
||||
<p class="text-caption mt-2">Complete!</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
// Animated progress
|
||||
const animatedProgress = ref(0)
|
||||
const isAnimating = ref(false)
|
||||
let animationInterval: number | null = null
|
||||
|
||||
// Buffer progress
|
||||
const bufferValue = ref(0)
|
||||
let bufferInterval: number | null = null
|
||||
|
||||
// Upload files
|
||||
const uploadFiles = ref([
|
||||
{ name: 'document.pdf', progress: 0 },
|
||||
{ name: 'image.jpg', progress: 0 },
|
||||
{ name: 'video.mp4', progress: 0 }
|
||||
])
|
||||
|
||||
// Project tasks
|
||||
const projectTasks = ref([
|
||||
{ name: 'Design UI/UX', assignee: 'John Doe', progress: 100, status: 'completed' },
|
||||
{ name: 'Backend API', assignee: 'Alice Smith', progress: 75, status: 'in-progress' },
|
||||
{ name: 'Frontend Development', assignee: 'Bob Johnson', progress: 60, status: 'in-progress' },
|
||||
{ name: 'Testing & QA', assignee: 'Maria Garcia', progress: 30, status: 'in-progress' }
|
||||
])
|
||||
|
||||
function toggleAnimation() {
|
||||
isAnimating.value = !isAnimating.value
|
||||
|
||||
if (isAnimating.value) {
|
||||
animationInterval = window.setInterval(() => {
|
||||
animatedProgress.value += 1
|
||||
if (animatedProgress.value >= 100) {
|
||||
animatedProgress.value = 0
|
||||
}
|
||||
}, 50)
|
||||
} else if (animationInterval) {
|
||||
clearInterval(animationInterval)
|
||||
}
|
||||
}
|
||||
|
||||
function startBuffer() {
|
||||
bufferValue.value = 0
|
||||
|
||||
if (bufferInterval) {
|
||||
clearInterval(bufferInterval)
|
||||
}
|
||||
|
||||
bufferInterval = window.setInterval(() => {
|
||||
bufferValue.value += 2
|
||||
if (bufferValue.value >= 80) {
|
||||
if (bufferInterval) {
|
||||
clearInterval(bufferInterval)
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function simulateUpload() {
|
||||
uploadFiles.value.forEach((file, index) => {
|
||||
file.progress = 0
|
||||
const uploadInterval = setInterval(() => {
|
||||
file.progress += Math.random() * 10
|
||||
if (file.progress >= 100) {
|
||||
file.progress = 100
|
||||
clearInterval(uploadInterval)
|
||||
}
|
||||
}, 200 + index * 100)
|
||||
})
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (animationInterval) {
|
||||
clearInterval(animationInterval)
|
||||
}
|
||||
if (bufferInterval) {
|
||||
clearInterval(bufferInterval)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
46
src/views/ShadowPage.vue
Normal file
46
src/views/ShadowPage.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@KTXC/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@KTXC/components/shared/UiParentCard.vue';
|
||||
|
||||
// component content
|
||||
const page = ref({ title: 'Shadows' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
title: 'Color',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
const colorShadow = ref(['primary', 'secondary', 'info', 'success', 'warning', 'error']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<UiParentCard title="Basic Shadow">
|
||||
<v-row justify="center">
|
||||
<v-col v-for="n in 25" :key="n" cols="auto">
|
||||
<v-card height="100" width="100" class="mb-5" :class="['d-flex justify-center align-center flex-column', `elevation-${n}`]">
|
||||
<h6 class="text-h6">elevation</h6>
|
||||
<div>{{ n - 1 }}</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<UiParentCard title="Color Shadow">
|
||||
<v-row>
|
||||
<v-col cols="6" lg="2" md="3" sm="4" v-for="color in colorShadow" :key="color">
|
||||
<v-card :class="`${color}-shadow bg-${color} px-4 py-6 text-center`">
|
||||
{{ color }}
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
732
src/views/SnackbarsPage.vue
Normal file
732
src/views/SnackbarsPage.vue
Normal file
@@ -0,0 +1,732 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Snackbars & Toasts</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Snackbar -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Snackbar</v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn color="primary" @click="basicSnackbar = true">Show Snackbar</v-btn>
|
||||
|
||||
<v-snackbar v-model="basicSnackbar">
|
||||
This is a basic snackbar message
|
||||
<template v-slot:actions>
|
||||
<v-btn color="pink" variant="text" @click="basicSnackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Snackbar Positions -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Snackbar Positions</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" @click="showPosition('top')">Top</v-btn>
|
||||
<v-btn color="primary" @click="showPosition('bottom')">Bottom</v-btn>
|
||||
<v-btn color="primary" @click="showPosition('left')">Left</v-btn>
|
||||
<v-btn color="primary" @click="showPosition('right')">Right</v-btn>
|
||||
<v-btn color="primary" @click="showPosition('top left')">Top Left</v-btn>
|
||||
<v-btn color="primary" @click="showPosition('top right')">Top Right</v-btn>
|
||||
<v-btn color="primary" @click="showPosition('bottom left')">Bottom Left</v-btn>
|
||||
<v-btn color="primary" @click="showPosition('bottom right')">Bottom Right</v-btn>
|
||||
</div>
|
||||
|
||||
<v-snackbar v-model="positionSnackbar" :location="snackbarLocation as any">
|
||||
Position: {{ snackbarLocation }}
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="positionSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Colored Snackbars -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Snackbars</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" @click="showColor('primary')">Primary</v-btn>
|
||||
<v-btn color="secondary" @click="showColor('secondary')">Secondary</v-btn>
|
||||
<v-btn color="success" @click="showColor('success')">Success</v-btn>
|
||||
<v-btn color="warning" @click="showColor('warning')">Warning</v-btn>
|
||||
<v-btn color="error" @click="showColor('error')">Error</v-btn>
|
||||
<v-btn color="info" @click="showColor('info')">Info</v-btn>
|
||||
</div>
|
||||
|
||||
<v-snackbar v-model="colorSnackbar" :color="snackbarColor">
|
||||
This is a {{ snackbarColor }} snackbar
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="colorSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Snackbar with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Snackbars with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="success" @click="showIconSnackbar('success')">
|
||||
<v-icon start>mdi-check-circle</v-icon>
|
||||
Success
|
||||
</v-btn>
|
||||
<v-btn color="error" @click="showIconSnackbar('error')">
|
||||
<v-icon start>mdi-alert-circle</v-icon>
|
||||
Error
|
||||
</v-btn>
|
||||
<v-btn color="warning" @click="showIconSnackbar('warning')">
|
||||
<v-icon start>mdi-alert</v-icon>
|
||||
Warning
|
||||
</v-btn>
|
||||
<v-btn color="info" @click="showIconSnackbar('info')">
|
||||
<v-icon start>mdi-information</v-icon>
|
||||
Info
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-snackbar v-model="iconSnackbar" :color="iconSnackbarType">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon v-if="iconSnackbarType === 'success'">mdi-check-circle</v-icon>
|
||||
<v-icon v-if="iconSnackbarType === 'error'">mdi-alert-circle</v-icon>
|
||||
<v-icon v-if="iconSnackbarType === 'warning'">mdi-alert</v-icon>
|
||||
<v-icon v-if="iconSnackbarType === 'info'">mdi-information</v-icon>
|
||||
<span>{{ iconSnackbarMessage }}</span>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="iconSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Timeout Duration -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Timeout Duration</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" @click="showTimeout(2000)">2 Seconds</v-btn>
|
||||
<v-btn color="primary" @click="showTimeout(5000)">5 Seconds</v-btn>
|
||||
<v-btn color="primary" @click="showTimeout(10000)">10 Seconds</v-btn>
|
||||
<v-btn color="primary" @click="showTimeout(-1)">No Timeout</v-btn>
|
||||
</div>
|
||||
|
||||
<v-snackbar v-model="timeoutSnackbar" :timeout="timeoutDuration">
|
||||
{{ timeoutMessage }}
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="timeoutSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Multi-line Snackbar -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Multi-line Snackbar</v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn color="primary" @click="multilineSnackbar = true">Show Multi-line</v-btn>
|
||||
|
||||
<v-snackbar v-model="multilineSnackbar" multi-line>
|
||||
This is a multi-line snackbar that can display longer messages.
|
||||
It automatically wraps text when the content is too long for a single line.
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="multilineSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Vertical Snackbar -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Vertical Snackbar</v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn color="primary" @click="verticalSnackbar = true">Show Vertical</v-btn>
|
||||
|
||||
<v-snackbar v-model="verticalSnackbar" vertical>
|
||||
This is a vertical snackbar with actions stacked below the message.
|
||||
<template v-slot:actions>
|
||||
<v-btn color="primary" variant="text" @click="handleAction">Action</v-btn>
|
||||
<v-btn variant="text" @click="verticalSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Snackbar with Actions -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Snackbar with Actions</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="error" @click="showDeleteSnackbar">Delete Item</v-btn>
|
||||
<v-btn color="primary" @click="showSaveSnackbar">Save Changes</v-btn>
|
||||
</div>
|
||||
|
||||
<v-snackbar v-model="deleteSnackbar" color="error" timeout="5000">
|
||||
Item deleted successfully
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="undoDelete">Undo</v-btn>
|
||||
<v-btn variant="text" @click="deleteSnackbar = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
|
||||
<v-snackbar v-model="saveSnackbar" color="success" timeout="3000">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon>mdi-check-circle</v-icon>
|
||||
<span>Changes saved successfully</span>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="saveSnackbar = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Rounded Snackbar -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Rounded Snackbar</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" @click="showRounded('0')">Square</v-btn>
|
||||
<v-btn color="primary" @click="showRounded('xs')">Extra Small</v-btn>
|
||||
<v-btn color="primary" @click="showRounded('sm')">Small</v-btn>
|
||||
<v-btn color="primary" @click="showRounded('lg')">Large</v-btn>
|
||||
<v-btn color="primary" @click="showRounded('xl')">Extra Large</v-btn>
|
||||
<v-btn color="primary" @click="showRounded('pill')">Pill</v-btn>
|
||||
</div>
|
||||
|
||||
<v-snackbar v-model="roundedSnackbar" :rounded="roundedValue as any">
|
||||
Rounded: {{ roundedValue }}
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="roundedSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Elevated Snackbar -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Elevated Snackbar</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-btn color="primary" @click="showElevation(0)">No Elevation</v-btn>
|
||||
<v-btn color="primary" @click="showElevation(6)">Elevation 6</v-btn>
|
||||
<v-btn color="primary" @click="showElevation(12)">Elevation 12</v-btn>
|
||||
<v-btn color="primary" @click="showElevation(24)">Elevation 24</v-btn>
|
||||
</div>
|
||||
|
||||
<v-snackbar v-model="elevationSnackbar" :elevation="elevationValue">
|
||||
Elevation: {{ elevationValue }}
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="elevationSnackbar = false">Close</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Loading Snackbar -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Loading Snackbar</v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn color="primary" @click="showLoading">Show Loading</v-btn>
|
||||
|
||||
<v-snackbar v-model="loadingSnackbar" :timeout="-1" color="info">
|
||||
<div class="d-flex align-center gap-3">
|
||||
<v-progress-circular indeterminate size="20" width="2"></v-progress-circular>
|
||||
<span>Processing your request...</span>
|
||||
</div>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Form Submission -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Form Submission Example:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="formData.name"
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="formData.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mt-3"
|
||||
></v-text-field>
|
||||
<v-btn color="primary" block class="mt-3" @click="submitForm">
|
||||
Submit Form
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar v-model="formSnackbar" :color="formSnackbarColor" timeout="4000">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon v-if="formSnackbarColor === 'success'">mdi-check-circle</v-icon>
|
||||
<v-icon v-if="formSnackbarColor === 'error'">mdi-alert-circle</v-icon>
|
||||
<span>{{ formSnackbarMessage }}</span>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="formSnackbar = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-col>
|
||||
|
||||
<!-- File Upload -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">File Upload Example:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-file-input
|
||||
v-model="uploadFile"
|
||||
label="Select File"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-file-input>
|
||||
<v-btn color="primary" block class="mt-3" @click="uploadFileAction" :disabled="!uploadFile">
|
||||
Upload File
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar v-model="uploadSnackbar" :color="uploadSnackbarColor" :timeout="uploadTimeout">
|
||||
<div class="d-flex align-center gap-3">
|
||||
<v-progress-circular
|
||||
v-if="uploading"
|
||||
indeterminate
|
||||
size="20"
|
||||
width="2"
|
||||
></v-progress-circular>
|
||||
<v-icon v-else-if="uploadSnackbarColor === 'success'">mdi-check-circle</v-icon>
|
||||
<v-icon v-else-if="uploadSnackbarColor === 'error'">mdi-alert-circle</v-icon>
|
||||
<span>{{ uploadSnackbarMessage }}</span>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="uploadSnackbar = false" v-if="!uploading">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-col>
|
||||
|
||||
<!-- Notification Center -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Notification Actions:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-btn color="success" size="small" @click="showNotification('success', 'Task completed successfully!')">
|
||||
<v-icon start size="small">mdi-check</v-icon>
|
||||
Success
|
||||
</v-btn>
|
||||
<v-btn color="error" size="small" @click="showNotification('error', 'An error occurred!')">
|
||||
<v-icon start size="small">mdi-alert-circle</v-icon>
|
||||
Error
|
||||
</v-btn>
|
||||
<v-btn color="warning" size="small" @click="showNotification('warning', 'Warning: Check your input!')">
|
||||
<v-icon start size="small">mdi-alert</v-icon>
|
||||
Warning
|
||||
</v-btn>
|
||||
<v-btn color="info" size="small" @click="showNotification('info', 'New update available!')">
|
||||
<v-icon start size="small">mdi-information</v-icon>
|
||||
Info
|
||||
</v-btn>
|
||||
<v-btn color="primary" size="small" @click="showNotification('primary', 'New message received!')">
|
||||
<v-icon start size="small">mdi-message</v-icon>
|
||||
Message
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar
|
||||
v-model="notificationSnackbar"
|
||||
:color="notificationColor"
|
||||
location="top right"
|
||||
timeout="4000"
|
||||
>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon v-if="notificationColor === 'success'">mdi-check-circle</v-icon>
|
||||
<v-icon v-if="notificationColor === 'error'">mdi-alert-circle</v-icon>
|
||||
<v-icon v-if="notificationColor === 'warning'">mdi-alert</v-icon>
|
||||
<v-icon v-if="notificationColor === 'info'">mdi-information</v-icon>
|
||||
<v-icon v-if="notificationColor === 'primary'">mdi-message</v-icon>
|
||||
<span>{{ notificationMessage }}</span>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" size="small" @click="notificationSnackbar = false">
|
||||
<v-icon size="small">mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-col>
|
||||
|
||||
<!-- Shopping Cart Actions -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Shopping Cart Example:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="product in cartProducts"
|
||||
:key="product.id"
|
||||
:title="product.name"
|
||||
:subtitle="`$${product.price}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="grey-lighten-2">
|
||||
<v-icon>mdi-package-variant</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<v-btn
|
||||
icon="mdi-cart-plus"
|
||||
size="small"
|
||||
variant="text"
|
||||
color="primary"
|
||||
@click="addToCart(product)"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar v-model="cartSnackbar" color="success" timeout="3000" location="bottom">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon>mdi-cart-check</v-icon>
|
||||
<span>{{ cartMessage }}</span>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" size="small" @click="viewCart">View Cart</v-btn>
|
||||
<v-btn variant="text" size="small" @click="cartSnackbar = false">
|
||||
<v-icon size="small">mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-col>
|
||||
|
||||
<!-- Connection Status -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Connection Status Monitor:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn color="success" @click="simulateOnline">Go Online</v-btn>
|
||||
<v-btn color="error" @click="simulateOffline">Go Offline</v-btn>
|
||||
<v-btn color="warning" @click="simulateSlowConnection">Slow Connection</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar
|
||||
v-model="connectionSnackbar"
|
||||
:color="connectionColor"
|
||||
:timeout="connectionTimeout"
|
||||
location="bottom"
|
||||
>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon v-if="connectionColor === 'success'">mdi-wifi</v-icon>
|
||||
<v-icon v-if="connectionColor === 'error'">mdi-wifi-off</v-icon>
|
||||
<v-icon v-if="connectionColor === 'warning'">mdi-wifi-strength-1</v-icon>
|
||||
<span>{{ connectionMessage }}</span>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn
|
||||
v-if="connectionColor === 'error'"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="retryConnection"
|
||||
>
|
||||
Retry
|
||||
</v-btn>
|
||||
<v-btn variant="text" size="small" @click="connectionSnackbar = false">
|
||||
<v-icon size="small">mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Basic
|
||||
const basicSnackbar = ref(false)
|
||||
|
||||
// Position
|
||||
const positionSnackbar = ref(false)
|
||||
const snackbarLocation = ref('bottom')
|
||||
|
||||
const showPosition = (location: string) => {
|
||||
snackbarLocation.value = location
|
||||
positionSnackbar.value = true
|
||||
}
|
||||
|
||||
// Color
|
||||
const colorSnackbar = ref(false)
|
||||
const snackbarColor = ref('primary')
|
||||
|
||||
const showColor = (color: string) => {
|
||||
snackbarColor.value = color
|
||||
colorSnackbar.value = true
|
||||
}
|
||||
|
||||
// Icon
|
||||
const iconSnackbar = ref(false)
|
||||
const iconSnackbarType = ref('success')
|
||||
const iconSnackbarMessage = ref('')
|
||||
|
||||
const showIconSnackbar = (type: string) => {
|
||||
iconSnackbarType.value = type
|
||||
const messages: Record<string, string> = {
|
||||
success: 'Operation completed successfully!',
|
||||
error: 'An error occurred. Please try again.',
|
||||
warning: 'Please review your input.',
|
||||
info: 'This is an informational message.'
|
||||
}
|
||||
iconSnackbarMessage.value = messages[type] || 'Notification'
|
||||
iconSnackbar.value = true
|
||||
}
|
||||
|
||||
// Timeout
|
||||
const timeoutSnackbar = ref(false)
|
||||
const timeoutDuration = ref(2000)
|
||||
const timeoutMessage = ref('')
|
||||
|
||||
const showTimeout = (duration: number) => {
|
||||
timeoutDuration.value = duration
|
||||
timeoutMessage.value = duration === -1
|
||||
? 'This snackbar stays open until closed'
|
||||
: `This snackbar will close in ${duration / 1000} seconds`
|
||||
timeoutSnackbar.value = true
|
||||
}
|
||||
|
||||
// Multi-line
|
||||
const multilineSnackbar = ref(false)
|
||||
|
||||
// Vertical
|
||||
const verticalSnackbar = ref(false)
|
||||
|
||||
const handleAction = () => {
|
||||
console.log('Action clicked')
|
||||
verticalSnackbar.value = false
|
||||
}
|
||||
|
||||
// Actions
|
||||
const deleteSnackbar = ref(false)
|
||||
const saveSnackbar = ref(false)
|
||||
|
||||
const showDeleteSnackbar = () => {
|
||||
deleteSnackbar.value = true
|
||||
}
|
||||
|
||||
const showSaveSnackbar = () => {
|
||||
saveSnackbar.value = true
|
||||
}
|
||||
|
||||
const undoDelete = () => {
|
||||
console.log('Undo delete')
|
||||
deleteSnackbar.value = false
|
||||
}
|
||||
|
||||
// Rounded
|
||||
const roundedSnackbar = ref(false)
|
||||
const roundedValue = ref('0')
|
||||
|
||||
const showRounded = (value: string) => {
|
||||
roundedValue.value = value
|
||||
roundedSnackbar.value = true
|
||||
}
|
||||
|
||||
// Elevation
|
||||
const elevationSnackbar = ref(false)
|
||||
const elevationValue = ref(0)
|
||||
|
||||
const showElevation = (value: number) => {
|
||||
elevationValue.value = value
|
||||
elevationSnackbar.value = true
|
||||
}
|
||||
|
||||
// Loading
|
||||
const loadingSnackbar = ref(false)
|
||||
|
||||
const showLoading = () => {
|
||||
loadingSnackbar.value = true
|
||||
setTimeout(() => {
|
||||
loadingSnackbar.value = false
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
// Form Example
|
||||
const formData = ref({
|
||||
name: '',
|
||||
email: ''
|
||||
})
|
||||
const formSnackbar = ref(false)
|
||||
const formSnackbarColor = ref('success')
|
||||
const formSnackbarMessage = ref('')
|
||||
|
||||
const submitForm = () => {
|
||||
if (!formData.value.name || !formData.value.email) {
|
||||
formSnackbarColor.value = 'error'
|
||||
formSnackbarMessage.value = 'Please fill in all fields'
|
||||
} else {
|
||||
formSnackbarColor.value = 'success'
|
||||
formSnackbarMessage.value = 'Form submitted successfully!'
|
||||
formData.value = { name: '', email: '' }
|
||||
}
|
||||
formSnackbar.value = true
|
||||
}
|
||||
|
||||
// File Upload Example
|
||||
const uploadFile = ref<File[] | null>(null)
|
||||
const uploadSnackbar = ref(false)
|
||||
const uploadSnackbarColor = ref('info')
|
||||
const uploadSnackbarMessage = ref('')
|
||||
const uploadTimeout = ref(-1)
|
||||
const uploading = ref(false)
|
||||
|
||||
const uploadFileAction = () => {
|
||||
uploading.value = true
|
||||
uploadSnackbarColor.value = 'info'
|
||||
uploadSnackbarMessage.value = 'Uploading file...'
|
||||
uploadTimeout.value = -1
|
||||
uploadSnackbar.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
uploading.value = false
|
||||
uploadSnackbarColor.value = 'success'
|
||||
uploadSnackbarMessage.value = 'File uploaded successfully!'
|
||||
uploadTimeout.value = 3000
|
||||
uploadFile.value = null
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
// Notification Example
|
||||
const notificationSnackbar = ref(false)
|
||||
const notificationColor = ref('success')
|
||||
const notificationMessage = ref('')
|
||||
|
||||
const showNotification = (color: string, message: string) => {
|
||||
notificationColor.value = color
|
||||
notificationMessage.value = message
|
||||
notificationSnackbar.value = true
|
||||
}
|
||||
|
||||
// Shopping Cart Example
|
||||
const cartProducts = [
|
||||
{ id: 1, name: 'Product A', price: 29.99 },
|
||||
{ id: 2, name: 'Product B', price: 49.99 },
|
||||
{ id: 3, name: 'Product C', price: 19.99 }
|
||||
]
|
||||
const cartSnackbar = ref(false)
|
||||
const cartMessage = ref('')
|
||||
|
||||
const addToCart = (product: { name: string; price: number }) => {
|
||||
cartMessage.value = `${product.name} added to cart`
|
||||
cartSnackbar.value = true
|
||||
}
|
||||
|
||||
const viewCart = () => {
|
||||
console.log('View cart clicked')
|
||||
cartSnackbar.value = false
|
||||
}
|
||||
|
||||
// Connection Status Example
|
||||
const connectionSnackbar = ref(false)
|
||||
const connectionColor = ref('success')
|
||||
const connectionMessage = ref('')
|
||||
const connectionTimeout = ref(3000)
|
||||
|
||||
const simulateOnline = () => {
|
||||
connectionColor.value = 'success'
|
||||
connectionMessage.value = 'Connected to internet'
|
||||
connectionTimeout.value = 3000
|
||||
connectionSnackbar.value = true
|
||||
}
|
||||
|
||||
const simulateOffline = () => {
|
||||
connectionColor.value = 'error'
|
||||
connectionMessage.value = 'No internet connection'
|
||||
connectionTimeout.value = -1
|
||||
connectionSnackbar.value = true
|
||||
}
|
||||
|
||||
const simulateSlowConnection = () => {
|
||||
connectionColor.value = 'warning'
|
||||
connectionMessage.value = 'Slow internet connection detected'
|
||||
connectionTimeout.value = 5000
|
||||
connectionSnackbar.value = true
|
||||
}
|
||||
|
||||
const retryConnection = () => {
|
||||
console.log('Retry connection')
|
||||
connectionSnackbar.value = false
|
||||
setTimeout(() => {
|
||||
simulateOnline()
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
894
src/views/SteppersPage.vue
Normal file
894
src/views/SteppersPage.vue
Normal file
@@ -0,0 +1,894 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Steppers</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Stepper -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Stepper</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="basicStep">
|
||||
<v-stepper-header>
|
||||
<v-stepper-item title="Step 1" value="1"></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Step 2" value="2"></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Step 3" value="3"></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Step 1 Content</h3>
|
||||
<p>This is the content for step 1.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Step 2 Content</h3>
|
||||
<p>This is the content for step 2.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Step 3 Content</h3>
|
||||
<p>This is the content for step 3.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="basicStep = (parseInt(basicStep) + 1).toString()"
|
||||
@click:prev="basicStep = (parseInt(basicStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Stepper with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Stepper with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="iconStep">
|
||||
<v-stepper-header>
|
||||
<v-stepper-item title="Account" value="1" icon="mdi-account"></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Profile" value="2" icon="mdi-card-account-details"></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Settings" value="3" icon="mdi-cog"></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Account Setup</h3>
|
||||
<v-text-field label="Username" variant="outlined" density="compact"></v-text-field>
|
||||
<v-text-field label="Email" type="email" variant="outlined" density="compact" class="mt-3"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Profile Information</h3>
|
||||
<v-text-field label="First Name" variant="outlined" density="compact"></v-text-field>
|
||||
<v-text-field label="Last Name" variant="outlined" density="compact" class="mt-3"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Preferences</h3>
|
||||
<v-switch label="Email notifications" density="compact"></v-switch>
|
||||
<v-switch label="Push notifications" density="compact"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="iconStep = (parseInt(iconStep) + 1).toString()"
|
||||
@click:prev="iconStep = (parseInt(iconStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Editable Stepper -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Editable Stepper</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="editStep" editable>
|
||||
<v-stepper-header>
|
||||
<v-stepper-item title="Personal Info" value="1" editable></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Address" value="2" editable></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Review" value="3" editable></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Personal Information</h3>
|
||||
<p>Click on any step header to navigate directly to that step.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Address Details</h3>
|
||||
<p>You can edit any previous step by clicking on its header.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Review Your Information</h3>
|
||||
<p>Review and edit your information if needed.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="editStep = (parseInt(editStep) + 1).toString()"
|
||||
@click:prev="editStep = (parseInt(editStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Non-linear Stepper -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Non-linear Stepper</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="nonLinearStep" non-linear>
|
||||
<v-stepper-header>
|
||||
<v-stepper-item title="Choose" value="1" complete></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Configure" value="2"></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Deploy" value="3"></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Choose Options</h3>
|
||||
<p>Steps can be completed in any order.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Configure Settings</h3>
|
||||
<p>Configure your preferences.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Deploy Application</h3>
|
||||
<p>Ready to deploy.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="nonLinearStep = (parseInt(nonLinearStep) + 1).toString()"
|
||||
@click:prev="nonLinearStep = (parseInt(nonLinearStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Vertical Stepper -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Vertical Stepper</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="verticalStep" direction="vertical">
|
||||
<v-stepper-item title="Select campaign" value="1" complete>
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p>Choose your campaign type and target audience.</p>
|
||||
<v-select
|
||||
:items="['Email', 'Social Media', 'Display Ads']"
|
||||
label="Campaign Type"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-select>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-stepper-actions
|
||||
@click:next="verticalStep = '2'"
|
||||
next-text="Continue"
|
||||
></v-stepper-actions>
|
||||
</v-stepper-item>
|
||||
|
||||
<v-stepper-item title="Create ad group" value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p>Set up your ad group with name and budget.</p>
|
||||
<v-text-field label="Ad Group Name" variant="outlined" density="compact"></v-text-field>
|
||||
<v-text-field label="Budget" type="number" variant="outlined" density="compact" class="mt-3"></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-stepper-actions
|
||||
@click:prev="verticalStep = '1'"
|
||||
@click:next="verticalStep = '3'"
|
||||
next-text="Continue"
|
||||
prev-text="Back"
|
||||
></v-stepper-actions>
|
||||
</v-stepper-item>
|
||||
|
||||
<v-stepper-item title="Create ad" value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p>Design your advertisement content.</p>
|
||||
<v-textarea label="Ad Content" variant="outlined" density="compact"></v-textarea>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-stepper-actions
|
||||
@click:prev="verticalStep = '2'"
|
||||
@click:next="handleVerticalComplete"
|
||||
next-text="Finish"
|
||||
prev-text="Back"
|
||||
></v-stepper-actions>
|
||||
</v-stepper-item>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Stepper with Subtitle -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Stepper with Subtitles</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="subtitleStep">
|
||||
<v-stepper-header>
|
||||
<v-stepper-item
|
||||
title="Shipping"
|
||||
subtitle="Enter address"
|
||||
value="1"
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Payment"
|
||||
subtitle="Enter card details"
|
||||
value="2"
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Confirmation"
|
||||
subtitle="Review order"
|
||||
value="3"
|
||||
></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Shipping Address</h3>
|
||||
<v-text-field label="Street Address" variant="outlined" density="compact"></v-text-field>
|
||||
<v-row class="mt-3">
|
||||
<v-col cols="6">
|
||||
<v-text-field label="City" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field label="Zip Code" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Payment Information</h3>
|
||||
<v-text-field label="Card Number" variant="outlined" density="compact"></v-text-field>
|
||||
<v-row class="mt-3">
|
||||
<v-col cols="6">
|
||||
<v-text-field label="Expiry Date" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field label="CVV" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Order Confirmation</h3>
|
||||
<p>Review your order details before submitting.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="subtitleStep = (parseInt(subtitleStep) + 1).toString()"
|
||||
@click:prev="subtitleStep = (parseInt(subtitleStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Colored Stepper -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Stepper</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="colorStep" color="success">
|
||||
<v-stepper-header>
|
||||
<v-stepper-item title="Start" value="1"></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Process" value="2"></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Complete" value="3"></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>Step 1 content with green theme</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>Step 2 content with green theme</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>Step 3 content with green theme</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="colorStep = (parseInt(colorStep) + 1).toString()"
|
||||
@click:prev="colorStep = (parseInt(colorStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Stepper with Error State -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Stepper with Error State</v-card-title>
|
||||
<v-card-text>
|
||||
<v-stepper v-model="errorStep">
|
||||
<v-stepper-header>
|
||||
<v-stepper-item title="Step 1" value="1" complete></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Step 2" value="2" error></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item title="Step 3" value="3"></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Step 1 - Completed</h3>
|
||||
<v-alert type="success" density="compact">This step is complete</v-alert>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Step 2 - Error</h3>
|
||||
<v-alert type="error" density="compact" class="mb-3">
|
||||
There was an error processing this step
|
||||
</v-alert>
|
||||
<v-btn color="error" @click="fixError">Fix Error</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-3">Step 3 - Pending</h3>
|
||||
<p>Complete previous steps first.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="errorStep = (parseInt(errorStep) + 1).toString()"
|
||||
@click:prev="errorStep = (parseInt(errorStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Registration Form -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">User Registration Flow:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-stepper v-model="registrationStep">
|
||||
<v-stepper-header>
|
||||
<v-stepper-item
|
||||
title="Account"
|
||||
subtitle="Create account"
|
||||
icon="mdi-account-plus"
|
||||
value="1"
|
||||
:complete="registrationStep > '1'"
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Profile"
|
||||
subtitle="Personal info"
|
||||
icon="mdi-account-details"
|
||||
value="2"
|
||||
:complete="registrationStep > '2'"
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Preferences"
|
||||
subtitle="Customize"
|
||||
icon="mdi-tune"
|
||||
value="3"
|
||||
:complete="registrationStep > '3'"
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Verify"
|
||||
subtitle="Confirm email"
|
||||
icon="mdi-email-check"
|
||||
value="4"
|
||||
></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Create Your Account</h3>
|
||||
<v-text-field
|
||||
v-model="registration.username"
|
||||
label="Username"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="registration.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mt-3"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="registration.password"
|
||||
label="Password"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mt-3"
|
||||
></v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Personal Information</h3>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
v-model="registration.firstName"
|
||||
label="First Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
v-model="registration.lastName"
|
||||
label="Last Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
v-model="registration.phone"
|
||||
label="Phone Number"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
v-model="registration.country"
|
||||
:items="['USA', 'Canada', 'UK', 'Australia']"
|
||||
label="Country"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mt-3"
|
||||
></v-select>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Preferences</h3>
|
||||
<v-switch
|
||||
v-model="registration.emailNotifications"
|
||||
label="Receive email notifications"
|
||||
density="compact"
|
||||
></v-switch>
|
||||
<v-switch
|
||||
v-model="registration.newsletter"
|
||||
label="Subscribe to newsletter"
|
||||
density="compact"
|
||||
></v-switch>
|
||||
<v-switch
|
||||
v-model="registration.twoFactor"
|
||||
label="Enable two-factor authentication"
|
||||
density="compact"
|
||||
></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="4">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<div class="text-center">
|
||||
<v-icon size="64" color="success" class="mb-4">mdi-check-circle</v-icon>
|
||||
<h3 class="mb-3">Verify Your Email</h3>
|
||||
<p>We've sent a verification link to {{ registration.email }}</p>
|
||||
<p class="text-caption mt-3">Didn't receive the email?</p>
|
||||
<v-btn variant="text" color="primary" size="small">Resend Email</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
@click:next="registrationStep = (parseInt(registrationStep) + 1).toString()"
|
||||
@click:prev="registrationStep = (parseInt(registrationStep) - 1).toString()"
|
||||
:next-text="registrationStep === '4' ? 'Finish' : 'Continue'"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- E-commerce Checkout -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">E-commerce Checkout Process:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-stepper v-model="checkoutStep" editable>
|
||||
<v-stepper-header>
|
||||
<v-stepper-item
|
||||
title="Cart"
|
||||
value="1"
|
||||
icon="mdi-cart"
|
||||
:complete="checkoutStep > '1'"
|
||||
editable
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Shipping"
|
||||
value="2"
|
||||
icon="mdi-truck"
|
||||
:complete="checkoutStep > '2'"
|
||||
editable
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Payment"
|
||||
value="3"
|
||||
icon="mdi-credit-card"
|
||||
:complete="checkoutStep > '3'"
|
||||
editable
|
||||
></v-stepper-item>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-item
|
||||
title="Review"
|
||||
value="4"
|
||||
icon="mdi-check"
|
||||
></v-stepper-item>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Shopping Cart</h3>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in cartItems"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:subtitle="`$${item.price} × ${item.quantity}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="grey-lighten-2">
|
||||
<v-icon>mdi-package-variant</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-divider class="my-3"></v-divider>
|
||||
<div class="d-flex justify-space-between">
|
||||
<strong>Total:</strong>
|
||||
<strong>${{ cartTotal }}</strong>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Shipping Information</h3>
|
||||
<v-text-field label="Full Name" variant="outlined" density="compact"></v-text-field>
|
||||
<v-text-field label="Address" variant="outlined" density="compact" class="mt-3"></v-text-field>
|
||||
<v-row class="mt-3">
|
||||
<v-col cols="8">
|
||||
<v-text-field label="City" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<v-text-field label="ZIP" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Payment Method</h3>
|
||||
<v-radio-group density="compact">
|
||||
<v-radio label="Credit Card" value="card"></v-radio>
|
||||
<v-radio label="PayPal" value="paypal"></v-radio>
|
||||
<v-radio label="Apple Pay" value="apple"></v-radio>
|
||||
</v-radio-group>
|
||||
<v-text-field label="Card Number" variant="outlined" density="compact" class="mt-3"></v-text-field>
|
||||
<v-row class="mt-3">
|
||||
<v-col cols="6">
|
||||
<v-text-field label="Expiry" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field label="CVV" variant="outlined" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item value="4">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Review Your Order</h3>
|
||||
<v-alert type="info" density="compact" class="mb-4">
|
||||
Please review your order before placing it
|
||||
</v-alert>
|
||||
<div class="mb-3">
|
||||
<strong>Items:</strong> {{ cartItems.length }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<strong>Total:</strong> ${{ cartTotal }}
|
||||
</div>
|
||||
<v-btn color="success" block size="large" @click="placeOrder">
|
||||
Place Order
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<v-stepper-actions
|
||||
v-if="checkoutStep !== '4'"
|
||||
@click:next="checkoutStep = (parseInt(checkoutStep) + 1).toString()"
|
||||
@click:prev="checkoutStep = (parseInt(checkoutStep) - 1).toString()"
|
||||
></v-stepper-actions>
|
||||
</v-stepper>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Project Setup Wizard -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Project Setup Wizard:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-stepper v-model="projectStep" direction="vertical" color="primary">
|
||||
<v-stepper-item title="Project Details" value="1">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-text-field label="Project Name" variant="outlined" density="compact"></v-text-field>
|
||||
<v-textarea label="Description" variant="outlined" density="compact" class="mt-3"></v-textarea>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-stepper-actions
|
||||
@click:next="projectStep = '2'"
|
||||
></v-stepper-actions>
|
||||
</v-stepper-item>
|
||||
|
||||
<v-stepper-item title="Team Members" value="2">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p class="mb-3">Add team members to your project</p>
|
||||
<v-text-field
|
||||
label="Email Address"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
append-inner-icon="mdi-plus"
|
||||
></v-text-field>
|
||||
<v-chip-group class="mt-3">
|
||||
<v-chip closable>john@example.com</v-chip>
|
||||
<v-chip closable>alice@example.com</v-chip>
|
||||
</v-chip-group>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-stepper-actions
|
||||
@click:prev="projectStep = '1'"
|
||||
@click:next="projectStep = '3'"
|
||||
></v-stepper-actions>
|
||||
</v-stepper-item>
|
||||
|
||||
<v-stepper-item title="Repository Setup" value="3">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-select
|
||||
:items="['GitHub', 'GitLab', 'Bitbucket']"
|
||||
label="Git Provider"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-select>
|
||||
<v-text-field
|
||||
label="Repository Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mt-3"
|
||||
></v-text-field>
|
||||
<v-checkbox label="Initialize with README" density="compact"></v-checkbox>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-stepper-actions
|
||||
@click:prev="projectStep = '2'"
|
||||
@click:next="completeProjectSetup"
|
||||
next-text="Create Project"
|
||||
></v-stepper-actions>
|
||||
</v-stepper-item>
|
||||
</v-stepper>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const basicStep = ref('1')
|
||||
const iconStep = ref('1')
|
||||
const editStep = ref('1')
|
||||
const nonLinearStep = ref('1')
|
||||
const verticalStep = ref('1')
|
||||
const subtitleStep = ref('1')
|
||||
const colorStep = ref('1')
|
||||
const errorStep = ref('2')
|
||||
const registrationStep = ref('1')
|
||||
const checkoutStep = ref('1')
|
||||
const projectStep = ref('1')
|
||||
|
||||
const handleVerticalComplete = () => {
|
||||
console.log('Vertical stepper completed')
|
||||
verticalStep.value = '1'
|
||||
}
|
||||
|
||||
const fixError = () => {
|
||||
console.log('Error fixed')
|
||||
}
|
||||
|
||||
// Registration data
|
||||
const registration = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
phone: '',
|
||||
country: '',
|
||||
emailNotifications: true,
|
||||
newsletter: false,
|
||||
twoFactor: false
|
||||
})
|
||||
|
||||
// E-commerce checkout data
|
||||
const cartItems = [
|
||||
{ id: 1, name: 'Product A', price: 29.99, quantity: 2 },
|
||||
{ id: 2, name: 'Product B', price: 49.99, quantity: 1 },
|
||||
{ id: 3, name: 'Product C', price: 19.99, quantity: 3 }
|
||||
]
|
||||
|
||||
const cartTotal = computed(() => {
|
||||
return cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2)
|
||||
})
|
||||
|
||||
const placeOrder = () => {
|
||||
console.log('Order placed')
|
||||
alert('Order placed successfully!')
|
||||
}
|
||||
|
||||
const completeProjectSetup = () => {
|
||||
console.log('Project setup completed')
|
||||
projectStep.value = '1'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
53
src/views/TablesPage.vue
Normal file
53
src/views/TablesPage.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import TableBasics from '@/components/tables/TableBasics.vue'
|
||||
import TableDensity from '@/components/tables/TableDensity.vue'
|
||||
import TableFixedHeader from '@/components/tables/TableFixedHeader.vue'
|
||||
import TableHeight from '@/components/tables/TableHeight.vue'
|
||||
import TableTheme from '@/components/tables/TableTheme.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Basic">
|
||||
<TableBasics />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Theme">
|
||||
<VCardText>
|
||||
use <code>theme</code> prop to switch table to the dark theme.
|
||||
</VCardText>
|
||||
<TableTheme />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Density">
|
||||
<VCardText>
|
||||
You can show a dense version of the table by using the <code>density</code> prop.
|
||||
</VCardText>
|
||||
<TableDensity />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Height">
|
||||
<VCardText>
|
||||
You can set the height of the table by using the <code>height</code> prop.
|
||||
</VCardText>
|
||||
<TableHeight />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VCard title="Fixed Header">
|
||||
<VCardText>
|
||||
You can fix the header of table by using the <code>fixed-header</code> prop.
|
||||
</VCardText>
|
||||
<TableFixedHeader />
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
837
src/views/TabsPage.vue
Normal file
837
src/views/TabsPage.vue
Normal file
@@ -0,0 +1,837 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Tabs</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="basicTab">
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="basicTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab One</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Two</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Three</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Tabs with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tabs with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="iconTab">
|
||||
<v-tab value="phone">
|
||||
<v-icon start>mdi-phone</v-icon>
|
||||
Phone
|
||||
</v-tab>
|
||||
<v-tab value="email">
|
||||
<v-icon start>mdi-email</v-icon>
|
||||
Email
|
||||
</v-tab>
|
||||
<v-tab value="map">
|
||||
<v-icon start>mdi-map-marker</v-icon>
|
||||
Map
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="iconTab">
|
||||
<v-tabs-window-item value="phone">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon>mdi-phone</v-icon>
|
||||
<span>Phone: +1 234 567 8900</span>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="email">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon>mdi-email</v-icon>
|
||||
<span>Email: contact@example.com</span>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="map">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon>mdi-map-marker</v-icon>
|
||||
<span>Address: 123 Main St, City</span>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Icon Only Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Icon Only Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="iconOnlyTab">
|
||||
<v-tab value="home">
|
||||
<v-icon>mdi-home</v-icon>
|
||||
</v-tab>
|
||||
<v-tab value="heart">
|
||||
<v-icon>mdi-heart</v-icon>
|
||||
</v-tab>
|
||||
<v-tab value="account">
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-tab>
|
||||
<v-tab value="settings">
|
||||
<v-icon>mdi-cog</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="iconOnlyTab">
|
||||
<v-tabs-window-item value="home">
|
||||
<v-card flat>
|
||||
<v-card-text>Home Content</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="heart">
|
||||
<v-card flat>
|
||||
<v-card-text>Favorites Content</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="account">
|
||||
<v-card flat>
|
||||
<v-card-text>Account Content</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="settings">
|
||||
<v-card flat>
|
||||
<v-card-text>Settings Content</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Colored Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="colorTab" bg-color="primary">
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="colorTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for primary tab</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for tab two</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for tab three</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
|
||||
<v-divider class="my-6"></v-divider>
|
||||
|
||||
<v-tabs v-model="colorTab2" bg-color="secondary">
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Grow Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Grow Tabs (Full Width)</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="growTab" grow>
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="growTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>Tabs grow to fill available space</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Two</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Three</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Centered Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Centered Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="centerTab" centered>
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="centerTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>Centered tabs alignment</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Two</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Three</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Right Aligned Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Right Aligned Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="rightTab" align-tabs="end">
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="rightTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>Right-aligned tabs</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Two</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Three</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Vertical Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Vertical Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex">
|
||||
<v-tabs v-model="verticalTab" direction="vertical" color="primary">
|
||||
<v-tab value="one">
|
||||
<v-icon start>mdi-account</v-icon>
|
||||
Profile
|
||||
</v-tab>
|
||||
<v-tab value="two">
|
||||
<v-icon start>mdi-cog</v-icon>
|
||||
Settings
|
||||
</v-tab>
|
||||
<v-tab value="three">
|
||||
<v-icon start>mdi-bell</v-icon>
|
||||
Notifications
|
||||
</v-tab>
|
||||
<v-tab value="four">
|
||||
<v-icon start>mdi-shield</v-icon>
|
||||
Security
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="verticalTab" class="flex-grow-1">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Profile Settings</h3>
|
||||
<p>Manage your profile information and preferences.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">General Settings</h3>
|
||||
<p>Configure application settings and preferences.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Notification Preferences</h3>
|
||||
<p>Control how and when you receive notifications.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="four">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Security Settings</h3>
|
||||
<p>Manage your account security and privacy settings.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Disabled Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Disabled Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="disabledTab">
|
||||
<v-tab value="one">Active Tab</v-tab>
|
||||
<v-tab value="two" disabled>Disabled Tab</v-tab>
|
||||
<v-tab value="three">Another Active</v-tab>
|
||||
<v-tab value="four" disabled>Also Disabled</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="disabledTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>This tab is active</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Another active tab</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Dynamic Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Dynamic Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="mb-4">
|
||||
<v-btn color="primary" @click="addTab" class="mr-2">
|
||||
<v-icon start>mdi-plus</v-icon>
|
||||
Add Tab
|
||||
</v-btn>
|
||||
<v-btn color="error" @click="removeTab" :disabled="dynamicTabs.length <= 1">
|
||||
<v-icon start>mdi-minus</v-icon>
|
||||
Remove Tab
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-tabs v-model="dynamicTab">
|
||||
<v-tab v-for="tab in dynamicTabs" :key="tab.value" :value="tab.value">
|
||||
{{ tab.title }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="dynamicTab">
|
||||
<v-tabs-window-item v-for="tab in dynamicTabs" :key="tab.value" :value="tab.value">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for {{ tab.title }}</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Scrollable Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Scrollable Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="scrollTab" show-arrows>
|
||||
<v-tab v-for="i in 15" :key="i" :value="i">
|
||||
Tab {{ i }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="scrollTab">
|
||||
<v-tabs-window-item v-for="i in 15" :key="i" :value="i">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab {{ i }}</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Fixed Tabs -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Fixed Tabs</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="fixedTab" fixed-tabs>
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="fixedTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>Fixed width tabs</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Two</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Three</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Tabs with Slider Color -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Custom Slider Color</v-card-title>
|
||||
<v-card-text>
|
||||
<v-tabs v-model="sliderTab" slider-color="success">
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="sliderTab">
|
||||
<v-tabs-window-item value="one">
|
||||
<v-card flat>
|
||||
<v-card-text>Custom green slider</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="two">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Two</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="three">
|
||||
<v-card flat>
|
||||
<v-card-text>Content for Tab Three</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
|
||||
<v-divider class="my-6"></v-divider>
|
||||
|
||||
<v-tabs v-model="sliderTab2" slider-color="error">
|
||||
<v-tab value="one">Tab One</v-tab>
|
||||
<v-tab value="two">Tab Two</v-tab>
|
||||
<v-tab value="three">Tab Three</v-tab>
|
||||
</v-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Dashboard Tabs -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Dashboard Navigation:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-tabs v-model="dashboardTab" bg-color="primary">
|
||||
<v-tab value="overview">
|
||||
<v-icon start>mdi-view-dashboard</v-icon>
|
||||
Overview
|
||||
</v-tab>
|
||||
<v-tab value="analytics">
|
||||
<v-icon start>mdi-chart-line</v-icon>
|
||||
Analytics
|
||||
</v-tab>
|
||||
<v-tab value="reports">
|
||||
<v-icon start>mdi-file-document</v-icon>
|
||||
Reports
|
||||
</v-tab>
|
||||
<v-tab value="users">
|
||||
<v-icon start>mdi-account-group</v-icon>
|
||||
Users
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="dashboardTab">
|
||||
<v-tabs-window-item value="overview">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Overview</h3>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card color="primary">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">2,453</div>
|
||||
<div class="text-caption">Total Users</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card color="success">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">$12,450</div>
|
||||
<div class="text-caption">Revenue</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card color="info">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">156</div>
|
||||
<div class="text-caption">Active Sessions</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card color="warning">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h4">98.5%</div>
|
||||
<div class="text-caption">Uptime</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="analytics">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Analytics Data</h3>
|
||||
<p>Detailed analytics and metrics would be displayed here.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="reports">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">Reports</h3>
|
||||
<p>Generated reports and documents would be listed here.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="users">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h3 class="mb-4">User Management</h3>
|
||||
<p>User list and management tools would be displayed here.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Profile Tabs -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">User Profile:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center mb-4">
|
||||
<v-avatar size="64" color="primary" class="mr-4">JD</v-avatar>
|
||||
<div>
|
||||
<div class="text-h6">John Doe</div>
|
||||
<div class="text-caption">john.doe@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-tabs v-model="profileTab" density="compact">
|
||||
<v-tab value="posts">Posts</v-tab>
|
||||
<v-tab value="about">About</v-tab>
|
||||
<v-tab value="photos">Photos</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="profileTab">
|
||||
<v-tabs-window-item value="posts">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p>Recent posts and activity...</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="about">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p><strong>Bio:</strong> Web developer and designer</p>
|
||||
<p><strong>Location:</strong> San Francisco, CA</p>
|
||||
<p><strong>Joined:</strong> January 2023</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="photos">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p>Photo gallery would be displayed here...</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Settings Tabs -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Settings Panel:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-tabs v-model="settingsTab" direction="vertical" color="primary">
|
||||
<v-tab value="general">
|
||||
<v-icon start>mdi-cog</v-icon>
|
||||
General
|
||||
</v-tab>
|
||||
<v-tab value="privacy">
|
||||
<v-icon start>mdi-lock</v-icon>
|
||||
Privacy
|
||||
</v-tab>
|
||||
<v-tab value="notifications">
|
||||
<v-icon start>mdi-bell</v-icon>
|
||||
Notifications
|
||||
</v-tab>
|
||||
<v-tab value="appearance">
|
||||
<v-icon start>mdi-palette</v-icon>
|
||||
Appearance
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="settingsTab">
|
||||
<v-tabs-window-item value="general">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h4 class="mb-3">General Settings</h4>
|
||||
<v-switch label="Enable feature X" density="compact"></v-switch>
|
||||
<v-switch label="Auto-save" density="compact"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="privacy">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h4 class="mb-3">Privacy Settings</h4>
|
||||
<v-switch label="Profile is public" density="compact"></v-switch>
|
||||
<v-switch label="Allow messages" density="compact"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="notifications">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h4 class="mb-3">Notification Preferences</h4>
|
||||
<v-switch label="Email notifications" density="compact"></v-switch>
|
||||
<v-switch label="Push notifications" density="compact"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="appearance">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h4 class="mb-3">Appearance Settings</h4>
|
||||
<v-switch label="Dark mode" density="compact"></v-switch>
|
||||
<v-switch label="Compact mode" density="compact"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Product Tabs -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Product Details:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<div class="bg-grey-lighten-3 pa-8 text-center" style="height: 200px;">
|
||||
<v-icon size="100" color="grey">mdi-package-variant</v-icon>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8">
|
||||
<h3 class="mb-2">Product Name</h3>
|
||||
<div class="text-h5 mb-4 text-primary">$99.99</div>
|
||||
|
||||
<v-tabs v-model="productTab" density="compact">
|
||||
<v-tab value="description">Description</v-tab>
|
||||
<v-tab value="specs">Specifications</v-tab>
|
||||
<v-tab value="reviews">Reviews (12)</v-tab>
|
||||
<v-tab value="shipping">Shipping</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-window v-model="productTab">
|
||||
<v-tabs-window-item value="description">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p>This is a detailed product description with features and benefits.</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="specs">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<ul>
|
||||
<li>Dimension: 10" x 8" x 2"</li>
|
||||
<li>Weight: 1.5 lbs</li>
|
||||
<li>Material: Premium quality</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="reviews">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<div class="d-flex align-center mb-2">
|
||||
<v-rating :model-value="4.5" readonly density="compact" size="small"></v-rating>
|
||||
<span class="ml-2">4.5 out of 5</span>
|
||||
</div>
|
||||
<p>Customer reviews would be displayed here...</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
<v-tabs-window-item value="shipping">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<p>Free shipping on orders over $50</p>
|
||||
<p>Estimated delivery: 3-5 business days</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const basicTab = ref('one')
|
||||
const iconTab = ref('phone')
|
||||
const iconOnlyTab = ref('home')
|
||||
const colorTab = ref('one')
|
||||
const colorTab2 = ref('one')
|
||||
const growTab = ref('one')
|
||||
const centerTab = ref('one')
|
||||
const rightTab = ref('one')
|
||||
const verticalTab = ref('one')
|
||||
const disabledTab = ref('one')
|
||||
const dynamicTab = ref(1)
|
||||
const scrollTab = ref(1)
|
||||
const fixedTab = ref('one')
|
||||
const sliderTab = ref('one')
|
||||
const sliderTab2 = ref('one')
|
||||
const dashboardTab = ref('overview')
|
||||
const profileTab = ref('posts')
|
||||
const settingsTab = ref('general')
|
||||
const productTab = ref('description')
|
||||
|
||||
const dynamicTabs = ref([
|
||||
{ title: 'Tab 1', value: 1 },
|
||||
{ title: 'Tab 2', value: 2 },
|
||||
{ title: 'Tab 3', value: 3 }
|
||||
])
|
||||
|
||||
let tabCounter = 4
|
||||
|
||||
const addTab = () => {
|
||||
dynamicTabs.value.push({
|
||||
title: `Tab ${tabCounter}`,
|
||||
value: tabCounter
|
||||
})
|
||||
tabCounter++
|
||||
}
|
||||
|
||||
const removeTab = () => {
|
||||
if (dynamicTabs.value.length > 1) {
|
||||
dynamicTabs.value.pop()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
678
src/views/TooltipsPage.vue
Normal file
678
src/views/TooltipsPage.vue
Normal file
@@ -0,0 +1,678 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 mb-6">Tooltips</h1>
|
||||
</v-col>
|
||||
|
||||
<!-- Basic Tooltips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Basic Tooltips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip text="This is a tooltip">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Hover Me</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Another tooltip">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="secondary" v-bind="props">Hover Me Too</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Tooltip on icon">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-information" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Tooltip Positions -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tooltip Positions</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column align-center gap-6">
|
||||
<div>
|
||||
<v-tooltip text="Top tooltip" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Top</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-6">
|
||||
<v-tooltip text="Left tooltip" location="left">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Left</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Right tooltip" location="right">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Right</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-tooltip text="Bottom tooltip" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Bottom</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Tooltip Colors -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Colored Tooltips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip text="Primary tooltip" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Primary</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Secondary tooltip" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="secondary" v-bind="props">Secondary</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Success tooltip" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="success" v-bind="props">Success</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Warning tooltip" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="warning" v-bind="props">Warning</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Error tooltip" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="error" v-bind="props">Error</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Tooltips on Different Elements -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tooltips on Different Elements</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4 align-center">
|
||||
<!-- Button -->
|
||||
<v-tooltip text="Button tooltip">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Button</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<!-- Icon Button -->
|
||||
<v-tooltip text="Settings">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-cog" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<!-- Icon -->
|
||||
<v-tooltip text="Information icon">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon size="large" v-bind="props">mdi-information</v-icon>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<!-- Chip -->
|
||||
<v-tooltip text="Click to remove">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip v-bind="props" closable color="primary">Chip</v-chip>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<!-- Avatar -->
|
||||
<v-tooltip text="John Doe">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-avatar color="primary" v-bind="props">JD</v-avatar>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<!-- Text -->
|
||||
<v-tooltip text="This is hoverable text">
|
||||
<template v-slot:activator="{ props }">
|
||||
<span v-bind="props" class="text-primary" style="cursor: help; text-decoration: underline dotted;">
|
||||
Hover over text
|
||||
</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Multi-line Tooltips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Multi-line Tooltips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip location="top" max-width="300">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Short Tooltip</v-btn>
|
||||
</template>
|
||||
<div>
|
||||
This is a longer tooltip with multiple lines of text.
|
||||
It can contain detailed information.
|
||||
</div>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip location="top" max-width="400">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Detailed Info</v-btn>
|
||||
</template>
|
||||
<div>
|
||||
<div class="font-weight-bold mb-2">Advanced Tooltip</div>
|
||||
<div>This tooltip contains formatted content:</div>
|
||||
<ul class="mt-2">
|
||||
<li>Feature 1</li>
|
||||
<li>Feature 2</li>
|
||||
<li>Feature 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Tooltips with Icons -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tooltips with Icons</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-delete" color="error" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon size="small">mdi-delete</v-icon>
|
||||
<span>Delete Item</span>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-pencil" color="primary" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon size="small">mdi-pencil</v-icon>
|
||||
<span>Edit Item</span>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-download" color="success" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon size="small">mdi-download</v-icon>
|
||||
<span>Download File</span>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-share" color="info" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-icon size="small">mdi-share</v-icon>
|
||||
<span>Share</span>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Open Delay -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tooltip Open Delay</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip text="Instant" :open-delay="0">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">No Delay</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="500ms delay" :open-delay="500">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">500ms Delay</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="1000ms delay" :open-delay="1000">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">1000ms Delay</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Disabled Tooltips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Disabled Tooltips</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip text="This tooltip is enabled">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="primary" v-bind="props">Enabled Tooltip</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="This tooltip is disabled" :disabled="true">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn color="secondary" v-bind="props">Disabled Tooltip</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="This tooltip won't show on disabled button">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn disabled v-bind="props">Disabled Button</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Open on Click -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tooltip Activation</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip text="Opens on hover (default)">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Hover</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip v-model="clickTooltip" text="Click to toggle" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" @click="clickTooltip = !clickTooltip">Click</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip v-model="manualTooltip" text="Manually controlled">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" @click="manualTooltip = !manualTooltip">
|
||||
Manual Control
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Arrow Tooltips -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Tooltips with Arrows</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<v-tooltip text="Tooltip with arrow" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Arrow Top</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Tooltip with arrow" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Arrow Bottom</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Tooltip with arrow" location="start">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Arrow Start</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Tooltip with arrow" location="end">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props">Arrow End</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Real-World Examples -->
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-title>Real-World Examples</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Toolbar with Tooltips -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Toolbar with Action Tooltips:</p>
|
||||
<v-toolbar density="compact" color="primary">
|
||||
<v-tooltip text="Save (Ctrl+S)">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-content-save" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Open File (Ctrl+O)">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-folder-open" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Print (Ctrl+P)">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-printer" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-divider vertical class="mx-2"></v-divider>
|
||||
|
||||
<v-tooltip text="Undo (Ctrl+Z)">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-undo" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Redo (Ctrl+Y)">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-redo" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-tooltip text="Settings">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-cog" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Help">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-help-circle" v-bind="props"></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-toolbar>
|
||||
</v-col>
|
||||
|
||||
<!-- Form Fields with Info Tooltips -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Form with Info Tooltips:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
label="Username"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
>
|
||||
<template v-slot:append-inner>
|
||||
<v-tooltip location="top" max-width="300">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon v-bind="props" size="small">mdi-information</v-icon>
|
||||
</template>
|
||||
<div>Username must be 3-20 characters and can only contain letters, numbers, and underscores.</div>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<v-text-field
|
||||
label="Email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mt-4"
|
||||
>
|
||||
<template v-slot:append-inner>
|
||||
<v-tooltip location="top" max-width="300">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon v-bind="props" size="small">mdi-information</v-icon>
|
||||
</template>
|
||||
<div>We'll never share your email with anyone else.</div>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<v-text-field
|
||||
label="Password"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mt-4"
|
||||
>
|
||||
<template v-slot:append-inner>
|
||||
<v-tooltip location="top" max-width="300">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon v-bind="props" size="small">mdi-information</v-icon>
|
||||
</template>
|
||||
<div>
|
||||
<div class="font-weight-bold mb-1">Password Requirements:</div>
|
||||
<ul>
|
||||
<li>At least 8 characters</li>
|
||||
<li>One uppercase letter</li>
|
||||
<li>One number</li>
|
||||
<li>One special character</li>
|
||||
</ul>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Status Icons with Tooltips -->
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-3">Status Indicators:</p>
|
||||
<v-card variant="outlined">
|
||||
<v-list>
|
||||
<v-list-item title="Server Status">
|
||||
<template v-slot:append>
|
||||
<v-tooltip text="Server is online and running normally">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon color="success" v-bind="props">mdi-check-circle</v-icon>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Database Connection">
|
||||
<template v-slot:append>
|
||||
<v-tooltip text="Connection is slow. Response time: 2.5s">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon color="warning" v-bind="props">mdi-alert</v-icon>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="API Service">
|
||||
<template v-slot:append>
|
||||
<v-tooltip text="Service is currently unavailable. Last error: Connection timeout">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon color="error" v-bind="props">mdi-close-circle</v-icon>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item title="Cache Service">
|
||||
<template v-slot:append>
|
||||
<v-tooltip text="Checking status...">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
size="20"
|
||||
width="2"
|
||||
color="info"
|
||||
v-bind="props"
|
||||
></v-progress-circular>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- User Avatars with Tooltips -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Team Members:</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<v-tooltip v-for="member in teamMembers" :key="member.name" location="top">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-avatar :color="member.color" v-bind="props" style="cursor: pointer;">
|
||||
{{ member.initials }}
|
||||
</v-avatar>
|
||||
</template>
|
||||
<div>
|
||||
<div class="font-weight-bold">{{ member.name }}</div>
|
||||
<div class="text-caption">{{ member.role }}</div>
|
||||
<div class="text-caption">{{ member.email }}</div>
|
||||
</div>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<!-- Data Table with Tooltips -->
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 mb-3">Data Table with Action Tooltips:</p>
|
||||
<v-table density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Progress</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="task in tasks" :key="task.name">
|
||||
<td>{{ task.name }}</td>
|
||||
<td>
|
||||
<v-chip :color="task.statusColor" size="small">
|
||||
{{ task.status }}
|
||||
</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<v-progress-linear
|
||||
:model-value="task.progress"
|
||||
:color="task.statusColor"
|
||||
height="6"
|
||||
></v-progress-linear>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<v-tooltip text="View Details">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
icon="mdi-eye"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Edit Task">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
icon="mdi-pencil"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Delete Task">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
color="error"
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const clickTooltip = ref(false)
|
||||
const manualTooltip = ref(false)
|
||||
|
||||
const teamMembers = [
|
||||
{ name: 'John Doe', role: 'Frontend Developer', email: 'john@example.com', initials: 'JD', color: 'primary' },
|
||||
{ name: 'Alice Smith', role: 'Backend Developer', email: 'alice@example.com', initials: 'AS', color: 'secondary' },
|
||||
{ name: 'Bob Johnson', role: 'UI/UX Designer', email: 'bob@example.com', initials: 'BJ', color: 'success' },
|
||||
{ name: 'Maria Garcia', role: 'Project Manager', email: 'maria@example.com', initials: 'MG', color: 'info' },
|
||||
{ name: 'Tom Chen', role: 'DevOps Engineer', email: 'tom@example.com', initials: 'TC', color: 'warning' }
|
||||
]
|
||||
|
||||
const tasks = [
|
||||
{ name: 'Setup Database', status: 'Completed', statusColor: 'success', progress: 100 },
|
||||
{ name: 'API Development', status: 'In Progress', statusColor: 'primary', progress: 65 },
|
||||
{ name: 'UI Design', status: 'In Progress', statusColor: 'primary', progress: 45 },
|
||||
{ name: 'Testing', status: 'Pending', statusColor: 'warning', progress: 10 }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
16
src/views/TypographyPage.vue
Normal file
16
src/views/TypographyPage.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import TypographyHeadlines from '@/components/typography/TypographyHeadlines.vue'
|
||||
import TypographyTexts from '@/components/typography/TypographyTexts.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<TypographyHeadlines />
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<TypographyTexts />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user