
FullScreen
Human-computer interaction by injecting service calls Show
method pop-ups
The entire page is fully screened by calling the Show
method that FullScreenService
service instance
Demo
The full screen of the entire web page is component FullScreenButton
Demo
- The button default icon can be set through the
ButtonIcon
, and the full-screen icon can be set through theFullScreenIcon
property - Use the
Title
property to set the prompt bar text when the mouse hovers - Use the
Text
property to set current page title
<FullScreenButton Title="Click for full screen operation" />
@page "/fullscreens"
@inject IStringLocalizer<FullScreens> Localizer
<h3>FullScreen</h3>
<h4>Human-computer interaction by injecting service calls <code>Show</code> method pop-ups</h4>
<DemoBlock Title="Basic usage" Introduction="The entire page is fully screened by calling the <code>Show</code> method that <code>FullScreenService</code> service instance" Name="Normal">
<Button Text="FullScreen" OnClick="ToggleFullScreen"></Button>
</DemoBlock>
<DemoBlock Title="Button" Introduction="The full screen of the entire web page is component <code>FullScreenButton</code>" Name="Title">
<ul class="ul-demo mb-3">
<li>The button default icon can be set through the <code>ButtonIcon</code>, and the full-screen icon can be set through the <code>FullScreenIcon</code> property</li>
<li>Use the <code>Title</code> property to set the prompt bar text when the mouse hovers</li>
<li>Use the <code>Text</code> property to set current page title</li>
</ul>
<FullScreenButton Title="Tap for a full screen operation" FullScreenIcon="fa-solid fa-font-awesome" />
<Pre class="mt-3"><FullScreenButton Title="Click for full screen operation" /></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>
/// FullScreens 全屏示例代码
/// </summary>
public partial class FullScreens
{
[Inject]
[NotNull]
private FullScreenService? FullScreenService { get; set; }
private async Task ToggleFullScreen()
{
await FullScreenService.Toggle();
}
}