mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 04:45:09 +00:00
Added vitepress docs
This commit is contained in:
15
docs/.vitepress/config.js
Normal file
15
docs/.vitepress/config.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
title: 'Vue 3D Mockup',
|
||||
description: '📱 A 3D phone mockup component to showcase your apps',
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'Guide', link: '/guide' },
|
||||
{ text: 'Github', link: 'https://github.com/anatolykopyl/vue-three-d-mockup' }
|
||||
],
|
||||
footer: {
|
||||
message: 'Released under the GPL-3.0 license.',
|
||||
}
|
||||
}
|
||||
})
|
||||
BIN
docs/assets/screen.mp4
Normal file
BIN
docs/assets/screen.mp4
Normal file
Binary file not shown.
BIN
docs/assets/screen.png
Normal file
BIN
docs/assets/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
191
docs/guide.md
Normal file
191
docs/guide.md
Normal file
@@ -0,0 +1,191 @@
|
||||
# Guide
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install vue-three-d-mockup
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Mockup from '../src/Mockup.vue'
|
||||
import screenImage from './assets/screen.png';
|
||||
import screenVideo from './assets/screen.mp4';
|
||||
|
||||
const videoElement = ref(null);
|
||||
const vidReady = ref(false);
|
||||
</script>
|
||||
|
||||
<Mockup
|
||||
style="width: 100%; height: 400px;"
|
||||
:screen="screenImage"
|
||||
/>
|
||||
|
||||
### Simple example
|
||||
|
||||
`screen.png` is a static asset in the public folder.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Mockup screen="screen.png" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Mockup from 'vue-three-d-mockup';
|
||||
</script>
|
||||
```
|
||||
|
||||
### Using assets as the screen
|
||||
|
||||
- #### In vite powered projects
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Mockup :screen="screenImage" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Mockup from 'vue-three-d-mockup';
|
||||
import screenImage from './assets/screen.png';
|
||||
</script>
|
||||
```
|
||||
|
||||
- #### In vue-cli powered projects
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Mockup :screen="require('./assets/screen.png')" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Mockup from 'vue-three-d-mockup';
|
||||
</script>
|
||||
```
|
||||
|
||||
### Multiple phones
|
||||
|
||||
<Mockup
|
||||
style="width: 100%; height: 400px;"
|
||||
:screen="[screenImage, screenImage]"
|
||||
:position="[
|
||||
{
|
||||
x: -50
|
||||
},
|
||||
{
|
||||
x: 50
|
||||
},
|
||||
]"
|
||||
:rotation="[{}, {
|
||||
y: -0.3,
|
||||
z: -0.06,
|
||||
}]"
|
||||
/>
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Mockup
|
||||
:screen="[screenImage, screenImage]"
|
||||
:position="[
|
||||
{
|
||||
x: -50
|
||||
},
|
||||
{
|
||||
x: 50
|
||||
},
|
||||
]"
|
||||
:rotation="[{}, {
|
||||
y: -0.3,
|
||||
z: -0.06,
|
||||
}]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Mockup from 'vue-three-d-mockup';
|
||||
import screenImage from './assets/screen.png';
|
||||
</script>
|
||||
```
|
||||
|
||||
### Video
|
||||
|
||||
<Mockup
|
||||
v-if="vidReady"
|
||||
style="width: 100%; height: 400px;"
|
||||
:screen="videoElement"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<video
|
||||
:src="screenVideo"
|
||||
ref="videoElement"
|
||||
@canplay="vidReady = true"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
style="
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Mockup
|
||||
v-if="vidReady"
|
||||
:screen="videoElement"
|
||||
/>
|
||||
|
||||
<video
|
||||
:src="screenVideo"
|
||||
ref="videoElement"
|
||||
@canplay="vidReady = true"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
style="
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
"
|
||||
></video>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Mockup from 'vue-three-d-mockup';
|
||||
import screenVideo from './assets/screen.mp4';
|
||||
|
||||
const videoElement = ref(null);
|
||||
const vidReady = ref(false);
|
||||
</script>
|
||||
```
|
||||
|
||||
## Avaliable props
|
||||
|
||||
| Prop | Type | Required | Default | Description |
|
||||
| ---------- | -------------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `screen` | String \| Element \| Array | `true` | none | Path to an image that will be displayed on the phones screen or the `<video>` element displayed on the phones screen. When using the latter there are [caveats](#caveats). Can also be an array of any of the options above. |
|
||||
| `lightClr` | String | `false` | `"white"` | Color of the light as a CSS-style string. |
|
||||
| `phoneClr` | String | `false` | `"white"` | Color of the phone as a CSS-style string. |
|
||||
| `position` | Object \| Array | `false` | `{ x: 0, y: 0, z: 0 }` | The position of the phone. Can also be an array if multiple screens specified. | |
|
||||
| `rotation` | Object \| Array | `false` | `{ x: -0.2, y: 0.3, z: 0.06 }` | The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified. |
|
||||
|
||||
## Caveats
|
||||
|
||||
- The `screen` prop is unreactive, so when using it as a video
|
||||
it's important to only render the `Mockup` element when the video
|
||||
is loaded. Check out the examples above to see how
|
||||
to do this.
|
||||
- The video on the model will not be shown if the original `<video>`
|
||||
element is hidden with `display: none`, so use `visibility: hidden`
|
||||
instead.
|
||||
- The video may not be autoplaying if the original `<video>` element
|
||||
is scrolled off screen.
|
||||
- Even with the mentioned above workarounds, the video may not be
|
||||
working in Safari.
|
||||
84
docs/index.md
Normal file
84
docs/index.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
layout: home
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import Mockup from '../src/Mockup.vue'
|
||||
import screenImage from './assets/screen.png';
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Mockup
|
||||
class="mockup"
|
||||
:screen="screenImage"
|
||||
/>
|
||||
|
||||
<h1 class="heading">
|
||||
Vue 3D Mockup
|
||||
</h1>
|
||||
<p class="tagline">
|
||||
Create interactive 3D mockups with ease.
|
||||
</p>
|
||||
|
||||
<div class="buttons">
|
||||
<a
|
||||
href="/guide"
|
||||
class="buttons__button"
|
||||
>
|
||||
Guide
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/anatolykopyl/vue-three-d-mockup"
|
||||
class="buttons__button buttons__button--secondary"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style scoped>
|
||||
main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mockup {
|
||||
max-width: 600px;
|
||||
height: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 42px;
|
||||
line-height: 1.2;
|
||||
padding: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.buttons__button {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--vp-c-brand);
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
color: var(--vp-c-white);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.buttons__button--secondary {
|
||||
background-color: var(--vp-c-gray-light-4);
|
||||
color: var(--vp-c-black);
|
||||
border: 1px solid var(--vp-c-divider-light-2);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user