ant-design-blazor/site/AntDesign.Docs/Pages/Components.razor

@page "/components/{name}"
@page "/components"
@page "/charts/{name}"
@page "/charts"

<section class="main-container main-container-component">
    <article>

        @if (_demoComponent != null)
        {
            var title = $"{_demoComponent.SubTitle} {_demoComponent.Title} - Ant Design Blazor".Trim();
            <Microsoft.AspNetCore.Components.Web.Extensions.Head.Title Value="@title" />
            var docDemos = _demoComponent.DemoList?.Where(x => x.Docs.HasValue && x.Docs.Value) ?? Enumerable.Empty<DemoItem>();
            var demos = _demoComponent.DemoList?.Where(x => !x.Debug && !x.Docs.HasValue).OrderBy(x => x.Order) ?? Enumerable.Empty<DemoItem>();

            if (demos.Any())
            {
                <div class="toc-affix">
                    <Affix OffsetTop="16">
                        <Anchor Key="@_demoComponent.Title">
                            @foreach (var demo in demos)
                            {
                                <AnchorLink Href="@($"/{CurrentLanguage}/components/{_demoComponent.Title}#components-{_demoComponent.Title.ToLower()}-demo-{demo.Name}")" Title="@demo.Title" />
                            }
                            @if (!string.IsNullOrEmpty(_demoComponent.ApiDoc))
                            {
                                <AnchorLink Href="@($"/{CurrentLanguage}/components/{_demoComponent.Title}#API")" Title="API" />
                            }
                        </Anchor>
                    </Affix>
                </div>
            }

            <section class="markdown">
                <h1>
                    @_demoComponent.Title
                    <span class="subtitle">@_demoComponent.SubTitle</span>
                    <span class="widget"></span>
                    <Tooltip Title="@LanguageService.Resources["app.content.edit-demo"]">
                        <Unbound>
                            <a @ref="context.Current" href="@EditUrl" class="edit-button" rel="noopener noreferrer" target="_blank">
                                <Icon Type="edit" />
                            </a>
                        </Unbound>
                    </Tooltip>
                </h1>
                <section class="markdown">
                    @((MarkupString) _demoComponent.Desc)
                </section>

                @foreach (var docDemo in docDemos)
                {
                    <RazorBox Demo="@docDemo" @key="@($"{_demoComponent.Title}-{docDemo.Title}")" />
                }

                @if (demos.Any())
                {
                    <h2 data-scrollama-index="1">
                        @LanguageService.Resources["app.component.examples"]
                        <span class="all-code-box-controls">
                            @if (_demoComponent.Cols != 1)
                            {
                                @if (_expanded)
                                {
                                    <Icon Type="compress" Class="code-box-expand-trigger" OnClick="() => _expanded = false " />
                                }
                                else
                                {
                                    <Icon Type="expand" Class="code-box-expand-trigger" OnClick="() => _expanded = true " />
                                }
                            }
                            <Icon Type="code" Theme="@(_expandAllCode ? "fill":"outline")" Class="code-box-expand-trigger" OnClick="()=>_expandAllCode=!_expandAllCode" />
                            @*<Icon Type="bug" Class="code-box-expand-trigger" />*@
                        </span>
                    </h2>
                }
            </section>
            @if (demos.Any())
            {
                <Row Style="margin-left: -8px; margin-right: -8px;">
                    @if (_demoComponent.Cols == 1 || _expanded)
                    {
                        foreach (var demo in demos)
                        {
                            <AntDesign.Col Span="24" Class="code-boxes-col-1-1" Style="padding-left: 8px; padding-right: 8px;">
                                <CodeBox CodeExpand="_expandAllCode" Demo="demo" @key="@($"{_demoComponent.Title}-{demo.Title}")" ComponentName="@_demoComponent.Title"></CodeBox>
                            </AntDesign.Col>
                        }
                    }
                    else
                    {
                        var leftList = demos.Where((_, i) => i % 2 == 0);
                        var rightList = demos.Where((_, i) => i % 2 != 0);

                        <AntDesign.Col Span="12" Class="code-boxes-col-2-1" Style="padding-left: 8px; padding-right: 8px;">
                            @foreach (var demo in leftList)
                            {
                                <CodeBox CodeExpand="_expandAllCode" Demo="demo" @key="@($"{_demoComponent.Title}-{demo.Title}")" ComponentName="@_demoComponent.Title"></CodeBox>
                            }
                        </AntDesign.Col>
                        <AntDesign.Col Span="12" Class="code-boxes-col-2-1" Style="padding-left: 8px; padding-right: 8px;">
                            @foreach (var demo in rightList)
                            {
                                <CodeBox CodeExpand="_expandAllCode" Demo="demo" @key="@($"{_demoComponent.Title}-{demo.Title}")" ComponentName="@_demoComponent.Title"></CodeBox>
                            }
                        </AntDesign.Col>
                    }
                </Row>
            }
            <section class="markdown api-container">

                @((MarkupString) _demoComponent.ApiDoc)
            </section>

        }
    </article>
    <ContributorsList FilePath="@_filePath" />
    @*<ul class="contributors-list" style="display: flex; list-style: none; margin: 0px; padding: 0px; flex-flow: wrap;"></ul>*@
</section>