步进器 Stepper

自动完成 Autocomplete
徽章 Badge
底部操作表 Bottom Sheet
按钮 Button
开关按钮 Button toggle
卡片 Card
检查框 Checkbox
纸片 Chips
日期选择器 Datepicker
对话框 Dialog
分割器 Divider
可展开面板 Expansion Panel
表单字段 Form field
网格列表 Grid list
图标 Icon
输入框 Input
列表 List
菜单 Menu
分页器 Paginator
进度条 Progress bar
进度圈 Progress spinner
单选按钮 Radio button
涟漪 Ripples
选择框 Select
侧边栏 Sidenav
滑块开关 Slide toggle
滑杆 Slider
快餐栏 Snackbar
排序头 Sort header
步进器 Stepper
表格 Table
选项卡 Tabs
工具栏 Toolbar
工具提示 Tooltip
树 Tree
stepper 的范例
Stepper with editable steps
1
Fill out your name
2
Fill out your address
3
Done
Stepper that displays errors in the steps
1
Fill out your name
2
Fill out your address
3
Done

Go to a different step to see the error state

Testing with MatStepperHarness
This example contains tests. Open in Stackblitz to run the tests.
Stepper label bottom position
1
Fill out your name
2
Fill out your address
Optional
3
Done
Stepper lazy content rendering
1
Step 1

This content was rendered lazily

2
Step 2
3
Step 3
Stepper with optional steps
1
Fill out your name
2
Fill out your address
3
Done
Stepper overview
1
Fill out your name
2
Fill out your address
3
Done
Stepper responsive
Make your screen smaller to see a vertical stepper
1
Fill out your name
2
Fill out your address
3
Fill out your phone number
4
Done
Stepper with customized states
Fill out your name
2
Fill out your address
3
Done
Step 1
Step 2
3
Step 3

Put down your phones.

Stepper vertical
1
Fill out your name
2
Fill out your address
3
Done