@page "/components/anchor"
@inject NavigationManager navigationManager


<PageLayout Title="Anchor 锚点" Description="页面内的超级链接，用于跳转到页面内指定位置。"
    Anchors="@(new[]{"示例","指定容器锚点"})">
    <ChildContent>
            <Example Title="示例">
                <Description></Description>
                <RunContent>
                    <TAnchor>
                        <TAnchorItem Title="content-1" Href="#content-1"></TAnchorItem>
                        <TAnchorItem Title="content-2" Href="#content-2"></TAnchorItem>
                        <TAnchorItem Title="content-3" Href="#content-3"></TAnchorItem>
                        <TAnchorItem Title="content-4" Href="#content-4"></TAnchorItem>
                    </TAnchor>
                </RunContent>
                <CodeContent>
@Code.Create(@"
```cshtml-razor
<TAnchor Container=""#anchor-container"">
    <TAnchorItem Title=""content-1"" Href=""#content-1""></TAnchorItem>
    <TAnchorItem Title=""content-2"" Href=""#content-2""></TAnchorItem>
    <TAnchorItem Title=""content-3"" Href=""#content-3""></TAnchorItem>
    <TAnchorItem Title=""content-4"" Href=""#content-4""></TAnchorItem>
</TAnchor>
```
")
                </CodeContent>

            </Example>
    <Example Title="指定容器锚点">
                <Description>指定响应滚动的容器进行锚点定位，以及 click 事件的应用，阻止锚点添加到 uri 上。</Description>
                <RunContent>
                    <div class="anchor-demo anchor-container-demo" style="display: flex;">
                        <TAnchor Container="#anchor-container">
                            <TAnchorItem Title="content-1" Href="#content-1"></TAnchorItem>
                            <TAnchorItem Title="content-2" Href="#content-2"></TAnchorItem>
                            <TAnchorItem Title="content-3" Href="#content-3"></TAnchorItem>
                            <TAnchorItem Title="content-4" Href="#content-4"></TAnchorItem>
                            <TAnchorItem Title="content-5" Href="#content-5"></TAnchorItem>
                            <TAnchorItem Title="content-6" Href="#content-6"></TAnchorItem>
                            <TAnchorItem Title="content-7" Href="#content-7"></TAnchorItem>
                            <TAnchorItem Title="content-8" Href="#content-8"></TAnchorItem>
                            <TAnchorItem Title="content-9" Href="#content-9"></TAnchorItem>
                        </TAnchor>
                        <div id="anchor-container" style="flex-grow: 1;overflow:scroll;scroll-behavior: smooth;max-height:400px;">
                            <div id="content-1" style="background: #ecf2fe;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-1</div>
                            <div id="content-2" style="background: #d4e3fc;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-2</div>
                            <div id="content-3" style="background: #bbd3fb;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-3</div>
                            <div id="content-4" style="background: #96bbf8;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-4</div>
                            <div id="content-5" style="background: #699ef5;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-5</div>
                            <div id="content-6" style="background: #ecf2fe;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-6</div>
                            <div id="content-7" style="background: #d4e3fc;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-7</div>
                            <div id="content-8" style="background: #bbd3fb;text-align: center;font-size: 22px;line-height: 200px;">anchor-content-8</div>
                            <div id="content-9" style="background: #96bbf8;text-align: center;font-size: 22px;line-height: 500px;">anchor-content-9</div>
                        </div>
                    </div>
                </RunContent>
                <CodeContent>
@Code.Create(@"
```cshtml-razor
<div class=""anchor-demo anchor-container-demo"" style=""display: flex;"">
    <TAnchor container=""#anchor-container"">
        <TAnchorItem Title=""content-1"" Href=""#content-1""></TAnchorItem>
        <TAnchorItem Title=""content-2"" Href=""#content-2""></TAnchorItem>
        <TAnchorItem Title=""content-3"" Href=""#content-3""></TAnchorItem>
        <TAnchorItem Title=""content-4"" Href=""#content-4""></TAnchorItem>
        <TAnchorItem Title=""content-5"" Href=""#content-5""></TAnchorItem>
        <TAnchorItem Title=""content-6"" Href=""#content-6""></TAnchorItem>
        <TAnchorItem Title=""content-7"" Href=""#content-7""></TAnchorItem>
        <TAnchorItem Title=""content-8"" Href=""#content-8""></TAnchorItem>
        <TAnchorItem Title=""content-9"" Href=""#content-9""></TAnchorItem>
    </TAnchor>
    <div id=""anchor-container"" style=""flex-grow: 1;overflow:scroll;scroll-behavior: smooth;max-height:400px;"">
        <div id=""content-1"" style=""background: #ecf2fe;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-1</div>
        <div id=""content-2"" style=""background: #d4e3fc;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-2</div>
        <div id=""content-3"" style=""background: #bbd3fb;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-3</div>
        <div id=""content-4"" style=""background: #96bbf8;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-4</div>
        <div id=""content-5"" style=""background: #699ef5;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-5</div>
        <div id=""content-6"" style=""background: #ecf2fe;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-6</div>
        <div id=""content-7"" style=""background: #d4e3fc;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-7</div>
        <div id=""content-8"" style=""background: #bbd3fb;text-align: center;font-size: 22px;line-height: 200px;"">anchor-content-8</div>
        <div id=""content-9"" style=""background: #96bbf8;text-align: center;font-size: 22px;line-height: 500px;"">anchor-content-9</div>
    </div>
</div>
```
")
                </CodeContent>
        </Example>
    </ChildContent>
    <ApiContent>
        <ApiDocument ComponentType="typeof(TAnchor)"/>
        <ApiDocument ComponentType="typeof(TAnchorItem)" />
    </ApiContent>
</PageLayout>