Skill: luubing/masa-blazor (version 1.0.0)

--- name: masa-blazor description: 基于 MASA Blazor 组件库进行 Blazor 开发的参考指南。当用户询问 MASA Blazor 的使用、组件、样式、配置或最佳实践时使用。文档地址格式: https://docs.masastack.com/blazor/{category}/{item}。 --- # MASA Blazor 开发指南 ## 概述 MASA Blazor 是基于 Material Design 3 规范的 Blazor UI 组件库，100+ 高质量组件，支持 SSR/SSG/WASM。官方文档: https://docs.masastack.com/blazor ## 完整文档路径映射 URL 格式: `https://docs.masastack.com/blazor/{category}/{item}` ### 1. Introduction (入门介绍) - [REDACTED_SECRET] — 为什么选择 MASA Blazor - `/blazor/introduction/roadmap` — 产品路线图 ### 2. Getting Started (快速开始) - [REDACTED_SECRET] — 安装配置 - [REDACTED_SECRET] — 浏览器兼容性 - [REDACTED_SECRET] — 常见问题 - [REDACTED_SECRET] — 布局模板 - [REDACTED_SECRET] — 版本更新日志 - [REDACTED_SECRET] — 升级指南 - [REDACTED_SECRET] — 贡献指南 ### 3. Features (特性) - [REDACTED_SECRET] — 双向文本支持 - `/blazor/features/breakpoints` — 响应式断点 - `/blazor/features/icon-fonts` — 图标字体 - [REDACTED_SECRET] — 国际化 (i18n) - `/blazor/features/auto-match-nav` — 自动导航匹配 - `/blazor/features/theme` — 主题定制 - `/blazor/features/ssr` — 服务端渲染支持 ### 4. Basic Concepts (基本概念) NEW - [REDACTED_SECRET] — 激活器模式 - [REDACTED_SECRET] — 渲染机制 - [REDACTED_SECRET] — 双向绑定 ### 5. Styles and Animations (样式与动画) - [REDACTED_SECRET] — 圆角 - [REDACTED_SECRET] — 颜色系统 - [REDACTED_SECRET] — 显示辅助类 - [REDACTED_SECRET] — 阴影层级 - [REDACTED_SECRET] — 弹性布局 - [REDACTED_SECRET] — 浮动 - [REDACTED_SECRET] — 溢出控制 - [REDACTED_SECRET] — 间距 - [REDACTED_SECRET] — 文字排版 - [REDACTED_SECRET] — 过渡动画 ### 6. UI Components (UI 组件) #### 6.1 Alerts / Alerts (反馈) - `/blazor/ui-components/alerts` — 警告提示 #### 6.2 Application - [REDACTED_SECRET] — 应用根组件 #### 6.3 Aspect Ratios / Images & Icons (图片与图标) - [REDACTED_SECRET] — 宽高比 - `/blazor/ui-components/avatars` — 头像 - `/blazor/ui-components/icons` — 图标 - `/blazor/ui-components/images` — 图片 - [REDACTED_SECRET] — 视频播放 (Labs) - `/blazor/ui-components/xgplayer` — 西瓜播放器 #### 6.4 Badges / Banners / Borders (反馈) - `/blazor/ui-components/badges` — 徽章 - `/blazor/ui-components/banners` — 横幅 - `/blazor/ui-components/borders` — 边框 #### 6.5 Bars (导航/容器) - [REDACTED_SECRET] — 应用顶部栏 - [REDACTED_SECRET] — 工具栏 - [REDACTED_SECRET] — 系统状态栏 #### 6.6 Block Text / Copyable Text (数据展示) - [REDACTED_SECRET] — 块文本 - [REDACTED_SECRET] — 可复制文本 #### 6.7 Bottom Navigation / Bottom Sheets / Breadcrumbs (导航/容器) - [REDACTED_SECRET] — 底部导航 - [REDACTED_SECRET] — 底部弹出面板 - [REDACTED_SECRET] — 面包屑 #### 6.8 Buttons / Cards / Chips (容器) - `/blazor/ui-components/buttons` — 按钮 - `/blazor/ui-components/cards` — 卡片 - `/blazor/ui-components/chips` — 标签 #### 6.9 Carousels (选择) - `/blazor/ui-components/carousels` — 轮播 #### 6.10 Cron / BaiduMaps / Drawflow / Gridstack (杂项) - `/blazor/ui-components/cron` — Cron 表达式 - `/blazor/ui-components/baidumaps` — 百度地图 - `/blazor/ui-components/drawflow` — 流程图 - `/blazor/ui-components/gridstack` — 网格堆叠 #### 6.11 Defaults Providers / Theme Providers (提供者) - [REDACTED_SECRET] — 默认值配置 - [REDACTED_SECRET] — 主题配置 (Labs) #### 6.12 Descriptions (数据展示) - [REDACTED_SECRET] — 描述列表 #### 6.13 Dialogs / Dividers / Drawers (容器) - `/blazor/ui-components/dialogs` — 对话框 - `/blazor/ui-components/dividers` — 分割线 - `/blazor/ui-components/drawers` — 抽屉 #### 6.14 Echarts (数据展示) - `/blazor/ui-components/echarts` — ECharts 图表 #### 6.15 DriverJS (反馈, Labs) - `/blazor/ui-components/driverjs` — 引导教程 #### 6.16 Editors / Markdowns / Monaco Editor (表单) - `/blazor/ui-components/editors` — 富文本编辑器 - `/blazor/ui-components/markdowns` — Markdown 编辑 - [REDACTED_SECRET] — 代码编辑器 #### 6.17 Empty States / Enqueued Snackbars / Error Handler (反馈) - [REDACTED_SECRET] — 空状态 NEW - [REDACTED_SECRET] — 消息队列 - [REDACTED_SECRET] — 错误处理 #### 6.18 Expansion Panels / Floating Action Buttons / Footers (容器/导航) - [REDACTED_SECRET] — 折叠面板 - [REDACTED_SECRET] — 悬浮操作按钮 - `/blazor/ui-components/footers` — 页脚 #### 6.19 Form Inputs and Controls (表单) - [REDACTED_SECRET] — 自动完成 - [REDACTED_SECRET] — 级联选择 - [REDACTED_SECRET] — 复选框 - [REDACTED_SECRET] — 组合框 (Labs) - [REDACTED_SECRET] — 文件上传 - [REDACTED_SECRET] — 表单验证 - [REDACTED_SECRET] — 验证码输入 - [REDACTED_SECRET] — 单选框 - [REDACTED_SECRET] — 范围滑块 - [REDACTED_SECRET] — 下拉选择 - [REDACTED_SECRET] — 滑块 - [REDACTED_SECRET] — 开关 - [REDACTED_SECRET] — 多行文本 - [REDACTED_SECRET] — 文本输入框 #### 6.20 Grids / GridStack (容器) - `/blazor/ui-components/grids` — 网格布局 - `/blazor/ui-components/gridstack` — 网格堆叠 #### 6.21 Groups (选择) - [REDACTED_SECRET] — 按钮组 - [REDACTED_SECRET] — 标签组 - [REDACTED_SECRET] — 选项组 - [REDACTED_SECRET] — 列表选项组 - [REDACTED_SECRET] — 滑动组 - [REDACTED_SECRET] — 窗口切换 #### 6.22 Hover / Icons / I18ns / Image Captcha (反馈/杂项/表单) - `/blazor/ui-components/hover` — 悬停效果 - `/blazor/ui-components/icons` — 图标 - `/blazor/ui-components/i18ns` — 国际化 - [REDACTED_SECRET] — 图片验证码 #### 6.23 Images (图片与图标) - `/blazor/ui-components/images` — 图片 #### 6.24 Lists / Infinite Scroll / Inputs Filter / Interactive Trigger / Lazy (容器/数据/杂项) - `/blazor/ui-components/lists` — 列表 - [REDACTED_SECRET] — 无限滚动 - [REDACTED_SECRET] — 输入筛选 - [REDACTED_SECRET] — 交互触发 - `/blazor/ui-components/lazy` — 懒加载 #### 6.25 Markdown Parsers (数据展示) - [REDACTED_SECRET] — Markdown 渲染 #### 6.26 Menus / Modals (容器) - `/blazor/ui-components/menus` — 菜单 - `/blazor/ui-components/modals` — 模态框 #### 6.27 Navigation Drawers / Overlays (导航) - [REDACTED_SECRET] — 侧边导航抽屉 - `/blazor/ui-components/overlays` — 遮罩层 #### 6.28 Page Tabs (导航) - `/blazor/ui-components/page-tabs` — 页面标签页 #### 6.29 Paginations (导航) - [REDACTED_SECRET] — 分页 #### 6.30 Pickers (选择器) - [REDACTED_SECRET] — 日期选择 - [REDACTED_SECRET] — 月份选择 - [REDACTED_SECRET] — 时间选择 - [REDACTED_SECRET] — 日期数字时钟 - [REDACTED_SECRET] — 日期时间选择 - [REDACTED_SECRET] — 数字时钟 - [REDACTED_SECRET] — 日期时间范围 (Labs) #### 6.31 Popup Service (服务) - [REDACTED_SECRET] — 弹出服务 #### 6.32 Progress (反馈) - [REDACTED_SECRET] — 圆形进度 - [REDACTED_SECRET] — 线性进度 #### 6.33 Ratings (反馈) - `/blazor/ui-components/ratings` — 评分 #### 6.34 Scroll to Target (导航) - [REDACTED_SECRET] — 滚动定位 #### 6.35 Sheets (容器) - `/blazor/ui-components/sheets` — 面板 #### 6.36 Skeleton Loaders / Snackbars (反馈) - [REDACTED_SECRET] — 骨架屏 - `/blazor/ui-components/snackbars` — 消息提示 #### 6.37 Sortable / Splitters / Steppers / Sticky / Subheaders (容器/选择) - `/blazor/ui-components/sortable` — 拖拽排序 - `/blazor/ui-components/splitters` — 分割面板 - `/blazor/ui-components/steppers` — 步骤条 - `/blazor/ui-components/sticky` — 吸顶 - [REDACTED_SECRET] — 子标题 #### 6.38 Syntax Highlights (数据展示) - [REDACTED_SECRET] — 代码高亮 #### 6.39 Tables (数据展示) - [REDACTED_SECRET] — 数据迭代器 - [REDACTED_SECRET] — 数据表格 - [REDACTED_SECRET] — 简单表格 #### 6.40 Tabs (导航) - `/blazor/ui-components/tabs` — 标签页 #### 6.41 Timelines (反馈) - `/blazor/ui-components/timelines` — 时间线 #### 6.42 Toggles (选择) - `/blazor/ui-components/toggles` — 切换按钮 #### 6.43 Tooltips (容器) - `/blazor/ui-components/tooltips` — 工具提示 #### 6.44 Treeview (数据展示) - `/blazor/ui-components/treeview` — 树形视图 #### 6.45 Virtual Scroll (数据展示) - [REDACTED_SECRET] — 虚拟滚动 #### 6.46 Watermark (容器) - `/blazor/ui-components/watermark` — 水印 ### 7. Mobiles (移动端组件) - `/blazor/mobiles/cell` — 单元格 (Labs) - `/blazor/mobiles/mobile-cascader` — 移动端级联 - [REDACTED_SECRET] — 移动端日期选择 - [REDACTED_SECRET] — 移动端日期时间选择 - `/blazor/mobiles/mobile-pickers` — 移动端选择器 - [REDACTED_SECRET] — 移动端选择视图 - [REDACTED_SECRET] — 移动端时间选择 - `/blazor/mobiles/page-stack` — 页面栈 - [REDACTED_SECRET] — PDF 阅读器 - `/blazor/mobiles/pull-refresh` — 下拉刷新 - `/blazor/mobiles/swipe-actions` — 滑动操作 (Labs) - `/blazor/mobiles/swiper` — 轮播滑动 ### 8. JS Modules (JavaScript 模块) - `/blazor/js-modules/intersection-observer` — 交叉观察器 ## 项目配置 ### 安装 ```bash dotnet add package MASA.Blazor ``` ### 注册服务 (Program.cs) ```csharp builder.Services.AddMasaBlazor(); ``` ### 引用资源 (wwwroot/index.html) ```html <link href="_content/MASA.Blazor/css/masa-blazor.min.css" rel="stylesheet" /> <script src="_content/MASA.Blazor/js/masa-blazor.js"></script> ``` ### 命名空间 (_Imports.razor) ```csharp @using Masa.Blazor ``` ## 官方资源 - 文档: https://docs.masastack.com/blazor - GitHub: https://github.com/masastack/MASA.Blazor - 示例: https://blazor-pro.masastack.com ## 详细参考文档 详见 `references/` 目录下的详细文档: - `components.md` — 组件总览索引 - `styles.md` — 样式工具类全集 - `theme.md` — 主题配置详解 - 各组件独立文档 (buttons.md, dialogs.md, etc.)


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)