|
| 1 | +<!DOCTYPE html> |
| 2 | + |
| 3 | +<div |
| 4 | + class="playground display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"> |
| 5 | + <div resizable class="playground-code position:relative height:50%"> |
| 6 | + <textarea |
| 7 | + type="code" |
| 8 | + lang="html" |
| 9 | + array="demos" |
| 10 | + object="619aa8e8a8b6b4001a9dc24e" |
| 11 | + key="" |
| 12 | + save="false" |
| 13 | + input-closest=".playground .preview" |
| 14 | + input-attribute="value" |
| 15 | + input-events="input, onload" |
| 16 | + class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea> |
| 17 | + <div resize="bottom" class="background:lightgrey"></div> |
| 18 | + </div> |
| 19 | + |
| 20 | + <div class="playground-preview position:relative overflow:auto"> |
| 21 | + <div class="preview padding:20px"></div> |
| 22 | + </div> |
| 23 | + |
| 24 | + <div |
| 25 | + class="display:flex gap:15px font-size:20px position:absolute top:10px right:10px opacity:0.6"> |
| 26 | + <a |
| 27 | + click-closest=".playground" |
| 28 | + click-value="hide-preview" |
| 29 | + click-attribute="class"> |
| 30 | + <i |
| 31 | + toggle-attribute="src" |
| 32 | + toggle-value="/assets/svg/eye-slash.svg, /assets/svg/eye.svg" |
| 33 | + src="/assets/svg/eye.svg"></i> |
| 34 | + </a> |
| 35 | + <a |
| 36 | + click-closest=".playground" |
| 37 | + click-value="hide-code" |
| 38 | + click-attribute="class"> |
| 39 | + <i |
| 40 | + toggle-attribute="src" |
| 41 | + toggle-value="/assets/svg/code.svg, /assets/svg/code.svg" |
| 42 | + src="/assets/svg/code.svg"></i> |
| 43 | + </a> |
| 44 | + <a class="margin-right:5px" fullscreen fullscreen-closest=".playground"> |
| 45 | + <i src="../assets/svg/expand.svg"></i> |
| 46 | + <i src="../assets/svg/compress.svg"></i> |
| 47 | + </a> |
| 48 | + </div> |
| 49 | +</div> |
0 commit comments