ohayolibs
Version:
Ohayo is a set of essential modules for ohayojp.
70 lines (69 loc) • 2.34 kB
HTML
<section class="code-box-demo" [ngStyle]="{ background: item.bg }">
<div [ngClass]="{ 'browser-mockup': item.browser }" [ngStyle]="{ 'height.px': item.browser }">
<div [ngClass]="{ 'browser-scroll': item.browser }">
<ng-content></ng-content>
</div>
</div>
</section>
<section class="code-box-meta markdown">
<div class="code-box-title">
{{ item.title }}
<edit-button [item]="item"></edit-button>
</div>
<div class="code-box-description" [innerHTML]="item.summary"></div>
<div class="code-box-actions">
<i
nz-tooltip
[nzTooltipTitle]="'app.demo.code-sandbox' | translate"
(click)="openOnlineIDE('CodeSandbox')"
nz-icon
nzType="code-sandbox"
class="code-box-code-icon"
></i>
<i
nz-tooltip
[nzTooltipTitle]="'app.demo.stackblitz' | translate"
(click)="openOnlineIDE()"
nz-icon
nzType="thunderbolt"
nzTheme="fill"
class="code-box-code-icon"
></i>
<i
nz-tooltip
[nzTooltipTitle]="'app.demo.copy' | translate"
(click)="onCopy(item.code)"
nz-icon
[nzType]="copied ? 'check' : 'snippets'"
class="code-box-code-icon"
[class.ant-tooltip-open]="copied"
></i>
<i nz-tooltip [nzTooltipTitle]="expand ? 'Hide Code' : 'Show Code'" class="code-expand-icon">
<img
alt="expand code"
[src]="
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg'
"
[ngClass]="{ 'code-expand-icon-hide': expand, 'code-expand-icon-show': !expand }"
(click)="handle()"
/>
<img
alt="expand code"
[src]="
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg'
"
[ngClass]="{ 'code-expand-icon-show': expand, 'code-expand-icon-hide': !expand }"
(click)="handle()"
/>
</i>
</div>
</section>
<section class="highlight-wrapper" [ngClass]="{ 'highlight-wrapper-expand': expand }">
<div class="highlight">
<pre class="hljs language-ts"><code>{{item.code}}</code></pre>
</div>
</section>