🆕 feat: add MCellGroup and MCell components (#2527)

* 🆕 feat: add MCellGroup and MCell components * Update src/Masa.Blazor/Components/List/MListItem.razor.cs Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/cell/en-US.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-12-06 10:19:23 +08:00 · 2025-08-14 16:54:33 +08:00
parent 670a964726
commit a03b5acf92
22 changed files with 526 additions and 9 deletions
--- a/docs/Masa.Blazor.Docs/Examples/mobiles/cell/Outlined.razor
+++ b/docs/Masa.Blazor.Docs/Examples/mobiles/cell/Outlined.razor
@@ -0,0 +1,8 @@
+<div class="surface-container-high" style="height: 100%; max-width: 380px; margin: 0 auto;">
+    <MCellGroup Outlined>
+        <MCell Title="Storage" Href="/blazor/mobiles/cell#storage"></MCell>
+        <MCell Title="Text Size" Href="/blazor/mobiles/cell#text-size"></MCell>
+        <MCell Title="Photos, Videos, Files & Calls" Href="/blazor/mobiles/cell#miscs"></MCell>
+        <MCell Title="Listen" Href="/blazor/mobiles/cell#listen"></MCell>
+    </MCellGroup>
+</div>
--- a/docs/Masa.Blazor.Docs/Examples/mobiles/cell/Usage.razor
+++ b/docs/Masa.Blazor.Docs/Examples/mobiles/cell/Usage.razor
@@ -0,0 +1,64 @@
+<div class="surface-container-high" style="height: 100%; max-width: 380px; margin: 0 auto;">
+    <MCellGroup Subheader="Interface and display">
+        <MCell Title="Dark Mode" Value="@_darkMode" OnClick="@OnDarkMode"></MCell>
+        <MCell Title="Landscape Display">
+            <MSwitch TValue="bool" Inset></MSwitch>
+        </MCell>
+        <MCell Title="Enable NFC">
+            <MSwitch TValue="bool" Inset></MSwitch>
+        </MCell>
+        <MCell Title="Auto Update" Value="Never" Href="/blazor/mobiles/cell#auto-update"></MCell>
+        <MCell Title="Language" Value="English" Href="/blazor/mobiles/cell#language"></MCell>
+    </MCellGroup>
+
+    <MCellGroup Subheader="Others">
+        <MCell Title="Storage" Href="/blazor/mobiles/cell#storage"></MCell>
+        <MCell Title="Text Size" Href="/blazor/mobiles/cell#text-size"></MCell>
+        <MCell Title="Photos, Videos, Files & Calls" Href="/blazor/mobiles/cell#miscs"></MCell>
+        <MCell Title="Listen" Href="/blazor/mobiles/cell#listen"></MCell>
+    </MCellGroup>
+</div>
+
+<MBottomSheet @bind-Value="_darkModeSheet"
+              @bind-Value:after="OnDarkModeSheetUpdated">
+    <MToolbar Dense Flat Color="surface-container-high">
+        <MToolbarTitle>Dark Mode</MToolbarTitle>
+        <MSpacer/>
+        <MButton OnClick="@OnDarkModeUpdate" Color="primary" Small>Save</MButton>
+    </MToolbar>
+    <MListItemGroup @bind-Value="@_tempDarkMode"
+                    ActiveClass="primary--text">
+        <MListItem Title="Auto" Value="@("Auto")" AppendIcon="@GetIcon("Auto")"/>
+        <MListItem Title="Light" Value="@("Light")" AppendIcon="@GetIcon("Light")"/>
+        <MListItem Title="Dark" Value="@("Dark")" AppendIcon="@GetIcon("Dark")"/>
+    </MListItemGroup>
+</MBottomSheet>
+
+@code {
+
+    private bool _darkModeSheet;
+    private string _darkMode = "Auto";
+    private StringNumber _tempDarkMode = "Auto";
+
+    private void OnDarkMode()
+    {
+        _darkModeSheet = true;
+    }
+
+    private void OnDarkModeSheetUpdated()
+    {
+        _tempDarkMode = _darkMode;
+    }
+
+    private void OnDarkModeUpdate()
+    {
+        _darkMode = _tempDarkMode.AsT0;
+        _darkModeSheet = false;
+    }
+
+    private string? GetIcon(string value)
+    {
+        return _tempDarkMode.AsT0 == value ? "mdi-check" : null;
+    }
+
+}
--- a/docs/Masa.Blazor.Docs/Examples/mobiles/cell/WeiXin.razor
+++ b/docs/Masa.Blazor.Docs/Examples/mobiles/cell/WeiXin.razor
@@ -0,0 +1,46 @@
+<div class="surface-container-high" style="height: 500px; max-width: 380px; margin: 0 auto;">
+    <MSheet Class="d-flex pl-4 py-4 mb-2" Color="surface">
+        <MAvatar Rounded="true" Size="64" Color="primary">
+            <MIcon Size="48">$masaBlazor</MIcon>
+        </MAvatar>
+        <MCellGroup Dense HideDivider Class="flex-fill" CellMinHeight="32">
+            <MCell Ripple="false">
+                <TitleContent>
+                    <h3> MASA Blazor </h3>
+                </TitleContent>
+                <ChildContent>
+                    <MButton IconName="mdi-qrcode" Small></MButton>
+                </ChildContent>
+            </MCell>
+            <MCell Subtitle="Weixin ID：masablazor" Href="/blazor/mobiles/cell#id" Ripple="false"></MCell>
+        </MCellGroup>
+    </MSheet>
+    <MCellGroup>
+        <MCell Title="Pay and services" Href="/blazor/mobiles/cell#service" Class="mb-2" HideDivider>
+            <PrependIconContent>
+                <MIcon Color="green">mdi-face-agent</MIcon>
+            </PrependIconContent>
+        </MCell>
+        <MCell Title="Favorites" Href="/blazor/mobiles/cell#collect">
+            <PrependIconContent>
+                <MIcon Color="green">mdi-rhombus-split</MIcon>
+            </PrependIconContent>
+        </MCell>
+        <MCell Title="My Posts" Href="/blazor/mobiles/cell#moments">
+            <PrependIconContent>
+                <MIcon Color="blue">mdi-image-area</MIcon>
+            </PrependIconContent>
+        </MCell>
+        <MCell Title="Cards & Offers" Href="/blazor/mobiles/cell#card">
+            <PrependIconContent>
+                <MIcon Color="cyan">mdi-credit-card</MIcon>
+            </PrependIconContent>
+        </MCell>
+        <MCell Title="Sticker Gallery" Href="/blazor/mobiles/cell#emoji" Class="mb-2" HideDivider>
+            <PrependIconContent>
+                <MIcon Color="yellow">mdi-emoticon</MIcon>
+            </PrependIconContent>
+        </MCell>
+        <MCell Title="Settings" PrependIcon="mdi-cog" Href="/blazor/mobiles/cell#setting"/>
+    </MCellGroup>
+</div>
--- a/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCell-en-US.json
+++ b/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCell-en-US.json
@@ -0,0 +1,22 @@
+{
+  "props": {
+    "Title": "Title text.",
+    "Subtitle": "Subtitle text.",
+    "Value": "Right content value.",
+    "PrependIcon": "Left icon.",
+    "PrependAvatar": "Left avatar.",
+    "Href": "Navigation address.",
+    "HideDivider": "Whether to hide the divider.",
+    "BackgroundColor": "Background color.",
+    "Ripple": "Whether to show ripple effect."
+  },
+  "events": {
+    "OnClick": "Click event."
+  },
+  "contents": {
+    "ChildContent": "Custom content.",
+    "TitleContent": "Custom title content.",
+    "SubtitleContent": "Custom subtitle content.",
+    "PrependIconContent": "Custom left icon content."
+  }
+}
--- a/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCell-zh-CN.json
+++ b/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCell-zh-CN.json
@@ -0,0 +1,22 @@
+{
+  "props": {
+    "Title": "主标题。",
+    "Subtitle": "副标题。",
+    "Value": "右侧内容。",
+    "PrependIcon": "左侧图标。",
+    "PrependAvatar": "左侧头像。",
+    "Href": "跳转地址。",
+    "HideDivider": "是否隐藏分割线。",
+    "BackgroundColor": "背景色。",
+    "Ripple": "是否显示水波纹效果。"
+  },
+  "events": {
+    "OnClick": "点击事件。"
+  },
+  "contents": {
+    "ChildContent": "自定义内容。",
+    "TitleContent": "自定义主标题内容。",
+    "SubtitleContent": "自定义副标题内容。",
+    "PrependIconContent": "自定义左侧图标内容。"
+  }
+}
--- a/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCellGroup-en-US.json
+++ b/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCellGroup-en-US.json
@@ -0,0 +1,15 @@
+{
+  "props": {
+    "Dense": "Whether to use dense mode.",
+    "HideDivider": "Whether to hide the divider.",
+    "Subheader": "Subheader content.",
+    "BackgroundColor": "Background color.",
+    "Outlined": "Whether to show outline border.",
+    "Theme": "Theme.",
+    "CellMinHeight": "Minimum cell height."
+  },
+  "events": {},
+  "contents": {
+    "ChildContent": "Child content."
+  }
+}
--- a/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCellGroup-zh-CN.json
+++ b/docs/Masa.Blazor.Docs/wwwroot/data/apis/cell/MCellGroup-zh-CN.json
@@ -0,0 +1,15 @@
+{
+  "props": {
+    "Dense": "是否使用紧凑模式。",
+    "HideDivider": "是否隐藏分割线。",
+    "Subheader": "子标题内容。",
+    "BackgroundColor": "背景色。",
+    "Outlined": "是否显示外边框。",
+    "Theme": "主题。",
+    "CellMinHeight": "单元格最小高度。"
+  },
+  "events": {},
+  "contents": {
+    "ChildContent": "子内容。"
+  }
+}
--- a/docs/Masa.Blazor.Docs/wwwroot/data/nav.json
+++ b/docs/Masa.Blazor.Docs/wwwroot/data/nav.json
@@ -579,7 +579,12 @@
    "title": "mobiles",
    "icon": "mdi-cellphone",
    "group": "mobiles",
+    "state": "update",
    "items": [
+      {
+        "title": "cell",
+        "state": "labs"
+      },
      "mobile-cascader",
      "mobile-date-pickers",
      "mobile-date-time-pickers",
--- a/docs/Masa.Blazor.Docs/wwwroot/data/page-to-api.json
+++ b/docs/Masa.Blazor.Docs/wwwroot/data/page-to-api.json
@@ -43,6 +43,10 @@
    "MCarousel",
    "MCarouselItem"
  ],
+  "cell": [
+    "MCellGroup",
+    "MCell"
+  ],
  "checkboxes": [
    "MCheckbox",
    "MSimpleCheckbox"
--- a/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/cell/en-US.md
+++ b/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/cell/en-US.md
@@ -0,0 +1,32 @@
+---
+title: Cells
+desc: "Used for information display in various category rows."
+release: v1.11.0
+---
+
+## Installation
+
+```shell
+dotnet add package Masa.Blazor.MobileComponents
+```
+
+## Usage
+
+The `Value` is used to display the content on the right side and is mutually exclusive with `ChildContent`. When `Href`
+or `OnClick` exists, an arrow will be displayed on the right side.
+
+<masa-example file="Examples.mobiles.cell.Usage"></masa-example>
+
+## Example
+
+### Props
+
+#### Outlined
+
+<masa-example file="Examples.mobiles.cell.Outlined"></masa-example>
+
+### Misc
+
+#### Weixin
+
+<masa-example file="Examples.mobiles.cell.WeiXin"></masa-example>
--- a/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/cell/zh-CN.md
+++ b/docs/Masa.Blazor.Docs/wwwroot/pages/mobiles/cell/zh-CN.md
@@ -0,0 +1,31 @@
+---
+title: Cells（单元格）
+desc: "用于各个类别行的信息展示。"
+release: v1.11.0
+---
+
+## 安装
+
+```shell
+dotnet add package Masa.Blazor.MobileComponents
+```
+
+## 使用 {#usage}
+
+`Value` 用于展示右侧内容，与 `ChildContent` 互斥。当 `Href` 或 `OnClick` 存在时会显示右侧箭头。
+
+<masa-example file="Examples.mobiles.cell.Usage"></masa-example>
+
+## 示例 {#example}
+
+### 属性 {#props}
+
+#### 边框
+
+<masa-example file="Examples.mobiles.cell.Outlined"></masa-example>
+
+### 其他 {#misc}
+
+#### 微信 {#weixin}
+
+<masa-example file="Examples.mobiles.cell.WeiXin"></masa-example>
--- a/docs/Masa.Docs.Shared/wwwroot/locale/en-US.json
+++ b/docs/Masa.Docs.Shared/wwwroot/locale/en-US.json
@@ -216,6 +216,7 @@
  "markdown-parsers": "Markdown parsers",
  "menus": "Menus",
  "mobiles": "Mobile components",
+  "cell": "Cells",
  "mobile-cascader": "Mobile cascader",
  "mobile-date-pickers": "Mobile date pickers",
  "mobile-date-time-pickers": "Mobile date time pickers",
--- a/docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json
+++ b/docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json
@@ -215,6 +215,7 @@
  "markdown-parsers": "Markdown parsers（Markdown解析器）",
  "menus": "Menus（菜单）",
  "mobiles": "移动端组件",
+  "cell": "Cells（单元格）",
  "mobile-cascader": "Mobile cascader（移动端级联）",
  "mobile-date-pickers": "Mobile date pickers（移动端日期选择器）",
  "mobile-date-time-pickers": "Mobile date time pickers（移动端日期时间选择器）",