!1756 refactor(#I475YT): make all component IsDisabled property and disabled class name to same

* refactor: 统一 Disabled 属性 * refactor: Toggle disabled 样式优化 * refactor: Slider 统一使用 is-disabled 样式 * refactor: MultiSelect 组件使用 is-disabled 样式 * refactor: Rate 组件统一使用 is-disabled 样式 * refactor: Editor 组件移除样式 * refactor: DateTimePicker 样式更改 is-disabled * refactor: TreeItem Disabled 属性更改为 IsDisabled * doc: 更新 Cascaders 示例 * refactor: Menu 组件内部使用 is-disabled 样式 * refactor: 精简 btn 样式 * refactor: DateTimeRange 统一 is-diabled 样式 * refactor: Checkbox 精简样式 * refactor: DatePicker 组件时间范围单元格样式 * refactor: DatePicker 组件统一 IsDisabled 样式 * refactor: 统一 Disabled 参数
2024-11-30 11:08:53 +08:00 · 2021-08-25 06:34:29 +00:00 · 2021-08-25 06:34:29 +00:00 · f66a5ae7ba
commit f66a5ae7ba
parent c3f602626f
61 changed files with 159 additions and 210 deletions
--- a/src/BootstrapBlazor.Shared/Pages/Samples/Cascaders.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Samples/Cascaders.razor
@ -70,11 +70,11 @@

 <Block Title="Cascader 客户端验证" Introduction="级联选择未选择时，点击提交按钮时拦截。">
    <ValidateForm Model="@Model">
-        <div class="row g-3">
+        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <Cascader Items="@Items" @bind-Value="@Model.Address"></Cascader>
            </div>
-            <div class="col-12 col-sm-6 align-items-end">
+            <div class="col-12 col-sm-6">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
--- a/src/BootstrapBlazor.Shared/Pages/Samples/Trees.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Samples/Trees.razor.cs
@ -45,7 +45,7 @@ namespace BootstrapBlazor.Shared.Pages
        private static List<TreeItem> GetDisabledItems()
        {
            var ret = TreeDataFoo.GetTreeItems();
-            ret[1].Items[1].Disabled = true;
+            ret[1].Items[1].IsDisabled = true;
            return ret;
        }

--- a/src/BootstrapBlazor/Components/BarcodeReader/BarcodeReader.razor
+++ b/src/BootstrapBlazor/Components/BarcodeReader/BarcodeReader.razor
@ -7,8 +7,8 @@
        <div class="row g-3">
            <div class="col-12">
                <div class="scanner-buttons btn-group">
-                    <Button data-method="scan" Color="Color.Primary" Text="@ButtonScanText" IsDisabled="@Disabled"></Button>
-                    <Button data-method="close" Color="Color.Danger" Text="@ButtonStopText" IsDisabled="@Disabled"></Button>
+                    <Button data-method="scan" Color="Color.Primary" Text="@ButtonScanText" IsDisabled="@IsDisabled"></Button>
+                    <Button data-method="close" Color="Color.Danger" Text="@ButtonStopText" IsDisabled="@IsDisabled"></Button>
                </div>

                <Checkbox DisplayText="@AutoStopText" ShowAfterLabel="true" @bind-Value="@AutoStop" class="mt-3" />
--- a/src/BootstrapBlazor/Components/BarcodeReader/BarcodeReader.razor.cs
+++ b/src/BootstrapBlazor/Components/BarcodeReader/BarcodeReader.razor.cs
@ -22,7 +22,7 @@ namespace BootstrapBlazor.Components

        private string AutoStopString => AutoStop ? "true" : "false";

-        private bool Disabled { get; set; } = true;
+        private bool IsDisabled { get; set; } = true;

        /// <summary>
        /// 获得/设置 扫描按钮文字 默认为 扫描
@ -162,10 +162,10 @@ namespace BootstrapBlazor.Components
        public async Task InitDevices(IEnumerable<DeviceItem> devices)
        {
            Devices = devices.Select(i => new SelectedItem { Value = i.DeviceId, Text = i.Label });
-            Disabled = !Devices.Any();
+            IsDisabled = !Devices.Any();

            if (OnInit != null) await OnInit(devices);
-            if (Disabled) InitDevicesString = NotFoundDevicesString;
+            if (IsDisabled) InitDevicesString = NotFoundDevicesString;
            StateHasChanged();
        }

--- a/src/BootstrapBlazor/Components/Button/Button.css
+++ b/src/BootstrapBlazor/Components/Button/Button.css
@ -1,44 +1,7 @@
 .btn:focus,
-.btn-secondary:not(:disabled):not(.disabled):active:focus,
-.btn-secondary:not(:disabled):not(.disabled).active:focus,
-.show > .btn-secondary.dropdown-toggle:focus,
-.btn-primary:not(:disabled):not(.disabled).active:focus,
-.btn-primary:not(:disabled):not(.disabled):active:focus,
-.show > .btn-primary.dropdown-toggle:focus,
-.btn-success:not(:disabled):not(.disabled).active:focus,
-.btn-success:not(:disabled):not(.disabled):active:focus,
-.show > .btn-success.dropdown-toggle:focus,
-.btn-info:not(:disabled):not(.disabled).active:focus,
-.btn-info:not(:disabled):not(.disabled):active:focus,
-.show > .btn-info.dropdown-toggle:focus,
-.btn-warning:not(:disabled):not(.disabled).active:focus,
-.btn-warning:not(:disabled):not(.disabled):active:focus,
-.show > .btn-warning.dropdown-toggle:focus,
-.btn-danger:not(:disabled):not(.disabled).active:focus,
-.btn-danger:not(:disabled):not(.disabled):active:focus,
-.show > .btn-danger.dropdown-toggle:focus,
-.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
-.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
-.show > .btn-outline-secondary.dropdown-toggle:focus,
-.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
-.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
-.show > .btn-outline-primary.dropdown-toggle:focus,
-.btn-outline-success:not(:disabled):not(.disabled).active:focus,
-.btn-outline-success:not(:disabled):not(.disabled):active:focus,
-.show > .btn-outline-success.dropdown-toggle:focus,
-.btn-outline-info:not(:disabled):not(.disabled).active:focus,
-.btn-outline-info:not(:disabled):not(.disabled):active:focus,
-.show > .btn-outline-info.dropdown-toggle:focus,
-.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
-.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
-.show > .btn-outline-warning.dropdown-toggle:focus,
-.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
-.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
-.show > .btn-outline-danger.dropdown-toggle:focus,
-.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
-.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
-.show > .btn-outline-dark.dropdown-toggle:focus {
-    box-shadow: none;
+.btn:active:focus,
+.show > .dropdown-toggle:focus {
+    box-shadow: none !important;
 }

 .btn-xs, .btn-group-xs > .btn {
--- a/src/BootstrapBlazor/Components/Button/ButtonBase.cs
+++ b/src/BootstrapBlazor/Components/Button/ButtonBase.cs
@ -24,7 +24,6 @@ namespace BootstrapBlazor.Components
            .AddClass($"btn-{Color.ToDescriptionString()}", Color != Color.None && !IsOutline)
            .AddClass($"btn-{Size.ToDescriptionString()}", Size != Size.None)
            .AddClass("btn-block", IsBlock)
-            .AddClass("disabled", IsDisabled)
            .AddClass("is-round", ButtonStyle == ButtonStyle.Round)
            .AddClass("is-circle", ButtonStyle == ButtonStyle.Circle)
            .AddClassFromAttributes(AdditionalAttributes)
@ -33,7 +32,7 @@ namespace BootstrapBlazor.Components
        /// <summary>
        /// 获得 按钮 disabled 属性
        /// </summary>
-        protected string? Disabled => IsDisabled ? "true" : null;
+        protected string? Disabled => IsDisabled ? "disabled" : null;

        /// <summary>
        /// 获得 按钮 tabindex 属性
--- a/src/BootstrapBlazor/Components/Camera/Camera.razor
+++ b/src/BootstrapBlazor/Components/Camera/Camera.razor
@ -23,8 +23,8 @@
        </div>
        <div class="col-12">
            <div class="btn-group">
-                <Button Text="@PlayText" Color="Color.Success" Icon="fa fa-play-circle" IsDisabled="@Disabled" data-method="play" data-camera="@ActiveCamera?.Value" />
-                <Button Text="@StopText" Color="Color.Danger" Icon="fa fa-stop-circle" IsDisabled="@Disabled" data-method="stop" />
+                <Button Text="@PlayText" Color="Color.Success" Icon="fa fa-play-circle" IsDisabled="@IsDisabled" data-method="play" data-camera="@ActiveCamera?.Value" />
+                <Button Text="@StopText" Color="Color.Danger" Icon="fa fa-stop-circle" IsDisabled="@IsDisabled" data-method="stop" />
                <Button Text="@PhotoText" Icon="fa fa-camera-retro" IsDisabled="@CaptureDisabled" data-method="capture" />
            </div>
            <a class="d-none download"></a>
--- a/src/BootstrapBlazor/Components/Camera/Camera.razor.cs
+++ b/src/BootstrapBlazor/Components/Camera/Camera.razor.cs
@ -24,7 +24,7 @@ namespace BootstrapBlazor.Components

        private string DeviceId { get; set; } = "";

-        private bool Disabled { get; set; } = true;
+        private bool IsDisabled { get; set; } = true;

        private bool CaptureDisabled { get; set; } = true;

@ -185,7 +185,7 @@ namespace BootstrapBlazor.Components
        public async Task InitDevices(IEnumerable<DeviceItem> devices)
        {
            Devices = devices.Select(i => new SelectedItem { Value = i.DeviceId, Text = i.Label });
-            Disabled = !Devices.Any();
+            IsDisabled = !Devices.Any();

            if (OnInit != null)
            {
@ -202,11 +202,11 @@ namespace BootstrapBlazor.Components
                        d.Label = $"Video device {index + 1}";
                    }
                }
-                Disabled = false;
+                IsDisabled = false;
                ActiveCamera = Cameras.First();
            }

-            if (Disabled)
+            if (IsDisabled)
            {
                InitDevicesString = NotFoundDevicesString;
            }
--- a/src/BootstrapBlazor/Components/Cascader/Cascader.razor
+++ b/src/BootstrapBlazor/Components/Cascader/Cascader.razor
@ -8,7 +8,7 @@
 }
 <div class="cascade menu">
    <div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" class="@ClassName">
-        <input type="text" id="@InputId" readonly disabled="@DisabledString" class="@InputClassName" style="@BackgroundColor" data-bs-toggle="dropdown" placeholder="@PlaceHolder" value="@_displayText" />
+        <input type="text" id="@InputId" readonly disabled="@Disabled" class="@InputClassName" style="@BackgroundColor" data-bs-toggle="dropdown" placeholder="@PlaceHolder" value="@_displayText" />
        <span class="@AppendClassName"><i class="fa fa-angle-up"></i></span>
        @if (!IsDisabled)
        {
--- a/src/BootstrapBlazor/Components/Cascader/Cascader.razor.cs
+++ b/src/BootstrapBlazor/Components/Cascader/Cascader.razor.cs
@ -132,7 +132,7 @@ namespace BootstrapBlazor.Components
        /// 获得 样式集合
        /// </summary>
        private string? ClassName => CssBuilder.Default("dropdown")
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();

--- a/src/BootstrapBlazor/Components/Checkbox/Checkbox.css
+++ b/src/BootstrapBlazor/Components/Checkbox/Checkbox.css
@ -96,23 +96,19 @@
            transform: translate(-50%,-50%) scale(1);
        }

-    .form-checkbox.is-disabled, .form-checkbox.is-disabled .radio-inner {
-        cursor: not-allowed;
+    .form-checkbox.disabled .checkbox-input .checkbox-inner,
+    .form-checkbox.disabled .radio-input .radio-inner {
+        background-color: #edf2fc;
+        border-color: #dcdfe6;
    }

-        .form-checkbox.is-disabled .checkbox-input .checkbox-inner,
-        .form-checkbox.is-disabled .radio-input .radio-inner {
-            background-color: #edf2fc;
-            border-color: #dcdfe6;
-        }
+    .form-checkbox.disabled .checkbox-label {
+        color: #c0c4cc;
+    }

-        .form-checkbox.is-disabled .checkbox-label {
-            color: #c0c4cc;
-        }
-
-        .form-checkbox.is-disabled.is-checked .checkbox-input .checkbox-inner:after {
-            border-color: #c0c4cc;
-        }
+    .form-checkbox.disabled.is-checked .checkbox-input .checkbox-inner:after {
+        border-color: #c0c4cc;
+    }

    .form-checkbox.is-indeterminate .checkbox-input .checkbox-inner:before {
        content: "";
--- a/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.cs
+++ b/src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.cs
@ -20,7 +20,7 @@ namespace BootstrapBlazor.Components
        protected virtual string? ClassString => CssBuilder.Default("form-checkbox")
            .AddClass("is-checked", State == CheckboxState.Checked)
            .AddClass("is-indeterminate", State == CheckboxState.Mixed)
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .AddClass(ValidCss)
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();
--- a/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor
+++ b/src/BootstrapBlazor/Components/ColorPicker/ColorPicker.razor
@ -6,8 +6,8 @@
    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
 }
 <div class="input-group color-picker">
-    <input @attributes="@AdditionalAttributes" type="color" class="form-control form-control-color" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
-    <input type="text" class="@ClassName" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
+    <input @attributes="@AdditionalAttributes" type="color" class="form-control form-control-color" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
+    <input type="text" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
 </div>
 <CascadingValue Value="this" IsFixed="true">
    @ChildContent
--- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor
@ -65,9 +65,18 @@
                            <tr class="date-table-row">
                                @for (var index = 0; index < 7; index++)
                                {
-                                    <td class="@GetDayClass(week.AddDays(index))">
+                                    var day = week.AddDays(index);
+                                    var text = GetDayText(day.Day);
+                                    <td class="@GetDayClass(day)">
                                        <div>
-                                            <DatePickerCell Value="@week.AddDays(index)" Text="@GetDayText(week.AddDays(index).Day)" OnClick="@(async d => await OnClickDateTime(d))" />
+                                            @if (IsDisabled(day))
+                                            {
+                                                <span class="cell">@text</span>
+                                            }
+                                            else
+                                            {
+                                                <DatePickerCell Value="@week.AddDays(index)" Text="@text" OnClick="@(async d => await OnClickDateTime(d))" />
+                                            }
                                        </div>
                                    </td>
                                }
@ -134,4 +143,4 @@
            </button>
        </div>
    }
-</div>
+</div>
--- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
@ -73,9 +73,11 @@ namespace BootstrapBlazor.Components
            .AddClass("end", IsRange && day == Ranger!.SelectedValue!.End.Date)
            .AddClass("range", IsRange && CurrentDate.Month >= Ranger!.SelectedValue.Start.Month && (Ranger!.SelectedValue.Start != DateTime.MinValue) && (Ranger!.SelectedValue.End != DateTime.MinValue) && (day.Ticks >= Ranger!.SelectedValue.Start.Ticks) && (day.Ticks <= Ranger!.SelectedValue.End.Ticks))
            .AddClass("today", day == DateTime.Today)
-            .AddClass("disabled", (MinValue != null && MaxValue != null) && (day < MinValue || day > MaxValue))
+            .AddClass("disabled", IsDisabled(day))
            .Build();

+        private bool IsDisabled(DateTime day) => (MinValue != null && MaxValue != null) && (day < MinValue || day > MaxValue);
+
        /// <summary>
        /// 获得 年月日时分秒视图样式
        /// </summary>
--- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor
@ -8,7 +8,7 @@
 }
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" @ref="Picker" data-bs-placement="@PlacementString">
    <div class="datetime-picker-bar">
-        <input readonly="readonly" class="@InputClassName" @bind="@CurrentValueAsString" placeholder="@PlaceholderString" disabled="@DisabledString" />
+        <input readonly="readonly" class="@InputClassName" @bind="@CurrentValueAsString" placeholder="@PlaceholderString" disabled="@Disabled" />
        <span class="@DateTimePickerIconClassString">
            <i class="fa fa-calendar"></i>
        </span>
--- a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.css
+++ b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.css
@ -125,7 +125,8 @@
        opacity: 1;
    }

-    .time-spinner-item.active:not(.disabled), .time-spinner-arrow:hover {
+    .time-spinner-item.active:not(.disabled),
+    .time-spinner-arrow:hover {
        color: #409eff;
    }

--- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.css
+++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.css
@ -5,10 +5,10 @@
    border: 1px solid #dcdfe6;
    color: #606266;
    display: inline-block;
-    height: 40px;
+    height: 35px;
    outline: none;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-    padding: 3px 10px;
+    padding: 0px 10px;
    position: relative;
 }

@ -52,12 +52,6 @@
        color: #303133;
    }

-.datetime-range.disabled,
-.datetime-range.disabled .datetime-range-bar .datetime-range-input,
-.datetime-range.disabled .datetime-range-bar .datetime-range-input-icon {
-    cursor: not-allowed;
-}
-
 .range-panel-body {
    display: flex;
 }
@ -101,7 +95,7 @@
    cursor: pointer;
    position: absolute;
    right: 10px;
-    top: 12px;
+    top: 11px;
 }

 .datetime-range:hover:not(.disabled) .range-clear {
--- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
+++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
@ -11,10 +11,10 @@
            <span class="@DateTimePickerIconClassString">
                <i class="fa fa-calendar"></i>
            </span>
-            <input readonly="readonly" class="datetime-range-input" value="@StartValueString" placeholder="@StartPlaceHolderText" disabled="@DisabledString" />
+            <input readonly="readonly" class="datetime-range-input" value="@StartValueString" placeholder="@StartPlaceHolderText" disabled="@Disabled" />
        </div>
        <span class="range-separator">@SeparateText</span>
-        <input readonly="readonly" class="datetime-range-input" value="@EndValueString" placeholder="@EndPlaceHolderText" disabled="@DisabledString" />
+        <input readonly="readonly" class="datetime-range-input" value="@EndValueString" placeholder="@EndPlaceHolderText" disabled="@Disabled" />
    </div>
    @if (AllowNull)
    {
--- a/src/BootstrapBlazor/Components/Editor/Editor.css
+++ b/src/BootstrapBlazor/Components/Editor/Editor.css
@ -40,10 +40,6 @@
    border-color: #00000032;
 }

-    .editor .btn-light:active:focus {
-        box-shadow: none;
-    }
-
    .editor .btn-light:hover {
        background-color: #e2e6ea;
        border-color: #dae0e5;
--- a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
+++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor
@ -13,7 +13,7 @@
        <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
    }
 }
-<input @attributes="@AdditionalAttributes" type="@Type" placeholder="@PlaceHolder" id="@Id" class="@ClassName" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
+<input @attributes="@AdditionalAttributes" type="@Type" placeholder="@PlaceHolder" id="@Id" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
 <CascadingValue Value="this" IsFixed="true">
    @ChildContent
 </CascadingValue>
--- a/src/BootstrapBlazor/Components/Input/BootstrapPassword.razor
+++ b/src/BootstrapBlazor/Components/Input/BootstrapPassword.razor
@ -5,7 +5,7 @@
 {
    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
 }
-<input @attributes="AdditionalAttributes" type="password" placeholder="@PlaceHolder" id="@Id" class="@ClassName" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
+<input @attributes="AdditionalAttributes" type="password" placeholder="@PlaceHolder" id="@Id" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" />
 <CascadingValue Value="this" IsFixed="true">
    @ChildContent
 </CascadingValue>
--- a/src/BootstrapBlazor/Components/Input/FloatingLabel.razor
+++ b/src/BootstrapBlazor/Components/Input/FloatingLabel.razor
@ -3,6 +3,6 @@
@inherits BootstrapInput<TValue>

 <div class="form-floating">
-	<input @attributes="@AdditionalAttributes" type="@Type" id="@Id" placeholder="placeholder" class="@ClassName" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange">
+	<input @attributes="@AdditionalAttributes" type="@Type" id="@Id" placeholder="placeholder" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange">
 	<label for="@Id">@LabelText</label>
 </div>
--- a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor
+++ b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor
@ -9,18 +9,18 @@
@if (ShowButton)
 {
    <div class="input-group">
-        <button class="@ButtonClassString" type="button" @onclick="OnClickDec" disabled="@DisabledString">
+        <button class="@ButtonClassString" type="button" @onclick="OnClickDec" disabled="@Disabled">
            <i class="fa fa-fw fa-minus-circle"></i>
        </button>
-        <input @attributes="AdditionalAttributes" step="@StepString" min="@Min" max="@Max" id="@Id" type="number" class="@InputClassString" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" @onblur="@OnBlur" />
-        <button class="@ButtonClassString" type="button" @onclick="OnClickInc" disabled="@DisabledString">
+        <input @attributes="AdditionalAttributes" step="@StepString" min="@Min" max="@Max" id="@Id" type="number" class="@InputClassString" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" @onblur="@OnBlur" />
+        <button class="@ButtonClassString" type="button" @onclick="OnClickInc" disabled="@Disabled">
            <i class="fa fa-fw fa-plus-circle"></i>
        </button>
    </div>
 }
 else
 {
-    <input @attributes="AdditionalAttributes" step="@StepString" min="@Min" max="@Max" id="@Id" type="number" class="@InputClassString" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" @onblur="@OnBlur" />
+    <input @attributes="AdditionalAttributes" step="@StepString" min="@Min" max="@Max" id="@Id" type="number" class="@InputClassString" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange" @onblur="@OnBlur" />
 }
 <CascadingValue Value="this" IsFixed="true">
    @ChildContent
--- a/src/BootstrapBlazor/Components/Menu/Menu.css
+++ b/src/BootstrapBlazor/Components/Menu/Menu.css
@ -1,5 +1,4 @@
-/*menu*/
-.menu .nav {
+.menu .nav {
    padding: 0 1rem;
    border-bottom: 1px solid #e6e6e6;
 }
@ -34,7 +33,7 @@
 }

    .menu .nav .nav-link.active,
-    .menu .nav .nav-link:hover {
+    .menu .nav .nav-link:not(.disabled):hover {
        color: #1890ff;
    }

@ -45,13 +44,13 @@
    margin-top: 10px;
 }

-    .menu .nav .dropdown-menu .nav-link:hover,
+    .menu .nav .dropdown-menu .nav-link:not(.disabled):hover,
    .menu .nav .dropdown-menu .nav-link.active,
    .menu .submenu .nav-link.active,
-    .menu .submenu .nav-link:hover,
-    .cascade .dropdown-item:hover,
+    .menu .submenu .nav-link:not(.disabled):hover,
+    .cascade .dropdown-item:not(.disabled):hover,
    .cascade .dropdown-item.active,
-    .cascade .nav .nav-link:hover,
+    .cascade .nav .nav-link:not(.disabled):hover,
    .cascade .nav .nav-link.active {
        background-color: #60aff9;
        color: #16181b;
@ -110,12 +109,9 @@
    overflow: hidden;
 }

-.menu li.disabled,
 .menu .nav-link.disabled {
-    cursor: not-allowed;
    color: #ddd;
 }
-/*end menu*/

 .menu .nav .nav-link .text {
    margin-left: 4px;
--- a/src/BootstrapBlazor/Components/Menu/MenuLink.razor
+++ b/src/BootstrapBlazor/Components/Menu/MenuLink.razor
@ -1,14 +1,24 @@
@namespace BootstrapBlazor.Components
@inherits BootstrapComponentBase

-<NavLink @attributes="@AdditionalAttributes" class="@ClassString" href="@HrefString" target="@TargetString" @onclick="@OnClickLink" Match="@ItemMatch" style="@StyleClassString">
-    <i class="@IconString"></i>
-    <span class="text">@Item.Text</span>
-    @if (Item.Component != null)
-    {
-        <div class="widget">
-            @Item.Component.Render()
-        </div>
-    }
-    <i class="@MenuArrowClassString" />
-</NavLink>
+@if (Item.IsDisabled)
+{
+    <div class="nav-link disabled">
+        <i class="@IconString"></i>
+        <span class="text">@Item.Text</span>
+    </div>
+}
+else
+{
+    <NavLink @attributes="@AdditionalAttributes" class="@ClassString" href="@HrefString" target="@TargetString" @onclick="@OnClickLink" Match="@ItemMatch" style="@StyleClassString">
+        <i class="@IconString"></i>
+        <span class="text">@Item.Text</span>
+        @if (Item.Component != null)
+        {
+            <div class="widget">
+                @Item.Component.Render()
+            </div>
+        }
+        <i class="@MenuArrowClassString" />
+    </NavLink>
+}
--- a/src/BootstrapBlazor/Components/Menu/SideMenu.razor
+++ b/src/BootstrapBlazor/Components/Menu/SideMenu.razor
@ -6,14 +6,17 @@
    {
        if (item.Items.Any())
        {
-            <li class="@item.GetDisabledClassString()">
+            <li>
                <MenuLink Item="@item" OnClick="@OnClick" />
-                <SideMenu Items="@item.Items" OnClick="@OnClick" class="d-none" />
+                @if (!item.IsDisabled)
+                {
+                    <SideMenu Items="@item.Items" OnClick="@OnClick" class="d-none" />
+                }
            </li>
        }
        else
        {
-            <li class="@item.GetDisabledClassString()">
+            <li>
                <MenuLink Item="@item" OnClick="@OnClick" />
            </li>
        }
--- a/src/BootstrapBlazor/Components/Menu/TopMenu.razor
+++ b/src/BootstrapBlazor/Components/Menu/TopMenu.razor
@ -15,8 +15,7 @@
                </a>
                @if (!menu.IsDisabled)
                {
-                    <div class="dropdown-menu-arrow"></div>
-                    <div class="dropdown-menu">
+                    <div class="dropdown-menu shadow">
                        @foreach (var item in menu.Items)
                        {
                            @if (item.Items.Any())
--- a/src/BootstrapBlazor/Components/Menu/TopMenu.razor.cs
+++ b/src/BootstrapBlazor/Components/Menu/TopMenu.razor.cs
@ -25,7 +25,7 @@ namespace BootstrapBlazor.Components
        private string? GetDropdownClassString(MenuItem item, string className = "") => CssBuilder.Default(className)
            .AddClass("dropdown", string.IsNullOrEmpty(className) && !Parent.IsBottom)
            .AddClass("dropup", string.IsNullOrEmpty(className) && Parent.IsBottom)
-            .AddClass(item.GetDisabledClassString())
+            .AddClass("disabled", item.IsDisabled)
            .AddClass("active", item.IsActive)
            .Build();

--- a/src/BootstrapBlazor/Components/Rate/Rate.css
+++ b/src/BootstrapBlazor/Components/Rate/Rate.css
@ -5,10 +5,6 @@
    cursor: pointer;
 }

-    .rate.disabled {
-        cursor: not-allowed;
-    }
-
    .rate .rate-item {
        width: 18px;
        height: 100%;
--- a/src/BootstrapBlazor/Components/Rate/Rate.razor
+++ b/src/BootstrapBlazor/Components/Rate/Rate.razor
@ -1,7 +1,7 @@
@namespace BootstrapBlazor.Components
@inherits BootstrapComponentBase

-<div @attributes="@AdditionalAttributes" class="@ClassString" role="slider" aria-valuetext="" aria-valuemin="1" aria-valuemax="5" tabindex="0" aria-valuenow="@(Value==0 ? 0 : Value-1)" @ref="@RateElement">
+<div @attributes="@AdditionalAttributes" class="@ClassString" role="slider" aria-valuetext="" aria-valuemin="1" aria-valuemax="5" tabindex="0" aria-valuenow="@(Value==0 ? 0 : Value - 1)" @ref="@RateElement">
    @for (int i = 1; i < 6; i++)
    {
        <span class="@GetItemClassString(i)">
--- a/src/BootstrapBlazor/Components/Select/MultiSelect.css
+++ b/src/BootstrapBlazor/Components/Select/MultiSelect.css
@ -4,10 +4,6 @@
    border-radius: 4px;
 }

-    .multi-select.disabled {
-        background-color: #eee;
-    }
-
    .multi-select .dropdown-menu-toggle {
        border: solid 1px #ddd;
        border-radius: 4px;
@ -18,7 +14,7 @@
    }

        .multi-select .dropdown-menu-toggle.disabled {
-            cursor: not-allowed;
+            background-color: #eee;
        }

        .multi-select .dropdown-menu-toggle .clear {
@ -109,10 +105,10 @@
            transition: color .3s linear, background-color .3s linear;
        }

-            .multi-select .multi-select-items .multi-select-close:hover {
-                color: #333;
-                background-color: #ddd;
-            }
+    .multi-select :not(.disabled) .multi-select-items .multi-select-close:hover {
+        color: #333;
+        background-color: #ddd;
+    }

    .multi-select .dropdown-menu {
        margin-top: 10px;
--- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs
@ -31,7 +31,6 @@ namespace BootstrapBlazor.Components

        private string? ClassString => CssBuilder.Default("multi-select")
            .AddClass("show", IsShow)
-            .AddClass("disabled", IsDisabled)
            .Build();

        private string? ToggleClassString => CssBuilder.Default("dropdown-menu-toggle")
--- a/src/BootstrapBlazor/Components/Select/Select.css
+++ b/src/BootstrapBlazor/Components/Select/Select.css
@ -46,12 +46,12 @@
    cursor: pointer;
 }

-    [data-bs-toggle="lgbSelect"] .dropdown-menu .dropdown-item.is-disabled {
+    [data-bs-toggle="lgbSelect"] .dropdown-menu .dropdown-item.disabled {
        color: #c0c4cc;
        cursor: not-allowed;
    }

-        [data-bs-toggle="lgbSelect"] .dropdown-menu .dropdown-item.is-disabled:active {
+        [data-bs-toggle="lgbSelect"] .dropdown-menu .dropdown-item.disabled:active {
            background-color: #f8f9fa;
        }

@ -111,14 +111,14 @@
    margin-top: 2px;
 }

-.is-disabled .form-select {
+.disabled .form-select {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
 }

-.is-disabled .form-select-append {
+.disabled .form-select-append {
    color: #c0c4cc;
 }

--- a/src/BootstrapBlazor/Components/Select/Select.js
+++ b/src/BootstrapBlazor/Components/Select/Select.js
@ -19,7 +19,7 @@
            $el.on('keyup', function (e) {
                var $this = $(this);
                if ($this.find('.dropdown-toggle').hasClass('show')) {
-                    var $items = $this.find('.dropdown-menu.show > .dropdown-item').not('.is-disabled, .search');
+                    var $items = $this.find('.dropdown-menu.show > .dropdown-item').not('.disabled, .search');

                    var $activeItem = $items.filter(function (index, ele) {
                        return $(ele).hasClass('active');
@ -28,7 +28,7 @@
                    if ($items.length > 1) {
                        if (e.key === "ArrowUp") {
                            $activeItem.removeClass('active');
-                            var $prev = $activeItem.prev().not('.is-disabled, .search');
+                            var $prev = $activeItem.prev().not('.disabled, .search');
                            if ($prev.length === 0) {
                                $prev = $items.last();
                            }
@ -36,7 +36,7 @@
                        }
                        else if (e.key === "ArrowDown") {
                            $activeItem.removeClass('active');
-                            var $next = $activeItem.next().not('.is-disabled, .search');
+                            var $next = $activeItem.next().not('.disabled, .search');
                            if ($next.length === 0) {
                                $next = $items.first();
                            }
@ -55,7 +55,7 @@
                }
            });

-            $el.on('click', '.dropdown-item.is-disabled', function (e) {
+            $el.on('click', '.dropdown-item.disabled', function (e) {
                e.stopImmediatePropagation();
            });
        }
--- a/src/BootstrapBlazor/Components/Select/Select.razor
+++ b/src/BootstrapBlazor/Components/Select/Select.razor
@ -15,7 +15,7 @@
            ResetSelectedItem();
        }
        <div class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-            <input type="text" id="@InputId" readonly disabled="@DisabledString" class="@InputClassName" value="@SelectedItem?.Text" />
+            <input type="text" id="@InputId" readonly disabled="@Disabled" class="@InputClassName" value="@SelectedItem?.Text" />
            <span class="@AppendClassName"><i class="fa fa-angle-up"></i></span>
        </div>
        <div class="dropdown-menu shadow">
--- a/src/BootstrapBlazor/Components/Select/Select.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/Select.razor.cs
@ -27,7 +27,7 @@ namespace BootstrapBlazor.Components
        /// 获得 样式集合
        /// </summary>
        private string? ClassName => CssBuilder.Default("select dropdown")
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();

@ -57,7 +57,7 @@ namespace BootstrapBlazor.Components
        /// <returns></returns>
        private string? ActiveItem(SelectedItem item) => CssBuilder.Default("dropdown-item")
            .AddClass("active", () => item.Value == CurrentValueAsString)
-            .AddClass("is-disabled", item.IsDisabled)
+            .AddClass("disabled", item.IsDisabled)
            .Build();

        /// <summary>
--- a/src/BootstrapBlazor/Components/Slider/Slider.css
+++ b/src/BootstrapBlazor/Components/Slider/Slider.css
@ -25,11 +25,9 @@
        background-color: #c0c4cc;
    }

-    .slider-runway.disabled .slider-button-wrapper, .slider-runway.disabled .slider-button.dragging, .slider-runway.disabled .slider-button.hover, .slider-runway.disabled .slider-button:hover {
-        cursor: not-allowed;
-    }
-
-    .slider-runway.disabled .slider-button.dragging, .slider-runway.disabled .slider-button.hover, .slider-runway.disabled .slider-button:hover {
+    .slider-runway.disabled .slider-button.dragging,
+    .slider-runway.disabled .slider-button.hover,
+    .slider-runway.disabled .slider-button:hover {
        transform: scale(1);
    }

--- a/src/BootstrapBlazor/Components/Slider/SliderBase.cs
+++ b/src/BootstrapBlazor/Components/Slider/SliderBase.cs
@ -26,7 +26,7 @@ namespace BootstrapBlazor.Components
        /// <summary>
        /// 获得 按钮 disabled 属性
        /// </summary>
-        protected string? Disabled => IsDisabled ? "true" : null;
+        protected string? Disabled => IsDisabled ? "disabled" : null;

        /// <summary>
        /// 获得/设置 是否禁用
--- a/src/BootstrapBlazor/Components/Switch/NullSwitch.razor.cs
+++ b/src/BootstrapBlazor/Components/Switch/NullSwitch.razor.cs
@ -19,7 +19,7 @@ namespace BootstrapBlazor.Components
        /// </summary>
        private string? ClassName => CssBuilder.Default("switch")
            .AddClass("is-checked", ComponentValue)
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();

--- a/src/BootstrapBlazor/Components/Switch/Switch.css
+++ b/src/BootstrapBlazor/Components/Switch/Switch.css
@ -56,14 +56,10 @@
        cursor: pointer;
    }

-    .switch.is-disabled {
+    .switch.disabled {
        opacity: 0.6;
    }

-    .switch.is-disabled, .switch.switch.is-disabled .switch-core, .switch.switch.is-disabled .switch-label {
-        cursor: not-allowed;
-    }
-
    .switch .switch-inner-text {
        font-size: 80%;
    }
--- a/src/BootstrapBlazor/Components/Switch/Switch.razor.cs
+++ b/src/BootstrapBlazor/Components/Switch/Switch.razor.cs
@ -16,7 +16,7 @@ namespace BootstrapBlazor.Components
    {
        private string? ClassName => CssBuilder.Default("switch")
            .AddClass("is-checked", Value)
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();

--- a/src/BootstrapBlazor/Components/Table/Filter/TableFilter.css
+++ b/src/BootstrapBlazor/Components/Table/Filter/TableFilter.css
@ -91,7 +91,7 @@
            transition: border-color .3s linear, color .3s linear;
        }

-            .table-filter .card-footer .btn:not(.is-disabled):not(:disabled):hover {
+            .table-filter .card-footer .btn:not(.disabled):not(:disabled):hover {
                border-color: #409eff;
                color: #409eff;
            }
--- a/src/BootstrapBlazor/Components/Textarea/Textarea.razor
+++ b/src/BootstrapBlazor/Components/Textarea/Textarea.razor
@ -5,7 +5,7 @@
 {
    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
 }
-<textarea @attributes="AdditionalAttributes" id="@Id" class="@ClassName" disabled="@DisabledString" @bind-value="@CurrentValueAsString" @bind-value:event="onchange"></textarea>
+<textarea @attributes="AdditionalAttributes" id="@Id" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="onchange"></textarea>
 <CascadingValue Value="this" IsFixed="true">
    @ChildContent
 </CascadingValue>
--- a/src/BootstrapBlazor/Components/Toggle/Toggle.css
+++ b/src/BootstrapBlazor/Components/Toggle/Toggle.css
@ -6,11 +6,6 @@
    min-height: 35px;
 }

-    .btn-toggle.disabled .toggle-group label,
-    .btn-toggle.disabled .toggle-group span {
-        cursor: not-allowed;
-    }
-
    .btn-toggle.off .toggle-group {
        left: -100%;
    }
--- a/src/BootstrapBlazor/Components/Transfer/Transfer.css
+++ b/src/BootstrapBlazor/Components/Transfer/Transfer.css
@ -73,7 +73,11 @@
            margin-left: 10px;
        }

-    .transfer-buttons .is-disabled, .transfer-buttons .is-disabled:active, .transfer-buttons .is-disabled:focus, .transfer-buttons .is-disabled:hover, .transfer-buttons [disabled] {
+    .transfer-buttons .disabled,
+    .transfer-buttons .disabled:active,
+    .transfer-buttons .disabled:focus,
+    .transfer-buttons .disabled:hover,
+    .transfer-buttons [disabled] {
        color: #fff;
        background-color: #a0cfff;
        border-color: #a0cfff;
@ -118,12 +122,12 @@
        color: #c0c4cc;
    }

-        .transfer-panel-filter .input-prefix:not(.is-disabled):hover i:before,
+        .transfer-panel-filter .input-prefix:not(.disabled):hover i:before,
        .transfer-panel-filter .input-prefix.is-on i:before {
            cursor: pointer;
            content: "\f057";
        }

-        .transfer-panel-filter .input-prefix.is-disabled:hover i:before {
+        .transfer-panel-filter .input-prefix.disabled:hover i:before {
            cursor: not-allowed;
        }
--- a/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor
+++ b/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor
@ -10,7 +10,7 @@
        @if (ShowSearch)
        {
            <div class="transfer-panel-filter">
-                <input type="text" autocomplete="off" placeholder="@SearchPlaceHolderString" disabled="@DisabledString" class="input-inner" value="@SearchText" @oninput="@OnSearch" @onkeyup="@OnKeyUp">
+                <input type="text" autocomplete="off" placeholder="@SearchPlaceHolderString" disabled="@Disabled" class="input-inner" value="@SearchText" @oninput="@OnSearch" @onkeyup="@OnKeyUp">
                <span class="@SearchClass" @onclick="@ClearSearch">
                    <i class="fa fa-search"></i>
                </span>
--- a/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor.cs
+++ b/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor.cs
@ -32,7 +32,7 @@ namespace BootstrapBlazor.Components
        /// </summary>
        private string? SearchClass => CssBuilder.Default("input-prefix")
            .AddClass("is-on", !string.IsNullOrEmpty(SearchText))
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .Build();

        /// <summary>
@ -45,7 +45,7 @@ namespace BootstrapBlazor.Components
        /// <summary>
        /// 获得 组件是否被禁用属性值
        /// </summary>
-        private string? DisabledString => IsDisabled ? "disabled" : null;
+        private string? Disabled => IsDisabled ? "disabled" : null;

        /// <summary>
        /// 获得/设置 数据集合
--- a/src/BootstrapBlazor/Components/Tree/Tree.razor
+++ b/src/BootstrapBlazor/Components/Tree/Tree.razor
@ -41,7 +41,7 @@ private RenderFragment<TreeItem> RenderTreeItem => item =>
        <i class="@GetCaretClassString(item)" @onclick="@(EventCallback.Factory.Create<MouseEventArgs>(this, () => OnExpandRowAsync(item)))"></i>
        @if (ShowCheckbox)
        {
-            <Checkbox @bind-Value="@item.Checked" IsDisabled="@item.Disabled" SkipValidate="true"
+            <Checkbox @bind-Value="@item.Checked" IsDisabled="@item.IsDisabled" SkipValidate="true"
                      ShowLabel="false" ShowAfterLabel="false"
                      OnStateChanged="@(new Func<CheckboxState, bool, Task>((state, v) => OnStateChanged(state, item)))" />
        }
--- a/src/BootstrapBlazor/Components/Tree/TreeItem.cs
+++ b/src/BootstrapBlazor/Components/Tree/TreeItem.cs
@ -2,6 +2,7 @@
 // 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 System;
 using System.Collections.Generic;
 using System.Linq;

@ -62,8 +63,14 @@ namespace BootstrapBlazor.Components
        /// 获得/设置 是否被禁用 默认 false
        /// </summary>
        /// <value></value>
+        [Obsolete("请使用 IsDisabled 属性，本属性已过期", true)]
        public bool Disabled { get; set; }

+        /// <summary>
+        /// 获得/设置 是否被禁用 默认 false
+        /// </summary>
+        public bool IsDisabled { get; set; }
+
        /// <summary>
        /// 获得/设置 是否展开 默认 false 不展开
        /// </summary>
--- a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs
+++ b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs
@ -23,7 +23,7 @@ namespace BootstrapBlazor.Components
            .AddClass("is-invalid", !IsDisabled && item.IsValid.HasValue && !item.IsValid.Value)
            .AddClass("is-valid", !IsDisabled && !item.IsValid.HasValue && item.Uploaded && item.Code == 0)
            .AddClass("is-invalid", !IsDisabled && !item.IsValid.HasValue && item.Code != 0)
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .Build();

        /// <summary>
@ -31,7 +31,7 @@ namespace BootstrapBlazor.Components
        /// </summary>
        protected override string? ItemClassString => CssBuilder.Default(base.ItemClassString)
            .AddClass("is-circle", IsCircle)
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .Build();

        /// <summary>
--- a/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs
+++ b/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs
@ -18,7 +18,7 @@ namespace BootstrapBlazor.Components
        private string? GetDeleteButtonDiabledString(UploadFile item) => (!IsDisabled && item.Uploaded) ? null : "disabled";

        private string? CardItemClass => CssBuilder.Default("upload-item")
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .Build();

        private static bool IsImage(UploadFile item)
--- a/src/BootstrapBlazor/Components/Upload/InputUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/InputUpload.razor
@ -8,7 +8,7 @@
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" @ref="UploaderElement">
    <div class="input-group">
-        <input type="text" class="@InputValueClassString" id="@Id" disabled="@DisabledString" readonly placeholder="@PlaceHolder" value="@GetFileName(CurrentFile)" />
+        <input type="text" class="@InputValueClassString" id="@Id" disabled="@Disabled" readonly placeholder="@PlaceHolder" value="@GetFileName(CurrentFile)" />
        @if (ShowDeleteButton)
        {
            <Button class="@RemoveButtonClassString" IsDisabled="@IsDeleteButtonDisabled" Icon="@DeleteButtonIcon" Text="@DeleteButtonText" OnClick="@OnDeleteFile" />
--- a/src/BootstrapBlazor/Components/Upload/MultipleUploadBase.cs
+++ b/src/BootstrapBlazor/Components/Upload/MultipleUploadBase.cs
@ -22,7 +22,7 @@ namespace BootstrapBlazor.Components
        protected string? GetItemClassString(UploadFile item) => CssBuilder.Default(ItemClassString)
            .AddClass("is-valid", item.Uploaded && item.Code == 0)
            .AddClass("is-invalid", item.Code != 0)
-            .AddClass("is-disabled", IsDisabled)
+            .AddClass("disabled", IsDisabled)
            .Build();

        /// <summary>
--- a/src/BootstrapBlazor/Components/Upload/Upload.css
+++ b/src/BootstrapBlazor/Components/Upload/Upload.css
@ -50,14 +50,14 @@
                }

            .upload .upload-body.is-list .upload-item .fa-trash-o,
-            .upload .upload-body.is-list .upload-item:not(.is-disabled):hover .fa-check-circle-o,
+            .upload .upload-body.is-list .upload-item:not(.disabled):hover .fa-check-circle-o,
            .upload .upload-body.is-list .upload-item:hover .fa-times-circle-o,
            .upload .upload-body.is-avatar .upload-item .upload-item-delete,
            .upload .upload-body.is-avatar .upload-item.is-invalid .upload-item-spin,
            .upload .upload-body.is-avatar .upload-item.is-valid .upload-item-spin,
            .upload .upload-item.is-invalid .fa-check,
            .upload .upload-item.is-valid .fa-times,
-            .upload .upload-body.is-avatar .upload-item.is-disabled .upload-item-plus {
+            .upload .upload-body.is-avatar .upload-item.disabled .upload-item-plus {
                display: none;
            }

@ -91,7 +91,7 @@
            .upload .upload-body.is-avatar .upload-item:not(.is-form):hover,
            .upload .upload-body.is-avatar .upload-item:not(.is-form).is-valid,
            .upload .upload-body.is-card .upload-item.is-valid,
-            .upload .upload-body.is-card .upload-item:not(.is-disabled):hover {
+            .upload .upload-body.is-card .upload-item:not(.disabled):hover {
                border-color: #409eff;
            }

--- a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs
+++ b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs
@ -59,7 +59,7 @@ namespace BootstrapBlazor.Components
        /// <summary>
        /// 获得 组件是否被禁用属性值
        /// </summary>
-        protected string? DisabledString => IsDisabled ? "disabled" : null;
+        protected string? Disabled => IsDisabled ? "disabled" : null;

        /// <summary>
        /// 是否显示 必填项标记
--- a/src/BootstrapBlazor/Extensions/MenuItemExtensions.cs
+++ b/src/BootstrapBlazor/Extensions/MenuItemExtensions.cs
@ -9,14 +9,6 @@ namespace BootstrapBlazor.Components
    /// </summary>
    public static class MenuItemExtensions
    {
-        /// <summary>
-        /// 通过 MenumItem 获取 IsDisabled 状态字符串
-        /// </summary>
-        /// <returns></returns>
-        public static string? GetDisabledClassString(this MenuItem item) => CssBuilder.Default()
-            .AddClass("disabled", item.IsDisabled)
-            .Build();
-
        /// <summary>
        /// 级联设置 <see cref="MenuItem"/> Active 状态
        /// </summary>
--- a/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css
+++ b/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css
--- a/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css
+++ b/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css
@ -47,13 +47,11 @@ form .form-control.is-display {
    background-color: #ebeef5;
 }

-input:disabled,
-.btn:disabled,
-.datetime-picker-input-icon.disabled,
-.datetime-picker-input.is-disabled,
-.datetime-picker-input:disabled,
-.upload.is-disabled {
-    cursor: not-allowed;
+[disabled],
+:disabled,
+.disabled,
+.disabled > * {
+    cursor: not-allowed !important;
 }

 .form-control:focus {
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js