Skip to content

Commit

Permalink
docs(VCard): update all examples, rearrange content
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnleider
johnleider committed Apr 13, 2024
1 parent da06d21 commit 04400f0
Show file tree
Hide file tree
Showing 26 changed files with 518 additions and 396 deletions.
9 changes: 5 additions & 4 deletions packages/docs/src/examples/v-card/basics-combine.vue
View file
@@ -1,15 +1,16 @@
<template>
<v-card
class="mx-auto"
prepend-icon="mdi-home"
prepend-icon="$vuetify"
subtitle="The #1 Vue UI Library"
width="400"
>
<template v-slot:title>
This is a title
<span class="font-weight-black">Welcome to Vuetify</span>
</template>

<v-card-text>
This is content
<v-card-text class="bg-surface-light pt-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</v-card-text>
</v-card>
</template>
85 changes: 45 additions & 40 deletions packages/docs/src/examples/v-card/basics-content.vue
View file
@@ -1,42 +1,47 @@
<template>
<div class="d-flex align-center flex-column">
<div class="text-subtitle-2">With props</div>

<v-card
subtitle="This is a subtitle"
text="This is content"
title="This is a title"
width="400"
></v-card>

<div class="mt-4 text-subtitle-2">With slots</div>

<v-card width="400">
<template v-slot:title>
This is a title
</template>

<template v-slot:subtitle>
This is a subtitle
</template>

<template v-slot:text>
This is content
</template>
</v-card>

<div class="mt-4 text-subtitle-2">With markup</div>

<v-card width="400">
<v-card-item>
<v-card-title>This is a title</v-card-title>

<v-card-subtitle>This is a subtitle</v-card-subtitle>
</v-card-item>

<v-card-text>
This is content
</v-card-text>
</v-card>
</div>
<v-row>
<v-col cols="12" md="4">
<v-card
subtitle="This is a card subtitle"
text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!"
title="This is a title"
></v-card>

<div class="text-center text-caption">Using Props Only</div>
</v-col>

<v-col cols="12" md="4">
<v-card>
<template v-slot:title>
This is a title
</template>

<template v-slot:subtitle>
This is a card subtitle
</template>

<template v-slot:text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
</template>
</v-card>

<div class="text-center text-caption">Using Slots Only</div>
</v-col>

<v-col cols="12" md="4">
<v-card>
<v-card-item>
<v-card-title>This is a title</v-card-title>

<v-card-subtitle>This is a card subtitle</v-card-subtitle>
</v-card-item>

<v-card-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
</v-card-text>
</v-card>

<div class="text-center text-caption">Using Markup Only</div>
</v-col>
</v-row>
</template>
42 changes: 18 additions & 24 deletions packages/docs/src/examples/v-card/misc-card-reveal.vue
View file
Expand Up @@ -5,45 +5,48 @@
>
<v-card-text>
<div>Word of the Day</div>
<p class="text-h4 text--primary">
el·ee·mos·y·nar·y
</p>

<p class="text-h4 font-weight-black">el·ee·mos·y·nar·y</p>

<p>adjective</p>
<div class="text--primary">

<div class="text-medium-emphasis">
relating to or dependent on charity; charitable; charitable donations. Pertaining to alms.<br>
"an eleemosynary educational institution."
</div>
</v-card-text>

<v-card-actions>
<v-btn
color="teal-accent-4"
text="Learn More"
variant="text"
@click="reveal = true"
>
Learn More
</v-btn>
></v-btn>
</v-card-actions>

<v-expand-transition>
<v-card
v-if="reveal"
class="v-card--reveal"
style="height: 100%;"
class="position-absolute w-100"
height="100%"
style="bottom: 0;"
>
<v-card-text class="pb-0">
<p class="text-h4 text--primary">
Origin
<p class="text-h4">Origin</p>

<p class="text-medium-emphasis">
late 16th century (as a noun denoting a place where alms were distributed): from medieval Latin eleemosynarius, from late Latin eleemosyna ‘alms’, from Greek eleēmosunē ‘compassion’
</p>
<p>late 16th century (as a noun denoting a place where alms were distributed): from medieval Latin eleemosynarius, from late Latin eleemosyna ‘alms’, from Greek eleēmosunē ‘compassion’ </p>
</v-card-text>

<v-card-actions class="pt-0">
<v-btn
color="teal-accent-4"
text="Close"
variant="text"
@click="reveal = false"
>
Close
</v-btn>
></v-btn>
</v-card-actions>
</v-card>
</v-expand-transition>
Expand All @@ -63,12 +66,3 @@
}),
}
</script>

<style>
.v-card--reveal {
bottom: 0;
opacity: 1 !important;
position: absolute;
width: 100%;
}
</style>
84 changes: 37 additions & 47 deletions packages/docs/src/examples/v-card/misc-content-wrapping.vue
View file
@@ -1,55 +1,45 @@
<template>
<v-container>
<v-row justify="space-around">
<v-card width="400">
<v-img
class="text-white"
height="200"
src="https://cdn.vuetifyjs.com/docs/images/cards/purple-flowers.jpg"
cover
>
<v-toolbar
color="rgba(0, 0, 0, 0)"
theme="dark"
>
<template v-slot:prepend>
<v-btn icon="$menu"></v-btn>
</template>
<v-card class="mx-auto" max-width="400">
<v-img
color="surface-variant"
height="200"
src="https://cdn.vuetifyjs.com/docs/images/cards/purple-flowers.jpg"
cover
>
<v-toolbar color="transparent">
<template v-slot:prepend>
<v-btn icon="$menu"></v-btn>
</template>

<v-toolbar-title class="text-h6">
Messages
</v-toolbar-title>
<v-toolbar-title class="text-h6" text="Messages"></v-toolbar-title>

<template v-slot:append>
<v-btn icon="mdi-dots-vertical"></v-btn>
</template>
</v-toolbar>
</v-img>
<template v-slot:append>
<v-btn icon="mdi-dots-vertical"></v-btn>
</template>
</v-toolbar>
</v-img>

<v-card-text>
<div class="font-weight-bold ms-1 mb-2">
Today
</div>
<v-card-text>
<div class="font-weight-bold ms-1 mb-2">Today</div>

<v-timeline align="start" density="compact">
<v-timeline-item
v-for="message in messages"
:key="message.time"
:dot-color="message.color"
size="x-small"
>
<div class="mb-4">
<div class="font-weight-normal">
<strong>{{ message.from }}</strong> @{{ message.time }}
</div>
<div>{{ message.message }}</div>
</div>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
</v-row>
</v-container>
<v-timeline align="start" density="compact">
<v-timeline-item
v-for="message in messages"
:key="message.time"
:dot-color="message.color"
size="x-small"
>
<div class="mb-4">
<div class="font-weight-normal">
<strong>{{ message.from }}</strong> @{{ message.time }}
</div>

<div>{{ message.message }}</div>
</div>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
</template>

<script setup>
Expand Down
6 changes: 2 additions & 4 deletions packages/docs/src/examples/v-card/misc-custom-actions.vue
View file
Expand Up @@ -20,10 +20,8 @@
<v-card-actions>
<v-btn
color="orange-lighten-2"
variant="text"
>
Explore
</v-btn>
text="Explore"
></v-btn>

<v-spacer></v-spacer>

Expand Down
40 changes: 40 additions & 0 deletions packages/docs/src/examples/v-card/misc-earnings-goal.vue
View file
@@ -0,0 +1,40 @@
<template>
<v-card class="mx-auto" max-width="500" border flat>
<v-list-item class="px-6" height="88">
<template v-slot:prepend>
<v-avatar color="surface-light" size="32">🎯</v-avatar>
</template>

<template v-slot:title> Set an earnings goal. </template>

<template v-slot:append>
<v-btn
class="text-none"
color="primary"
text="Create goal"
variant="text"
slim
></v-btn>
</template>
</v-list-item>

<v-divider></v-divider>

<v-card-text class="text-medium-emphasis pa-6">
<div class="text-h6 mb-6">Earn my first $100</div>

<div class="text-h4 font-weight-black mb-4">0%</div>

<v-progress-linear
bg-color="surface-variant"
class="mb-6"
color="primary"
height="10"
model-value="2"
rounded="pill"
></v-progress-linear>

<div>$0 of $100 earned — 7 days left</div>
</v-card-text>
</v-card>
</template>
18 changes: 15 additions & 3 deletions packages/docs/src/examples/v-card/misc-grids.vue
View file
Expand Up @@ -24,11 +24,23 @@
<v-card-actions>
<v-spacer></v-spacer>

<v-btn color="surface-variant" icon="mdi-heart" size="small" variant="text"></v-btn>
<v-btn
color="medium-emphasis"
icon="mdi-heart"
size="small"
></v-btn>

<v-btn color="surface-variant" icon="mdi-bookmark" size="small" variant="text"></v-btn>
<v-btn
color="medium-emphasis"
icon="mdi-bookmark"
size="small"
></v-btn>

<v-btn color="surface-variant" icon="mdi-share-variant" size="small" variant="text"></v-btn>
<v-btn
color="medium-emphasis"
icon="mdi-share-variant"
size="small"
></v-btn>
</v-card-actions>
</v-card>
</v-col>
Expand Down

0 comments on commit 04400f0

Please sign in to comment.