Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

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>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload