mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-05 13:37:35 +08:00
106 lines
3.6 KiB
C#
106 lines
3.6 KiB
C#
@using AntDesign.JsInterop
|
|
@using AntDesign.Docs.Services
|
|
@inherits ComponentBase
|
|
|
|
<div class="code-box" id="@DemoId">
|
|
<section class="code-box-demo">
|
|
@if (Demo.Iframe > 0)
|
|
{
|
|
<MockBrowser Height="@Demo.Iframe.Value" WithUrl="@($"/mock?demoId={DemoId}&type={Demo.Type}")" />
|
|
}
|
|
else
|
|
{
|
|
@Component
|
|
}
|
|
</section>
|
|
<section class="code-box-meta markdown">
|
|
<div class="code-box-title" @onclick="@AnchorClick">
|
|
<a @onclick="AnchorClick">@Demo.Title</a>
|
|
<Tooltip Title="@lang.Resources["app.content.edit-demo"]">
|
|
<Unbound>
|
|
<a @ref="context.Current" class="edit-button" href="@EditUrl" target="_blank" rel="noopener noreferrer">
|
|
<Icon Type="edit" />
|
|
</a>
|
|
</Unbound>
|
|
</Tooltip>
|
|
</div>
|
|
<div class="code-box-description">
|
|
@((MarkupString)Demo.Description)
|
|
</div>
|
|
<div class="code-box-actions">
|
|
<Tooltip Title="@lang.Resources[_copied?"app.demo.copied":"app.demo.copy"]" OnVisibleChange="() => _copied = false">
|
|
<Unbound>
|
|
<Icon RefBack="context" Type="@(_copied?"check" : "snippets")" Class="code-box-code-copy code-box-code-action" OnClick="Copy" />
|
|
</Unbound>
|
|
</Tooltip>
|
|
<Tooltip Title="@(CodeExpand?lang.Resources["app.demo.code.hide"] : lang.Resources["app.demo.code.show"])">
|
|
<Unbound>
|
|
<span @ref="context.Current" class="code-expand-icon code-box-code-action" @onclick="_ => CodeExpand = !CodeExpand">
|
|
<img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" class="@(CodeExpand ? "code-expand-icon-hide" : "code-expand-icon-show")">
|
|
<img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" class="@(!CodeExpand ? "code-expand-icon-hide" : "code-expand-icon-show")">
|
|
</span>
|
|
</Unbound>
|
|
</Tooltip>
|
|
@DebugIcon
|
|
</div>
|
|
</section>
|
|
<section class="highlight-wrapper @(CodeExpand?"highlight-wrapper-expand":"")">
|
|
<div class="highlight">
|
|
<HighlightedCode Code="@Demo.Code" CanLoad="CodeExpand" Language="html"></HighlightedCode>
|
|
</div>
|
|
</section>
|
|
<style>
|
|
@Demo.Style
|
|
</style>
|
|
</div>
|
|
|
|
@inject InteropService InteropService
|
|
@inject DemoService demoService;
|
|
@inject ILanguageService lang;
|
|
|
|
@code {
|
|
|
|
[Parameter]
|
|
public string ComponentName { get; set; }
|
|
|
|
[Parameter]
|
|
public DemoItem Demo { get; set; }
|
|
|
|
[Parameter]
|
|
public bool CodeExpand { get; set; }
|
|
|
|
RenderFragment Component;
|
|
|
|
RenderFragment DebugIcon;
|
|
|
|
private bool _copied;
|
|
|
|
protected string DemoId => $"components-{ComponentName.ToLower()}-demo-{Demo.Name}";
|
|
|
|
private string EditUrl => $"https://github.com/ant-design-blazor/ant-design-blazor/edit/master/site/AntDesign.Docs/Demos/Components/{ComponentName}/demo/{Demo.Name}.razor";
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
await base.OnInitializedAsync();
|
|
|
|
Component = demoService.GetShowCase(Demo.Type);
|
|
|
|
#if DEBUG
|
|
DebugIcon =@<a href="mock?type=@(Demo.Type)" class="code-box-code-action" target="_blank">
|
|
<Icon Type="bug" />
|
|
</a>;
|
|
#endif
|
|
}
|
|
|
|
async Task Copy()
|
|
{
|
|
await InteropService.Copy(Demo.Code);
|
|
_copied = true;
|
|
}
|
|
|
|
async Task AnchorClick()
|
|
{
|
|
await InteropService.JsInvokeAsync("window.eval", $"window.location.hash='{DemoId}'");
|
|
}
|
|
}
|