Merge branch 'dev'

src/BootstrapBlazor.WebConsole/Pages/Alerts.razor

@@ -0,0 +1,59 @@
+@page "/alerts"
+
+<Block Title="Alerts 警告框" Introduction="提供各种颜色的警告信息框">
+  <CardBodyTemplate>
+    <Alert Color="Color.Primary">主要的警告框</Alert>
+    <Alert Color="Color.Secondary">次要的警告框</Alert>
+    <Alert Color="Color.Success">成功的警告框</Alert>
+    <Alert Color="Color.Danger">危险的警告框</Alert>
+    <Alert Color="Color.Warning">警告的警告框</Alert>
+    <Alert Color="Color.Info">信息的警告框</Alert>
+    <Alert Color="Color.Dark">黑暗的警告框</Alert>
+  </CardBodyTemplate>
+  <CodeTemplate>
+    <pre>
+&lt;Alert Color="Color.Primary"&gt;主要的警告框&lt;/Alert&gt;
+&lt;Alert Color="Color.Secondary"&gt;次要的警告框&lt;/Alert&gt;
+&lt;Alert Color="Color.Success"&gt;成功的警告框&lt;/Alert&gt;
+&lt;Alert Color="Color.Danger"&gt;危险的警告框&lt;/Alert&gt;
+&lt;Alert Color="Color.Warning"&gt;警告的警告框&lt;/Alert&gt;
+&lt;Alert Color="Color.Info"&gt;信息的警告框&lt;/Alert&gt;
+&lt;Alert Color="Color.Dark"&gt;暗的警告框&lt;/Alert&gt;
+    </pre>
+  </CodeTemplate>
+</Block>
+
+<Block Title="带关闭按钮" Introduction="提供关闭按钮的警告框">
+  <CardBodyTemplate>
+    <Alert ShowDismiss="true" Color="Color.Primary">主要的警告框</Alert>
+    <Alert ShowDismiss="true" Color="Color.Secondary">次要的警告框</Alert>
+    <Alert ShowDismiss="true" Color="Color.Success">成功的警告框</Alert>
+    <Alert ShowDismiss="true" Color="Color.Danger">危险的警告框</Alert>
+    <Alert ShowDismiss="true" Color="Color.Warning">警告的警告框</Alert>
+    <Alert ShowDismiss="true" Color="Color.Info">信息的警告框</Alert>
+    <Alert ShowDismiss="true" Color="Color.Dark">黑暗的警告框</Alert>
+  </CardBodyTemplate>
+  <CodeTemplate>
+    <pre>
+&lt;Alert ShowDismiss="true" Color="Color.Primary"&gt;主要的警告框&lt;/Alert&gt;
+&lt;Alert ShowDismiss="true" Color="Color.Secondary"&gt;次要的警告框&lt;/Alert&gt;
+&lt;Alert ShowDismiss="true" Color="Color.Success"&gt;成功的警告框&lt;/Alert&gt;
+&lt;Alert ShowDismiss="true" Color="Color.Danger"&gt;危险的警告框&lt;/Alert&gt;
+&lt;Alert ShowDismiss="true" Color="Color.Warning"&gt;警告的警告框&lt;/Alert&gt;
+&lt;Alert ShowDismiss="true" Color="Color.Info"&gt;信息的警告框&lt;/Alert&gt;
+&lt;Alert ShowDismiss="true" Color="Color.Dark"&gt;暗的警告框&lt;/Alert&gt;
+    </pre>
+  </CodeTemplate>
+</Block>
+
+<Attributes>
+  <HeaderTemplate>
+    <th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th>
+  </HeaderTemplate>
+  <RowTemplate>
+    <tr><td>Color</td><td>颜色</td><td>Color</td><td>Primary / Secondary / Success / Danger / Warning / Info / Dark</td><td>Primary</td></tr>
+    <tr><td>Class</td><td>样式</td><td>string</td><td> — </td><td> — </td></tr>
+    <tr><td>ChildContent</td><td>内容</td><td>RenderFragment</td><td> — </td><td> — </td></tr>
+    <tr><td>ShowDismiss</td><td>关闭按钮</td><td>boolean</td><td> — </td><td>false</td></tr>
+  </RowTemplate>
+</Attributes>

src/BootstrapBlazor.WebConsole/Pages/Buttons.razor

@@ -4,7 +4,7 @@
   <CardBodyTemplate>
       <div class="form-inline">
         <div class="row">
-          <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Primary">主要按钮</Button></div>
+          <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Primary" @onclick="OnClick">主要按钮</Button></div>
           <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Secondary">次要按钮</Button></div>
           <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Success">成功按钮</Button></div>
           <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Color="Color.Danger">危险按钮</Button></div>
@@ -137,4 +137,11 @@
     <tr><td>Size</td><td>尺寸</td><td>Size</td><td>None / ExtraSmall / Small / Medium / Large / ExtraLarge</td><td>None</td></tr>
     <tr><td>Value</td><td>值</td><td>string</td><td> — </td><td> — </td></tr>
   </RowTemplate>
-</Attributes>
+</Attributes>
+
+@code {
+  public void OnClick()
+      {
+          Console.WriteLine("Button Clicked");
+      }
+}

src/BootstrapBlazor.WebConsole/Properties/launchSettings.json

@@ -15,11 +15,6 @@
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
     },
-    "Docker": {
-      "commandName": "Docker",
-      "launchBrowser": true,
-      "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}"
-    },
     "BootstrapBlazor": {
       "commandName": "Project",
       "launchBrowser": true,
@@ -27,6 +22,11 @@
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "applicationUrl": "http://localhost:50853/"
+    },
+    "Docker": {
+      "commandName": "Docker",
+      "launchBrowser": true,
+      "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}"
     }
   }
 }

src/BootstrapBlazor.WebConsole/wwwroot/css/site.css

@@ -21,10 +21,10 @@ header {
     font-size: 1rem;
 }
 
-header.navbar {
+    header.navbar {
-    padding: 5px 16px;
+        padding: 5px 16px;
-    font-size: 1rem;
+        font-size: 1rem;
-}
+    }
 
     header .nav-link img {
         height: 24px;
@@ -38,13 +38,13 @@ header.navbar {
     margin-right: 0;
 }
 
-.header-img img {
+    .header-img img {
-    width: 40px;
+        width: 40px;
-    height: auto;
+        height: auto;
-    border-radius: 6px;
+        border-radius: 6px;
-    border: solid 1px rgba(255, 255, 255, 0.5);
+        border: solid 1px rgba(255, 255, 255, 0.5);
-    margin-right: 1rem;
+        margin-right: 1rem;
-}
+    }
 
 .btn-bd-download {
     font-weight: 600;
@@ -115,42 +115,42 @@ section {
             font-weight: 400;
         }
 
-            .sidebar a.active, .sidebar a:hover {
+    .sidebar a.active, .sidebar a:hover {
-                background-color: rgba(255,255,255,0.25);
+        background-color: rgba(255,255,255,0.25);
-                color: #333;
+        color: #333;
-            }
+    }
 
-            .sidebar .nav-link.active {
+    .sidebar .nav-link.active {
-                color: #007bff;
+        color: #007bff;
-            }
+    }
 
-            .sidebar .nav-link span:first-child {
+    .sidebar .nav-link span:first-child {
-                width: 70px;
+        width: 70px;
-            }
+    }
 
-.top-item {
+    .sidebar .top-item {
-    font-size: 1rem;
+        font-size: 1rem;
-}
+    }
 
-.top-item:first-child {
+        .sidebar .top-item:first-child {
-    padding-top: 0.5rem;
+            padding-top: 0.5rem;
-}
+        }
 
-.top-item:last-child {
+        .sidebar .top-item:last-child {
-    padding-bottom: 1rem;
+            padding-bottom: 1rem;
-}
+        }
 
-.top-item .nav {
+        .sidebar .top-item .nav {
-    margin-top: 0.25rem;
+            margin-top: 0.25rem;
-}
+        }
 
-.top-link {
+    .sidebar .top-link {
-    display: block;
+        display: block;
-    padding: .25rem 1.5rem;
+        padding: .25rem 1.5rem;
-    font-weight: 700;
+        font-weight: 700;
-    margin-top: 0.5rem;
+        margin-top: 0.5rem;
-    color: rgba(0,0,0,.65);
+        color: rgba(0,0,0,.65);
-}
+    }
 
 .content {
     color: #495057;
@@ -161,9 +161,9 @@ section {
         color: #1f2f3d;
     }
 
-    .content h3:not(:first-child) {
+        .content h3:not(:first-child) {
-        margin-top: 2rem;
+            margin-top: 2rem;
-    }
+        }
 
     .content h4 {
         margin-top: 1.5rem;
@@ -174,31 +174,31 @@ section {
         transition: all .3s linear;
     }
 
-    .content .card .row, .content .card .form-row {
+        .content .card .row, .content .card .form-row {
-        width: 100%;
+            width: 100%;
-    }
+        }
 
-    .content .card:hover {
+        .content .card:hover {
-        box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+            box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
-    }
+        }
 
     .content .card-footer {
         background-color: transparent;
     }
 
-    .content .card-footer .card-footer-control {
+        .content .card-footer .card-footer-control {
-        text-align: center;
+            text-align: center;
-        color: #d3dce6;
+            color: #d3dce6;
-        display: block;
+            display: block;
-    }
+        }
 
-    .content .card-footer .card-footer-control .fa {
+            .content .card-footer .card-footer-control .fa {
-        transition: .3s linear;
+                transition: .3s linear;
-    }
+            }
 
-    .content .card-footer .card-footer-control.show .fa {
+            .content .card-footer .card-footer-control.show .fa {
-        transform: rotate(180deg);
+                transform: rotate(180deg);
-    }
+            }
 
     .content .card:hover .card-footer .card-footer-control .fa {
         margin-left: -1.5rem;
@@ -237,45 +237,6 @@ section {
         margin-bottom: -1rem;
     }
 
-    table {
-        border-collapse: collapse;
-        width: 100%;
-        background-color: #fff;
-        font-size: 14px;
-        margin-bottom: 45px;
-        line-height: 1.5em;
-    }
-
-    th {
-        text-align: left;
-        white-space: nowrap;
-        color: #495057;
-        font-weight: 400;
-        border-bottom: 1px solid #dcdfe6;
-        padding: 15px;
-        max-width: 250px;
-    }
-
-    td {
-        color: #606266;
-    }
-
-    td,
-    td {
-        border-bottom: 1px solid #dcdfe6;
-        padding: 15px;
-        max-width: 250px;
-    }
-
-    td:first-child,
-    th:first-child {
-        padding-left: 10px;
-    }
-
-    .table-attr {
-        margin-top: 2rem;
-    }
-
     .content .code-label {
         font-weight: 500;
         color: #333;
@@ -305,22 +266,61 @@ section {
         padding: 0;
     }
 
-        .content .git a {
+    .content .git a {
-            border: solid 1px #ddd;
+        border: solid 1px #ddd;
-            display: block;
+        display: block;
-            padding: 6px 10px;
+        padding: 6px 10px;
-            border-radius: 6px;
+        border-radius: 6px;
-        }
+    }
 
-        .content .git .git-fork img {
+    .content .git .git-fork img {
-            height: 56px;
+        height: 56px;
-        }
+    }
 
-        .content .git .git-fork span {
+    .content .git .git-fork span {
-            font-size: 1.8rem;
+        font-size: 1.8rem;
-            color: #1c3949;
+        color: #1c3949;
-            margin-left: 38px;
+        margin-left: 38px;
-        }
+    }
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+    background-color: #fff;
+    font-size: 14px;
+    margin-bottom: 45px;
+    line-height: 1.5em;
+}
+
+th {
+    text-align: left;
+    white-space: nowrap;
+    color: #495057;
+    font-weight: 400;
+    border-bottom: 1px solid #dcdfe6;
+    padding: 15px;
+    max-width: 250px;
+}
+
+td {
+    color: #606266;
+}
+
+td,
+td {
+    border-bottom: 1px solid #dcdfe6;
+    padding: 15px;
+    max-width: 250px;
+}
+
+    td:first-child,
+    th:first-child {
+        padding-left: 10px;
+    }
+
+.table-attr {
+    margin-top: 2rem;
+}
 
 .navbar-toggler {
     background-color: rgba(255, 255, 255, 0.1);
@@ -377,7 +377,7 @@ section {
     }
 }
 
-@media (min-width: 768px) {   
+@media (min-width: 768px) {
     .sidebar .sidebar-content {
         overflow: hidden;
         position: absolute;

src/BootstrapBlazor/Components/Alert/Alert.razor

@@ -0,0 +1,11 @@
+@namespace BootstrapBlazor.Components
+@inherits AlertBase
+
+<DynamicElement TagName="div" class="@ClassName" role="alert" @attributes="@AdditionalAttributes">
+    @ChildContent
+    @if(ShowDismiss) {
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="@OnClick">
+            <i class="fa fa-times"></i>
+        </button>
+    }
+</DynamicElement>

src/BootstrapBlazor/Components/Alert/AlertBase.cs

@@ -0,0 +1,74 @@
+using BootstrapBlazor.Utils;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Components
+{
+    /// <summary>
+    /// Alert 警告框组件
+    /// </summary>
+    public abstract class AlertBase : ComponentBase
+    {
+        /// <summary>
+        /// 获得/设置 用户自定义属性
+        /// </summary>
+        /// <returns></returns>
+        [Parameter(CaptureUnmatchedValues = true)]
+        public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+        /// <summary>
+        /// 获得 按钮样式集合
+        /// </summary>
+        /// <returns></returns>
+        protected string ClassName => CssBuilder.Default("alert")
+          .AddClass($"alert-{Color.ToDescriptionString()}", Color != Color.None)
+          .AddClass(Class)
+        .Build();
+
+        /// <summary>
+        /// 获得/设置 按钮颜色
+        /// </summary>
+        [Parameter] public Color Color { get; set; } = Color.Primary;
+
+        /// <summary>
+        ///
+        /// </summary>
+        [Parameter] public string Class { get; set; } = "";
+
+        /// <summary>
+        /// 是否显示关闭按钮
+        /// </summary>
+        [Parameter] public bool ShowDismiss { get; set; }
+
+        /// <summary>
+        /// 子组件
+        /// </summary>
+        [Parameter] public RenderFragment? ChildContent { get; set; }
+
+        /// <summary>
+        /// 关闭警告框回调方法
+        /// </summary>
+        [Parameter]
+        public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+        /// <summary>
+        ///
+        /// </summary>
+        /// <param name="parameters"></param>
+        /// <returns></returns>
+        public override Task SetParametersAsync(ParameterView parameters)
+        {
+            base.SetParametersAsync(parameters);
+            if (!OnClick.HasDelegate)
+            {
+                OnClick = EventCallback.Factory.Create<MouseEventArgs>(this, () =>
+                {
+                    Class = "collapse";
+                });
+            }
+            return Task.CompletedTask;
+        }
+    }
+}

src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css

@@ -1,4 +1,18 @@
-.btn-xs, .btn-group-xs > .btn {
+button:focus {
+    outline: none;
+}
+
+.alert .close {
+    position: absolute;
+    top: 6px;
+    right: 10px;
+}
+
+    .alert .close .fa-times {
+        font-size: 0.875rem;
+    }
+
+.btn-xs, .btn-group-xs > .btn {
     border-radius: 0.2rem;
     padding: 0.0625rem 0.3125rem;
     font-size: 0.75rem;