!3664 doc(#I67B60): update Anchor demo

* Merge branch 'main' into I67B60-Anchor
* update Anchor demos
This commit is contained in:
代码搬运工 2022-12-24 15:00:25 +00:00 committed by Argo
parent bd78ab2c7a
commit 7e009ba0a1
5 changed files with 80 additions and 72 deletions

View File

@ -0,0 +1,25 @@
@inject IStringLocalizer<AnchorNormal> Localizer
<p>@((MarkupString)Localizer["IntroText2"].Value)</p>
<ul class="demo-ul">
<li>
<Anchor Target="anchor1" Offset="50">Anchor1</Anchor>
</li>
<li>
<Anchor Target="anchor2" Offset="50">Anchor2</Anchor>
</li>
<li>
<Anchor Target="anchor3" Offset="50">Anchor3</Anchor>
</li>
<li>
<Anchor Target="anchor4" Offset="50">Anchor4</Anchor>
</li>
</ul>
<h4 id="anchor1">Archor1</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>
<h4 id="anchor2">Archor2</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>
<h4 id="anchor3">Archor3</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>
<h4 id="anchor4">Archor4</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>

View File

@ -4168,7 +4168,9 @@
"Title": "Anchor",
"SubTitle": "Hyperlinks to scroll on one page.",
"BaseUsageText": "Basic usage",
"IntroText1": "For displaying anchor hyperlinks on page and jumping between them.",
"IntroText1": "For displaying anchor hyperlinks on page and jumping between them."
},
"BootstrapBlazor.Shared.Demos.Anchor.AnchorNormal": {
"IntroText2": "Click <code>Anchor</code> item try it",
"ContentText1": "<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p><p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>",
"Desc1": "Anchor Target Id",

View File

@ -4167,7 +4167,9 @@
"Title": "Anchor 锚点",
"SubTitle": "用于跳转到页面指定位置",
"BaseUsageText": "基础用法",
"IntroText1": "需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转",
"IntroText1": "需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转"
},
"BootstrapBlazor.Shared.Demos.Anchor.AnchorNormal": {
"IntroText2": "点击下面 <code>Anchor</code> 项目,页面滚动到相对应的章节",
"ContentText1": "<p>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</p><p>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</p><p>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</p><p>简化流程:设计简洁直观的操作流程;</p><p>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</p><p>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</p>",
"Desc1": "锚点目标 Id",

View File

@ -4,23 +4,54 @@
<h4>@Localizer["SubTitle"]</h4>
<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal">
<p>@((MarkupString)Localizer["IntroText2"].Value)</p>
<ul class="demo-ul">
<li><Anchor Target="anchor1" Offset="50">Anchor1</Anchor></li>
<li><Anchor Target="anchor2" Offset="50">Anchor2</Anchor></li>
<li><Anchor Target="anchor3" Offset="50">Anchor3</Anchor></li>
<li><Anchor Target="anchor4" Offset="50">Anchor4</Anchor></li>
</ul>
<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal" demo="Anchor.AnchorNormal"/>
<h4 id="anchor1">Archor1</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>
<h4 id="anchor2">Archor2</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>
<h4 id="anchor3">Archor3</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>
<h4 id="anchor4">Archor4</h4>
<div>@((MarkupString)Localizer["ContentText1"].Value)</div>
</DemoBlock>
<AttributeTable Items="@GetAttributes()"/>
<AttributeTable Items="@GetAttributes()" />
@code
{
[Inject]
[NotNull]
private IStringLocalizer<Anchors>? Localizer { get; set; }
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new[]
{
new AttributeItem()
{
Name = "Target",
Description = Localizer["Desc1"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "Container",
Description = Localizer["Desc2"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "Offset",
Description = Localizer["Desc3"],
Type = "int",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem()
{
Name = "ChildContent",
Description = Localizer["Desc4"],
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
}
};
}

View File

@ -1,52 +0,0 @@
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Anchors
{
[Inject]
[NotNull]
private IStringLocalizer<Anchors>? Localizer { get; set; }
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Target",
Description = Localizer["Desc1"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Container",
Description = Localizer["Desc2"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Offset",
Description = Localizer["Desc3"],
Type = "int",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem() {
Name = "ChildContent",
Description = Localizer["Desc4"],
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
}
};
}