در بخش قبل با تعدادی از UI Component های vutify آشنا شدیم. در ادامه به بررسی و یادگیری تعدادی دیگر از این UI Componentها می‌پردازیم.
در این مثال کاربر ابتدا فقط یک صفحه حاوی یک دکمه را مشاهده می‌نماید که پس از کلیک بر روی دکمه، یک dialog box برای او ظاهر میشود. همانطور که گفته شد این dialog box می‌تواند حاوی اطلاعات مختلفی باشد.
این کامپوننت یک کامپوننت همه کاره است. cardها میتوانند حاوی محتوا و اقداماتی در مورد یک موضوع واحد باشند. card ها ممکن است حاوی یک عکس، متن و یک لینک در مورد یک موضوع باشند.
هر card دارای این سه جزء یا کامپوننت اساسی است: v-card-title , v-card-text , v-card-action که به ترتیب حاوی عنوان card ، متن card و عملیاتی که انجام میدهد میباشد.
عناصر تشکیل دهنده یک card میتوانند به صورت زیر باشند:
قطعه کد زیر یک نمونه ساده از ایجاد یک card را به ما نشان میدهد.
<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-img height="200px" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg">
<v-container fill-height fluid>
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<span>Top 10 Australian beaches</span>
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<div>
<span>Number 10</span><br>
<span>Whitehaven Beach</span><br>
<span>Whitsunday Island, Whitsunday Islands</span>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div> 
از این کامپوننت جهت ساخت اسلایدر میتوان استفاده کرد . اسلایدرها معمولا میتوانند حاوی عکس و یا متن و یا ترکیبی از هر دو باشند. این کامپوننت دقیقا مشابه carousel در bootstrap عمل میکند .
<div id="app">
<v-app id="inspire">
<v-carousel>
<v-carousel-item v-for="(color, i) in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-layout align-center fill-height justify-center>
<div>Slide {{ i + 1 }}</div>
</v-layout>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div> 
از این کامپوننت برای انتقال اطلاعات به صورت قطعه‌های کوچک استفاده میشود. chipها دارای چهار نوع اولیه می‌باشند. منظم، با آیکون، با پرتره و قابل تعویض.
در پایین با یک مثال، این چهار نوع اولیه نمایش داده شده‌اند.
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap>
<v-flex md6 sm12>
<div>
<v-chip close>Example Chip</v-chip>
</div>
<div>
<v-chip>Example Chip</v-chip>
</div>
</v-flex>
<v-flex md6 sm12 xs12>
<div>
<v-chip close>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Trevor Hansen
</v-chip>
</div>
<div>
<v-chip>
<v-avatar>A</v-avatar>
ANZ Bank
</v-chip>
</div>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div> 
این کامپوننت برای نشان دادن اطلاعات مورد استفاده قرار می‌گیرد و به ما این اجازه را میدهد که بتوانیم چگونگی نمایش اطلاعات را سازماندهی کنیم. این امکانات عبارتند از مرتب سازی، جستجو، صفحه بندی و انتخاب اطلاعات. جهت نمایش این اطلاعات میتوان از card ها و یا جداول استفاده نمود.
در مثال پایین جهت نمایش اطلاعات از card ها استفاده شده‌است:
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-md>
<v-data-iterator
:items="items"
:rows-per-page-items="rowsPerPageItems"
:pagination.sync="pagination" content-tag="v-layout" row wrap>
<template v-slot:item="props">
<v-card>
<v-card-title><h4>{{ props.item.name }}</h4></v-card-title>
<v-divider></v-divider>
<v-list dense>
<v-list-tile>
<v-list-tile-content>Calories:</v-list-tile-content>
<v-list-tile-content>{{ props.item.calories }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>Fat:</v-list-tile-content>
<v-list-tile-content>{{ props.item.fat }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>Carbs:</v-list-tile-content>
<v-list-tile-content>{{ props.item.carbs }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>Protein:</v-list-tile-content>
<v-list-tile-content>{{ props.item.protein }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>Sodium:</v-list-tile-content>
<v-list-tile-content>{{ props.item.sodium }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>Calcium:</v-list-tile-content>
<v-list-tile-content>{{ props.item.calcium }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content>Iron:</v-list-tile-content>
<v-list-tile-content>{{ props.item.iron }}</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</template>
</v-data-iterator>
</v-container>
</v-app>
</div> new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts: [
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
}
]
}
}
}) 
این کامپوننت جهت نمایش اطلاعات، به صورت یک جدول مورد استفاده قرار می‌گیرد. امکاناتی که برای این جداول میتوان در نظر گرفت عبارتند از مرتب سازی عناصر جدول، جستجوی عناصر جدول، صفحه بندی جدول در صورتیکه اطلاعات موجود، بیش از یک صفحه باشند؛ ویرایش خطی، راهنمایی‌های سربرگ و انتخاب ردیفهای جدول. جداول استاندارد حاوی اطلاعات، بدون هیچ گونه قابلیت اضافی هستند.
برای کار با این کامپوننت میتوان از تنظیمات بسیار زیادی استفاده کرد که سعی شده در مثال پایین تعدادی از این تنظیمات استفاده شود.
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="desserts">
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td>{{ props.item.calories }}</td>
<td>{{ props.item.fat }}</td>
<td>{{ props.item.carbs }}</td>
<td>{{ props.item.protein }}</td>
<td>{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-app>
</div> new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%'
}
]
}
}
})
این کامپوننت به کاربران در مورد یک کار یا موضوع خاص اطلاع میدهد و ممکن است حاوی اطلاعات بحرانی، تصمیم گیرنده، یا شامل چندین وظیفه باشد.
این کامپوننت حاوی دو بخش میباشد، یکی برای فعال کردن dialog و دیگری جهت نمایش محتوای آن (به طور پیش فرض). معمولا از این کامپوننت جهت نمایش خطاهایی که روند اجرای برنامه را متوقف میکنند و اطلاعاتی که نیاز به یک کار خاص، تصمیم گیری یا تایید کاربر دارند مانند سیاست‌های حفظ حریم خصوصی استفاده میشود.
<div id="app">
<v-app id="inspire">
<div>
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2" dark v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-card-title primary-title>
Privacy Policy
</v-card-title>
<v-card-text>
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div> 
این کامپوننت برای کاهش فضای عمودی برای زمانیکه مقدار زیادی اطلاعات وجود دارد می‌تواند مفید باشد.
لازم به ذکر است که به طور پیش فرض در یک زمان تنها یک پنل عمودی می‌تواند باز باشد.
<div id="app">
<v-app id="inspire">
<v-expansion-panel>
<v-expansion-panel-content v-for="(item,i) in 5" :key="i">
<template v-slot:header>
<div>Item</div>
</template>
<v-card>
<v-card-text>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.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-app>
</div> 
