Back to Details

angular-material

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular Material Skill

Angular Material Skill

Overview

概述

Build beautiful, accessible Angular applications using Angular Material component library with custom theming and responsive layouts.
使用Angular Material组件库构建美观、无障碍的Angular应用，支持自定义主题和响应式布局。

Topics Covered

涵盖主题

Component Library

组件库

  • Form controls (inputs, selects, checkboxes)
  • Navigation (toolbar, sidenav, menus)
  • Layout (cards, lists, grids)
  • Data tables and pagination
  • Dialogs and snackbars
  • 表单控件（输入框、选择器、复选框）
  • 导航组件（工具栏、侧边栏、菜单）
  • 布局组件（卡片、列表、网格）
  • 数据表格与分页
  • 对话框与消息条

Theming

主题设计

  • Custom theme creation
  • Color palettes and typography
  • Dark mode implementation
  • Component customization
  • CSS variables integration
  • 自定义主题创建
  • 调色板与排版
  • 深色模式实现
  • 组件定制
  • CSS变量集成

CDK (Component Dev Kit)

CDK（组件开发工具包）

  • Overlay system
  • Drag and drop
  • Virtual scrolling
  • Accessibility utilities
  • Custom component creation
  • 浮层系统
  • 拖拽功能
  • 虚拟滚动
  • 无障碍工具
  • 自定义组件创建

Best Practices

最佳实践

  • Responsive design patterns
  • Accessibility compliance (a11y)
  • Performance optimization
  • Lazy loading Material modules
  • 响应式设计模式
  • 无障碍合规（a11y）
  • 性能优化
  • Material模块懒加载

Prerequisites

前置要求

  • Angular Core fundamentals
  • CSS/SCSS basics
  • Component architecture
  • Angular核心基础
  • CSS/SCSS基础知识
  • 组件架构知识

Learning Outcomes

学习成果

  • Build consistent Material UI interfaces
  • Create custom themes and branding
  • Implement accessible components
  • Use CDK for advanced features
  • 构建一致的Material UI界面
  • 创建自定义主题与品牌样式
  • 实现无障碍组件
  • 使用CDK开发高级功能