anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 12:55:08 +00:00
Code Issues Projects Releases Wiki Activity

deploy: 5fb213d148

Browse Source
This commit is contained in:
anatolykopyl
2023-02-17 20:52:35 +00:00
parent 0f676b14c8
commit a11e59dbb8
28 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
guide/index.html
View File

@@ -5,11 +5,11 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Introduction | Vue 3D Mockup</title>
<meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.css">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.5c49fc9b.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/screen.fc899083.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_index.md.5522df1a.lean.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_index.md.4946aaa4.lean.js">
<script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
@@ -22,8 +22,8 @@
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><!----></div><div class="pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Screen from assets</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:51:51.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><!----></div><div class="pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Screen from assets</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</script>
<script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
</body>

8
guide/multiple-mockups.html
View File

@@ -5,11 +5,11 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Multiple mockups | Vue 3D Mockup</title>
<meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.css">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.5c49fc9b.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/screen.fc899083.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_multiple-mockups.md.49a01da7.lean.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_multiple-mockups.md.224315f1.lean.js">
<script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
@@ -36,8 +36,8 @@
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Video as screen</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/theming.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Theming</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:51:51.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Video as screen</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/theming.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Theming</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</script>
<script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
</body>

8
guide/props.html
View File

File diff suppressed because one or more lines are too long

8
guide/screen-from-assets.html
View File

@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Screen image from assets folder | Vue 3D Mockup</title>
<meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.css">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_screen-from-assets.md.dc47062a.lean.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_screen-from-assets.md.23516bf8.lean.js">
<script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
@@ -27,8 +27,8 @@
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Introduction</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Video as screen</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:51:51.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Introduction</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Video as screen</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</script>
<script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
</body>

36
guide/theming.html
View File

File diff suppressed because one or more lines are too long

8
guide/video-as-screen.html
View File

@@ -5,10 +5,10 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Video as screen | Vue 3D Mockup</title>
<meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.css">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.5c49fc9b.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_video-as-screen.md.e6ce2840.lean.js">
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_video-as-screen.md.f76daff7.lean.js">
<script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
@@ -44,8 +44,8 @@
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> videoElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vidReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Screen from assets</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/multiple-mockups.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Multiple mockups</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:51:51.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Screen from assets</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/multiple-mockups.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Multiple mockups</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</script>
<script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
</body>