现在可以给组件设置 class 了

wherewhere · Jun 3, 2024 · 8f64d18 · 8f64d18
1 parent a07c602
commit 8f64d18
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 18 deletions.
diff --git a/Wherlog/Controls/MarkdownSection.razor b/Wherlog/Controls/MarkdownSection.razor
@@ -3,6 +3,6 @@
 @implements IAsyncDisposable
 @inject IJSRuntime JSRuntime
 
-<div class="markdown-section">
+<div class="@ClassValue" style="@Style">
     @HtmlContent
 </div>
diff --git a/Wherlog/Controls/MarkdownSection.razor.cs b/Wherlog/Controls/MarkdownSection.razor.cs
@@ -1,6 +1,7 @@
 using Markdig;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 using Microsoft.JSInterop;
 using System;
 using System.Threading.Tasks;
@@ -15,6 +16,10 @@ public partial class MarkdownSection : FluentComponentBase, IAsyncDisposable
         private bool _raiseContentConverted;
         private IJSObjectReference _jsModule;
 
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("markdown-section")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Markdown content 
         /// </summary>

diff --git a/Wherlog/Controls/SettingsCard.razor b/Wherlog/Controls/SettingsCard.razor
@@ -1,6 +1,6 @@
 @inherits FluentComponentBase
 
-<div class="settings-card" style="@Style">
+<div class="@ClassValue" style="@Style">
     <FluentCard AreaRestricted="false" Style="padding: var(--settings-card-padding);">
         <SettingsPresenter
             Icon="@Icon"

diff --git a/Wherlog/Controls/SettingsCard.razor.cs b/Wherlog/Controls/SettingsCard.razor.cs
@@ -1,10 +1,15 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Wherlog.Controls
 {
     public partial class SettingsCard : FluentComponentBase
     {
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("settings-card")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Header.
         /// </summary>

diff --git a/Wherlog/Controls/SettingsExpander.razor b/Wherlog/Controls/SettingsExpander.razor
@@ -1,6 +1,6 @@
 @inherits FluentComponentBase
 
-<div class="settings-card" style="@Style">
+<div class="@ClassValue" style="@Style">
     <FluentAccordion>
         <FluentAccordionItem ChildContent="@Content">
             <HeadingTemplate>

diff --git a/Wherlog/Controls/SettingsExpander.razor.cs b/Wherlog/Controls/SettingsExpander.razor.cs
@@ -1,10 +1,15 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Wherlog.Controls
 {
     public partial class SettingsExpander : FluentComponentBase
     {
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("settings-expander")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Header.
         /// </summary>

diff --git a/Wherlog/Controls/SettingsGroup.razor b/Wherlog/Controls/SettingsGroup.razor
@@ -1,6 +1,7 @@
-@inherits FluentComponentBase
+@using Microsoft.FluentUI.AspNetCore.Components.Utilities
+@inherits FluentComponentBase
 
-<div class="settings-group" style="@Style">
+<div class="@ClassValue" style="@Style">
     @if (Header != null)
     {
         <div class="header-presenter">@Header</div>
@@ -12,6 +13,10 @@
 
 @code
 {
+    private string ClassValue => new CssBuilder(Class)
+        .AddClass("settings-group")
+        .Build();
+
     /// <summary>
     /// Gets or sets the Header.
     /// </summary>

diff --git a/Wherlog/Controls/SettingsPresenter.razor b/Wherlog/Controls/SettingsPresenter.razor
@@ -1,6 +1,6 @@
 @inherits FluentComponentBase
 
-<div class="settings-presenter" style="@Style">
+<div class="@ClassValue" style="@Style">
     <div class="header-root">
         @if (Icon != null)
         {

diff --git a/Wherlog/Controls/SettingsPresenter.razor.cs b/Wherlog/Controls/SettingsPresenter.razor.cs
@@ -1,10 +1,15 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Wherlog.Controls
 {
     public partial class SettingsPresenter : FluentComponentBase
     {
+        private string ClassValue => new CssBuilder(Class)
+            .AddClass("settings-presenter")
+            .Build();
+
         /// <summary>
         /// Gets or sets the Header.
         /// </summary>

diff --git a/Wherlog/Pages/SettingsPage.razor b/Wherlog/Pages/SettingsPage.razor
@@ -218,7 +218,10 @@
                         <Description>Navigate to target url.</Description>
                         <ActionContent>
                             <FluentStack Width="var(--settings-card-content-min-width)" HorizontalAlignment="HorizontalAlignment.Right">
-                                <FluentTextField Placeholder="输入 URL" Style="width: 100%;" @bind-Value="path" />
+                                <FluentTextField
+                                    Placeholder="输入 URL"
+                                    Style="width: 100%;"
+                                    @bind-Value="path" />
                                 <FluentButton OnClick="@(() => Navigation.NavigateTo(path ?? string.Empty))">前往</FluentButton>
                             </FluentStack>
                         </ActionContent>

diff --git a/Wherlog/Pages/ToolsPages/BiliBiliCardPage.razor b/Wherlog/Pages/ToolsPages/BiliBiliCardPage.razor
@@ -10,22 +10,34 @@
     <FluentTabs>
         <FluentTab Label="Auto">
             <FluentStack Orientation="Orientation.Vertical">
-                <FluentTextField Label="BiliBili Video ID" Placeholder="BV1y54y1a768" @bind-Value="ID" />
-                <FluentTextField Label="Image Proxy" Placeholder="https://images.weserv.nl/?url=" @bind-Value="imageProxy" />
+                <FluentTextField
+                    Label="BiliBili Video ID"
+                    Placeholder="BV1y54y1a768"
+                    @bind-Value="ID" />
+                <FluentTextField
+                    Label="Image Proxy"
+                    Placeholder="https://images.weserv.nl/?url="
+                    @bind-Value="imageProxy" />
                 <FluentButton OnClick="@(() => CreateCardAsync(id))">Create Card</FluentButton>
             </FluentStack>
         </FluentTab>
         <FluentTab Label="Manual">
             <FluentStack Orientation="Orientation.Vertical">
-                <FluentTextField Label="BiliBili Video ID" Placeholder="BV1y54y1a768" @bind-Value="ID" />
+                <FluentTextField
+                    Label="BiliBili Video ID"
+                    Placeholder="BV1y54y1a768"
+                    @bind-Value="ID" />
                 <FluentAnchor Href="@url" Target="_blank">Get JSON</FluentAnchor>
                 <FluentTextArea Label="Input JSON" @bind-Value="json" />
-                <FluentTextField Label="Image Proxy" Placeholder="https://images.weserv.nl/?url=" @bind-Value="imageProxy" />
+                <FluentTextField
+                    Label="Image Proxy"
+                    Placeholder="https://images.weserv.nl/?url="
+                    @bind-Value="imageProxy" />
                 <FluentButton OnClick="@(() => CreateCard(json))">Create Card</FluentButton>
             </FluentStack>
         </FluentTab>
     </FluentTabs>
-    <MarkdownSection Content="@example" />
+    <MarkdownSection Content="@example" Style="max-width: 100%;" />
 </FluentStack>
 
 @code
@@ -88,11 +100,11 @@
                 string element = $"<{string.Join(" ", attributes)}></bilibili-card>";
                 const string script = "<script src=\"https://unpkg.com/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.js\"></script>";
                 example = new StringBuilder()
+                                .AppendLine(script)
+                                .AppendLine(element)
                                 .AppendLine("```html")
                                 .AppendLine(element)
-                                .AppendLine("```")
-                                .AppendLine(script)
-                                .Append(element)
+                                .Append("```")
                                 .ToString();
             }
         }

diff --git a/Wherlog/Wherlog.csproj b/Wherlog/Wherlog.csproj
@@ -19,9 +19,9 @@
 
   <ItemGroup>
     <PackageReference Include="Markdig" Version="0.37.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.5" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.5" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.5" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.6" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.6" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.6" />
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.7.2" />
 	  <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.7.2" />
   </ItemGroup>