🆕 feat(Card): Add subcomponent props: title, subtitle and text (#1880)

* 🆕 feat(Card): Add subcomponent props: title, subtitle and text * update docs
masastack · May 6, 2024 · 347879e · 347879e
1 parent 67021ea
commit 347879e
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 26 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/components/buttons/IconName.razor b/docs/Masa.Blazor.Docs/Examples/components/buttons/IconName.razor
@@ -55,22 +55,22 @@
                 </MCol>
 
                 <MCol Cols="12" Sm="3">
-                    <MButton RightIconName="mdi-heart" Color="pink">
+                    <MButton RightIconName="mdi-heart" Class="white--text" Color="pink">
                         heart
                     </MButton>
                 </MCol>
                 <MCol Cols="12" Sm="3">
-                    <MButton RightIconName="mdi-star" Color="indigo">
+                    <MButton RightIconName="mdi-star" Class="white--text" Color="indigo">
                         star
                     </MButton>
                 </MCol>
                 <MCol Cols="12" Sm="3">
-                    <MButton RightIconName="mdi-cached" Color="green">
+                    <MButton RightIconName="mdi-cached" Class="white--text" Color="green">
                         cached
                     </MButton>
                 </MCol>
                 <MCol Cols="12" Sm="3">
-                    <MButton RightIconName="mdi-thumb-up" Color="deep-orange">
+                    <MButton RightIconName="mdi-thumb-up" Class="white--text" Color="deep-orange">
                         thumb up
                     </MButton>
                 </MCol>

diff --git a/docs/Masa.Blazor.Docs/Examples/components/cards/SubComponents.razor b/docs/Masa.Blazor.Docs/Examples/components/cards/SubComponents.razor
@@ -0,0 +1,5 @@
+<MCard Title="Cafe Badilico"
+       Subtitle="$ • Italian, Cafe"
+       Text="Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating."
+       MaxWidth="300"
+       Class="mx-auto"/>
diff --git a/docs/Masa.Blazor.Docs/wwwroot/data/nav.json b/docs/Masa.Blazor.Docs/wwwroot/data/nav.json
@@ -95,8 +95,14 @@
       "bottom-navigation",
       "bottom-sheets",
       "breadcrumbs",
-      "buttons",
-      "cards",
+      {
+        "title": "buttons",
+        "state": "update"
+      },
+      {
+        "title": "cards",
+        "state": "update"
+      },
       "carousels",
       "chips",
       "copyable-text",
@@ -168,7 +174,10 @@
       },
       "images",
       "infinite-scroll",
-      "lists",
+      {
+        "title": "lists",
+        "state": "update"
+      },
       "markdowns",
       "markdown-parsers",
       "menus",

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/cards/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/cards/en-US.md
@@ -66,6 +66,10 @@ An outlined card has 0 elevation and contains a soft border.
 
 <masa-example file="Examples.components.cards.Outlined"></masa-example>
 
+#### Subcomponent props {released-on=v1.5.0}
+
+<masa-example file="Examples.components.cards.SubComponents"></masa-example>
+
 ### Misc
 
 #### Card Reveal
@@ -115,9 +119,3 @@ The **MCard** component has multiple children components that help you build com
 Using [MListItems](/blazor/components/lists) and a [MSlider](/blazor/components/sliders), we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.
 
 <masa-example file="Examples.components.cards.WeatherCard"></masa-example>
-
-#### Loading
-
-Use an indeterminate [MProgressLinear](/blazor/components/progress-linear) to indicate a loading state.
-
-<masa-example file="Examples.components.cards.Loading"></masa-example>
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/cards/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/cards/zh-CN.md
@@ -66,6 +66,10 @@ related:
 
 <masa-example file="Examples.components.cards.Outlined"></masa-example>
 
+#### 子组件属性 {released-on=v1.5.0}
+
+<masa-example file="Examples.components.cards.SubComponents"></masa-example>
+
 ### 其他
 
 #### 卡片显示
@@ -115,13 +119,3 @@ related:
 使用 [MListItem](/blazor/components/lists) 和 [MSlider](/brazor/components/sliders)，我们可以创建一个独特的天气卡。列表组件确保我们具有一致的间距和功能，而滑块组件允许我们为用户提供有用的选择界面。
 
 <masa-example file="Examples.components.cards.WeatherCard"></masa-example>
-
-#### 加载
-
-使用不确定 [MProgressLinear](/blazor/components/progress-linear) 表示加载状态。
-
-<masa-example file="Examples.components.cards.Loading"></masa-example>
-
-
-
-
diff --git a/docs/Masa.Docs.Shared/Shared/PwaSnackbar.razor b/docs/Masa.Docs.Shared/Shared/PwaSnackbar.razor
@@ -10,7 +10,6 @@
            Bottom
            Timeout="-1"
            ActionText="@I18n.T("pwa.refresh")"
-           ActionColor="secondary"
            OnClose="Ignore"
            OnAction="OnRefresh">
 </PSnackbar>

diff --git a/src/Masa.Blazor/Components/Card/MCard.razor b/src/Masa.Blazor/Components/Card/MCard.razor
@@ -8,7 +8,9 @@
     protected override RenderFragment GenBody() => __builder =>
     {
         @GenProgress()
-        @ChildContent
+        @GenTitle()
+        @GenSubtitle()
+        @GenText()
     };
 
     private RenderFragment GenProgress() => __builder =>
@@ -24,4 +26,32 @@
         </div>
     };
 
+    private RenderFragment GenTitle() => __builder =>
+    {
+        @if (!string.IsNullOrEmpty(Title))
+        {
+            <MCardTitle>@Title</MCardTitle>
+        }
+    };
+
+    private RenderFragment GenSubtitle() => __builder =>
+    {
+        @if (!string.IsNullOrEmpty(Subtitle))
+        {
+            <MCardSubtitle>@Subtitle</MCardSubtitle>
+        }
+    };
+
+    private RenderFragment GenText() => __builder =>
+    {
+        if (!string.IsNullOrEmpty(Text))
+        {
+            <MCardText>@Text</MCardText>
+        }
+        else
+        {
+            @ChildContent
+        }
+    };
+
 }
diff --git a/src/Masa.Blazor/Components/Card/MCard.razor.cs b/src/Masa.Blazor/Components/Card/MCard.razor.cs
@@ -56,6 +56,21 @@ public partial class MCard : MSheet, IRoutable
 
     [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 
+    /// <summary>
+    /// The title to display in the card, same as using <see cref="MCardTitle"/>.
+    /// </summary>
+    [Parameter] [MasaApiParameter(ReleasedOn = "v1.5.0")] public string? Title { get; set; }
+
+    /// <summary>
+    /// The subtitle to display in the card, same as using <see cref="MCardSubtitle"/>.
+    /// </summary>
+    [Parameter] [MasaApiParameter(ReleasedOn = "v1.5.0")] public string? Subtitle { get; set; }
+
+    /// <summary>
+    /// The text to display in the card, same as using <see cref="MCardText"/>.
+    /// </summary>
+    [Parameter] [MasaApiParameter(ReleasedOn = "v1.5.0")] public string? Text { get; set; }
+
     public bool Exact { get; }
 
     public string? MatchPattern { get; }

diff --git a/src/Masa.Blazor/Components/Card/MCardSubtitle.cs b/src/Masa.Blazor/Components/Card/MCardSubtitle.cs
@@ -4,6 +4,6 @@ public class MCardSubtitle : Container
 {
     protected override IEnumerable<string> BuildComponentClass()
     {
-        return new[] { "m-card__subtitle" };
+        yield return "m-card__subtitle";
     }
 }