
Slider 滑块
通过拖动滑块在一个固定区间内进行选择
基础用法
在拖动滑块时,改变当前值
Demo
Slider 双向绑定
通过拖动滑块在一个固定区间内进行选择
Demo
Attributes
Loading...
事件 Events
Loading...
@page "/sliders"
<h3>Slider 滑块</h3>
<h4>通过拖动滑块在一个固定区间内进行选择</h4>
<Block Title="基础用法" Introduction="在拖动滑块时,改变当前值">
<Slider></Slider>
<Slider Value="50" Label="自定义初始值"></Slider>
<Slider Value="42" IsDisabled="true" Label="禁用"></Slider>
</Block>
<Block Title="Slider 双向绑定" Introduction="通过拖动滑块在一个固定区间内进行选择">
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-8">
<Slider @bind-Value="@BindValue" Label="自定义初始值"></Slider>
</div>
<div class="form-group col-12 col-sm-4">
<BootstrapInput @bind-Value="@BindValue" readonly></BootstrapInput>
</div>
</div>
</div>
</Block>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
// 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 System.Collections.Generic;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class Sliders
{
private int BindValue { get; set; } = 50;
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Class",
Description = "样式",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "IsDisabled",
Description = "是否禁用",
Type = "boolean",
ValueList = " — ",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Value",
Description = "组件当前值",
Type = "int",
ValueList = "—",
DefaultValue = "—"
},
};
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private IEnumerable<EventItem> GetEvents() => new EventItem[]
{
new EventItem()
{
Name = "ValueChanged",
Description=" ValueChanged 回调方法",
Type ="EventCallback<int>"
}
};
}
}