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

15
assets/guide_theming.md.867cf905.js Normal file
View File

@@ -0,0 +1,15 @@
import{M as o}from"./chunks/Mockup.5c49fc9b.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as f,o as n,c as d,a as e,g as c,u as r,f as l,t as v,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=s=>(y("data-v-0e1f301f"),s=s(),i(),s),u=C(()=>e("h1",{id:"theming",tabindex:"-1"},[l("Theming "),e("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F(`<p data-v-0e1f301f>The <code data-v-0e1f301f>phoneClr</code> and <code data-v-0e1f301f>lightClr</code> props are not reactive, and are intended to be set when the component is mounted. But if you want to you still can force a rerender by giving the <code data-v-0e1f301f>Mockup</code> a key.</p><h2 id="code-example" tabindex="-1" data-v-0e1f301f>Code example <a class="header-anchor" href="#code-example" aria-hidden="true" data-v-0e1f301f>#</a></h2><div class="language-vue" data-v-0e1f301f><span class="copy" data-v-0e1f301f></span><pre data-v-0e1f301f><code data-v-0e1f301f><span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f>&lt;</span><span style="color:#F07178;" data-v-0e1f301f>template</span><span style="color:#89DDFF;" data-v-0e1f301f>&gt;</span></span>
<span class="line" data-v-0e1f301f><span style="color:#A6ACCD;" data-v-0e1f301f> </span><span style="color:#89DDFF;" data-v-0e1f301f>&lt;</span><span style="color:#FFCB6B;" data-v-0e1f301f>Mockup</span><span style="color:#89DDFF;" data-v-0e1f301f> </span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f> </span><span style="color:#C792EA;" data-v-0e1f301f>screen</span><span style="color:#89DDFF;" data-v-0e1f301f>=</span><span style="color:#89DDFF;" data-v-0e1f301f>&quot;</span><span style="color:#C3E88D;" data-v-0e1f301f>screen.png</span><span style="color:#89DDFF;" data-v-0e1f301f>&quot;</span><span style="color:#89DDFF;" data-v-0e1f301f> </span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f> :</span><span style="color:#C792EA;" data-v-0e1f301f>phoneClr</span><span style="color:#89DDFF;" data-v-0e1f301f>=</span><span style="color:#89DDFF;" data-v-0e1f301f>&quot;</span><span style="color:#A6ACCD;" data-v-0e1f301f>darkTheme</span><span style="color:#89DDFF;" data-v-0e1f301f> ? </span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;</span><span style="color:#C3E88D;" data-v-0e1f301f>#fff</span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;</span><span style="color:#89DDFF;" data-v-0e1f301f> : </span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;</span><span style="color:#C3E88D;" data-v-0e1f301f>#222</span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;&quot;</span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f> :</span><span style="color:#C792EA;" data-v-0e1f301f>key</span><span style="color:#89DDFF;" data-v-0e1f301f>=</span><span style="color:#89DDFF;" data-v-0e1f301f>&quot;</span><span style="color:#A6ACCD;" data-v-0e1f301f>darkTheme</span><span style="color:#89DDFF;" data-v-0e1f301f>&quot;</span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f> /&gt;</span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f>&lt;/</span><span style="color:#F07178;" data-v-0e1f301f>template</span><span style="color:#89DDFF;" data-v-0e1f301f>&gt;</span></span>
<span class="line" data-v-0e1f301f></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f>&lt;</span><span style="color:#F07178;" data-v-0e1f301f>script</span><span style="color:#A6ACCD;" data-v-0e1f301f> </span><span style="color:#C792EA;" data-v-0e1f301f>setup</span><span style="color:#89DDFF;" data-v-0e1f301f>&gt;</span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;font-style:italic;" data-v-0e1f301f>import</span><span style="color:#A6ACCD;" data-v-0e1f301f> </span><span style="color:#89DDFF;" data-v-0e1f301f>{</span><span style="color:#F07178;" data-v-0e1f301f> </span><span style="color:#A6ACCD;" data-v-0e1f301f>ref</span><span style="color:#F07178;" data-v-0e1f301f> </span><span style="color:#89DDFF;" data-v-0e1f301f>}</span><span style="color:#A6ACCD;" data-v-0e1f301f> </span><span style="color:#89DDFF;font-style:italic;" data-v-0e1f301f>from</span><span style="color:#A6ACCD;" data-v-0e1f301f> </span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;</span><span style="color:#C3E88D;" data-v-0e1f301f>vue</span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;</span><span style="color:#89DDFF;" data-v-0e1f301f>;</span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;font-style:italic;" data-v-0e1f301f>import</span><span style="color:#A6ACCD;" data-v-0e1f301f> Mockup </span><span style="color:#89DDFF;font-style:italic;" data-v-0e1f301f>from</span><span style="color:#A6ACCD;" data-v-0e1f301f> </span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;</span><span style="color:#C3E88D;" data-v-0e1f301f>vue-three-d-mockup</span><span style="color:#89DDFF;" data-v-0e1f301f>&#39;</span><span style="color:#89DDFF;" data-v-0e1f301f>;</span></span>
<span class="line" data-v-0e1f301f></span>
<span class="line" data-v-0e1f301f><span style="color:#C792EA;" data-v-0e1f301f>const</span><span style="color:#A6ACCD;" data-v-0e1f301f> darkTheme </span><span style="color:#89DDFF;" data-v-0e1f301f>=</span><span style="color:#A6ACCD;" data-v-0e1f301f> </span><span style="color:#82AAFF;" data-v-0e1f301f>ref</span><span style="color:#A6ACCD;" data-v-0e1f301f>(</span><span style="color:#FF9CAC;" data-v-0e1f301f>true</span><span style="color:#A6ACCD;" data-v-0e1f301f>)</span><span style="color:#89DDFF;" data-v-0e1f301f>;</span></span>
<span class="line" data-v-0e1f301f><span style="color:#89DDFF;" data-v-0e1f301f>&lt;/</span><span style="color:#F07178;" data-v-0e1f301f>script</span><span style="color:#89DDFF;" data-v-0e1f301f>&gt;</span></span>
<span class="line" data-v-0e1f301f></span></code></pre></div>`,3),E=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1676667111000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(s){const a=f(!0);return(A,t)=>(n(),d("div",null,[u,e("p",null,[(n(),c(o,{style:{width:"100%",height:"400px"},screen:r(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),e("div",null,[e("button",{class:"button",onClick:t[0]||(t[0]=g=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+v(a.value?"dark":"light"),1)]),h]))}});var S=D(_,[["__scopeId","data-v-0e1f301f"]]);export{E as __pageData,S as default};