
Timer 计时器
用于时间倒计时
基本用法
通过设置 Value
属性设定倒计时时间
Demo
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
颜色
通过设置 Color
属性设定圆形进度条颜色
Demo
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
Attributes
Loading...
@page "/timers"
<h3>Timer 计时器</h3>
<h4>用于时间倒计时</h4>
<DemoBlock Title="基本用法" Introduction="通过设置 <code>Value</code> 属性设定倒计时时间" Name="Normal">
<Timer OnTimeout="@OnTimeout" OnCancel="OnCancel" />
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="颜色" Introduction="通过设置 <code>Color</code> 属性设定圆形进度条颜色" Name="Color">
<Timer Color="Color.Warning" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// 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/
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Timers
{
private BlockLogger? Trace { get; set; }
private Task OnTimeout()
{
Trace?.Log("计时器时间到");
return Task.CompletedTask;
}
private Task OnCancel()
{
Trace?.Log("计时器取消");
return Task.CompletedTask;
}
/// <summary>
///
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes()
{
return new AttributeItem[]
{
new AttributeItem()
{
Name = "Width",
Description = "组件宽度",
Type = "int",
ValueList = " — ",
DefaultValue = "300"
},
new AttributeItem()
{
Name = "StrokeWidth",
Description = "进度条宽度",
Type = "int",
ValueList = " — ",
DefaultValue = "6"
},
new AttributeItem()
{
Name = "IsVibrate",
Description = "倒计时结束时设备震动",
Type = "bool",
ValueList = "true/false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "Value",
Description = "倒计时时间",
Type = "Timespan",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "Color",
Description = "进度条颜色",
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Primary"
}
};
}
}