-
-
Notifications
You must be signed in to change notification settings - Fork 7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(sheets): add guide, new examples, update content
- Loading branch information
1 parent
98e6aaa
commit 395ddd7
Showing
7 changed files
with
284 additions
and
58 deletions.
There are no files selected for viewing
24 changes: 24 additions & 0 deletions
24
packages/docs/src/examples/v-sheet/misc-congratulations.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <template> | ||
| <v-sheet | ||
| class="d-flex align-center justify-center flex-wrap text-center mx-auto" | ||
| elevation="4" | ||
| height="250" | ||
| rounded | ||
| max-width="800" | ||
| width="100%" | ||
| > | ||
| <div> | ||
| <h2 class="text-h4 font-weight-black text-orange">Congratulations!</h2> | ||
|
|
||
| <div class="text-h5 font-weight-medium mb-2"> | ||
| You are officially a part of the Vuetify Community! | ||
| </div> | ||
|
|
||
| <p class="text-body-2 mb-4"> | ||
| Please head over to your inbox/spam or others folder to find our verificaiton email. | ||
| </p> | ||
|
|
||
| <v-btn variant="text" color="orange">Go to Login</v-btn> | ||
| </div> | ||
| </v-sheet> | ||
| </template> |
39 changes: 39 additions & 0 deletions
39
packages/docs/src/examples/v-sheet/misc-privacy-policy.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <template> | ||
| <v-sheet | ||
| border="md" | ||
| class="pa-6 text-white mx-auto" | ||
| color="#141518" | ||
| max-width="400" | ||
| > | ||
| <h4 class="text-h5 font-weight-bold mb-4">Your Privacy</h4> | ||
|
|
||
| <p class="mb-8"> | ||
| This business determines the use of personal data collectied on our media properties and across the internet. We may collect data that you submit to us directly or data that we collect automatically including from cookies (such as device information or IP address). | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| Please read our <a href="#" class="text-red-accent-2">Privacy Policy</a> to learn about our privacy practices or click "Your Preferences" to exercise control over your data. | ||
| </p> | ||
|
|
||
| <v-btn | ||
| block | ||
| class="text-none text-black mb-4" | ||
| color="red-accent-2" | ||
| size="x-large" | ||
| variant="flat" | ||
| > | ||
| Accept | ||
| </v-btn> | ||
|
|
||
| <v-btn | ||
| block | ||
| class="text-none text-black" | ||
| color="red-accent-2" | ||
| size="x-large" | ||
| variant="outlined" | ||
| > | ||
| Your Preferences | ||
| </v-btn> | ||
| </v-sheet> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <template> | ||
| <v-sheet | ||
| elevation="12" | ||
| max-width="600" | ||
| rounded="lg" | ||
| width="100%" | ||
| class="pa-4 text-center mx-auto" | ||
| > | ||
| <v-icon | ||
| class="mb-5" | ||
| color="success" | ||
| icon="mdi-check-circle" | ||
| size="112" | ||
| ></v-icon> | ||
|
|
||
| <h2 class="text-h5 mb-6">You reconciled this account</h2> | ||
|
|
||
| <p class="mb-4 text-medium-emphasis text-body-2"> | ||
| To see a report on this reconciliation, click <a href="#" class="text-decoration-none text-info">View reconciliation report.</a> | ||
|
|
||
| <br> | ||
|
|
||
| Otherwise, you're done! | ||
| </p> | ||
|
|
||
| <v-divider class="mb-4"></v-divider> | ||
|
|
||
| <div class="text-end"> | ||
| <v-btn | ||
| class="text-none" | ||
| color="success" | ||
| rounded | ||
| variant="flat" | ||
| width="90" | ||
| > | ||
| Done | ||
| </v-btn> | ||
| </div> | ||
| </v-sheet> | ||
| </template> |
46 changes: 46 additions & 0 deletions
46
packages/docs/src/examples/v-sheet/misc-referral-program.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <template> | ||
| <v-sheet | ||
| border="lg opacity-12" | ||
| class="text-body-2 mx-auto" | ||
| max-width="550" | ||
| > | ||
| <v-container fluid> | ||
| <v-row> | ||
| <v-col cols="3"> | ||
| <v-img src="https://vuetifyjs.b-cdn.net/docs/images/graphics/img-placeholder.png" height="88" cover></v-img> | ||
| </v-col> | ||
|
|
||
| <v-col cols="9"> | ||
| <p class="mb-4"> | ||
| This is part of our <a href="#">Most Comprehenseive Guide to Referral Programs</a> > <a href="#">Do I Need A Referral Program?</a> section. You may enjoy other related articles: | ||
| </p> | ||
|
|
||
| <ul class="ps-4 mb-6"> | ||
| <li> | ||
| <a href="#">5 Ways to See if Referral Programs Can Work for You</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">The 6 Key Benefits of Referral Marketing</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Leading Indicators of Referral Program Success</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Debunking the Top 5 Worst Referral Program Myths</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <v-btn | ||
| block | ||
| class="text-none" | ||
| color="info" | ||
| rounded="0" | ||
| variant="flat" | ||
| > | ||
| Explore our 38+ Referral Program Resources | ||
| </v-btn> | ||
| </v-col> | ||
| </v-row> | ||
| </v-container> | ||
| </v-sheet> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,90 @@ | ||
| <template> | ||
| <v-container> | ||
| <v-row justify="space-around"> | ||
| <v-sheet v-bind="$attrs"></v-sheet> | ||
| </v-row> | ||
| </v-container> | ||
| <usage-example | ||
| v-model="model" | ||
| :code="code" | ||
| :name="name" | ||
| :options="options" | ||
| > | ||
| <div | ||
| class="py-8" | ||
| :class="[ | ||
| !border && (isDark ? 'bg-grey-darken-3' : 'bg-grey-lighten-3') | ||
| ]" | ||
| > | ||
| <v-sheet | ||
| v-if="sheet" | ||
| v-model="sheet" | ||
| v-bind="props" | ||
| class="mx-auto" | ||
| > | ||
| <template v-slot:text> | ||
| 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! | ||
| </template> | ||
| </v-sheet> | ||
|
|
||
| <div class="text-center"> | ||
| <v-btn v-if="!sheet" @click="sheet = true"> | ||
| Show sheet | ||
| </v-btn> | ||
| </div> | ||
| </div> | ||
|
|
||
| <template v-slot:configuration> | ||
| <v-select | ||
| v-model="color" | ||
| :items="[ | ||
| 'success', | ||
| 'info', | ||
| 'warning', | ||
| 'error', | ||
| ]" | ||
| label="Color" | ||
| clearable | ||
| ></v-select> | ||
|
|
||
| <v-checkbox v-model="border" label="Border"></v-checkbox> | ||
|
|
||
| <v-checkbox v-model="rounded" label="Rounded"></v-checkbox> | ||
| </template> | ||
| </usage-example> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'Usage', | ||
| inheritAttrs: false, | ||
| data: () => ({ | ||
| defaults: { | ||
| color: 'white', | ||
| elevation: 1, | ||
| height: 100, | ||
| outlined: false, | ||
| rounded: false, | ||
| shaped: false, | ||
| width: 100, | ||
| }, | ||
| options: { | ||
| selects: { | ||
| color: [ | ||
| 'white', | ||
| 'grey darken-2', | ||
| 'warning', | ||
| 'error', | ||
| 'success', | ||
| 'teal', | ||
| ], | ||
| }, | ||
| sliders: { | ||
| elevation: [0, 24], | ||
| height: [50, 250], | ||
| width: [50, 250], | ||
| }, | ||
| }, | ||
| tabs: [ | ||
| 'outlined', | ||
| 'rounded', | ||
| 'shaped', | ||
| ], | ||
| }), | ||
| } | ||
| <script setup> | ||
| // Utilities | ||
| import { computed, ref } from 'vue' | ||
| import { propsToString } from '@/util/helpers' | ||
| import { useUserStore } from '../../store/user' | ||
| const name = 'v-sheet' | ||
| const model = ref('default') | ||
| const sheet = ref(true) | ||
| const border = ref(false) | ||
| const elevation = ref(0) | ||
| const rounded = ref(false) | ||
| const color = ref(undefined) | ||
| const user = useUserStore() | ||
| const options = [] | ||
| const props = computed(() => { | ||
| return { | ||
| elevation: elevation.value || undefined, | ||
| border: border.value || undefined, | ||
| rounded: rounded.value || undefined, | ||
| height: 250, | ||
| width: 250, | ||
| color: color.value || undefined, | ||
| } | ||
| }) | ||
| const isDark = computed(() => { | ||
| console.log(user.theme === 'dark') | ||
| return user.theme === 'dark' | ||
| }) | ||
| const slots = computed(() => { | ||
| return '' | ||
| }) | ||
| const code = computed(() => { | ||
| return `<${name}${propsToString(props.value)}>${slots.value}</${name}>` | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters