Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Title 网站标题

用于设置网页页面标题

网页中添加 Title 组件并设置 Text 属性即可

Demo

设置 Text 属性

@page "/titles"
<Title Text="我是标题" />
<p>测试网页<p/>

网页中无需添加 Title 组件,调用注入服务 TitleService

Demo

特别注意:

使用此种方法时请在 App 或者 MainLayout 或者 Page 中添加 未设置 Text 属性Title 组件

[Inject]
[NotNull]
private TitleService? TitleService { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    await TitleService.SetTitle("我是标题");
}

直接调用 TitleService 静态方法

Demo

特别注意:

使用此种方法时请在 App 或者 MainLayout 或者 Page 中添加 未设置 Text 属性Title 组件

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    await TitleService.SetWebSiteTitle("我是标题");
}
@page "/titles"

<h3>Title 网站标题</h3>

<h4>用于设置网页页面标题</h4>

<Tips>
    <p><code>NET6.0</code> 可使用微软 <code>PageTitle</code> 组件,用于设置网页标题,本组建额外提供了以服务的形式设置当前网页标题</p>
</Tips>

<DemoBlock Title="基本用法" Introduction="网页中添加 <code>Title</code> 组件并设置 <code>Text</code> 属性即可" Name="Normal">
    <Tips>
        <p>
            <code>Title</code> 组件设置 <code>Text</code> 后为普通组件使用,未设置 <code>Text</code> 属性时供服务调用
        </p>
    </Tips>
    <p><b>设置 <code>Text</code> 属性</b></p>
    <Pre>@page "/titles"
<Title Text="我是标题" />
<p>测试网页<p/>
</Pre>
</DemoBlock>

<DemoBlock Title="高级用法" Introduction="网页中无需添加 <code>Title</code> 组件,调用注入服务 <code>TitleService</code>" Name="Advance">
    <p>
        <b>特别注意:</b>
        <div>使用此种方法时请在 <code>App</code> 或者 <code>MainLayout</code> 或者 <code>Page</code> 中添加 <b>未设置 <code>Text</code> 属性</b> 的 <code>Title</code> 组件</div>
    </p>
    <Pre>[Inject]
[NotNull]
private TitleService? TitleService { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    await TitleService.SetTitle("我是标题");
}
</Pre>
</DemoBlock>

<DemoBlock Title="静态方法" Introduction="直接调用 <code>TitleService</code> 静态方法" Name="Static">
    <p>
        <b>特别注意:</b>
        <div>使用此种方法时请在 <code>App</code> 或者 <code>MainLayout</code> 或者 <code>Page</code> 中添加 <b>未设置 <code>Text</code> 属性</b> 的 <code>Title</code> 组件</div>
    </p>
    <Pre>protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    await TitleService.SetWebSiteTitle("我是标题");
}
</Pre>
</DemoBlock>
// 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>
    /// Title 网站标题示例代码
    /// </summary>
    public partial class Title
    {
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload