MD3 Design System — 组件展示

1. 配色系统 Color

Primary

Primary

--md3-color-primary

On Primary

--md3-color-on-primary

Primary Container

--md3-color-primary-container

On Primary Container

--md3-color-on-primary-container

Secondary

Secondary

--md3-color-secondary

Secondary Container

--md3-color-secondary-container

Tertiary

Tertiary

--md3-color-tertiary

Tertiary Container

--md3-color-tertiary-container

Error / Success / Warning

Error

--md3-color-error

Error Container

--md3-color-error-container

Success

--md3-color-success

Warning

--md3-color-warning

Surface

Surface

--md3-color-surface

Container Low

--md3-color-surface-container-low

Container

--md3-color-surface-container

Container High

--md3-color-surface-container-high

Container Highest

--md3-color-surface-container-highest

Outline

--md3-color-outline

Outline Variant

--md3-color-outline-variant

2. 排版系统 Typography

字体栈: --md3-font-family

Display Large
57px/64px

中文电商标题 · E-commerce Title · Pamagat ng E-commerce

Display Medium
45px/52px

促销活动 · Promotions · Mga Promosyon

Display Small
36px/44px

区块标题 · Section Title · Pamagat ng Seksyon

Headline Large
32px/40px

页面标题 · Page Title · Pamagat ng Pahina

Headline Medium
28px/36px

卡片标题 · Card Title · Pamagat ng Card

Headline Small
24px/32px

子标题 · Subtitle · Subtitle

Title Large
22px/28px

导航标题 · Nav Title · Pamagat ng Nav

Title Medium
16px/24px

表单标题 · Form Title · Pamagat ng Form

Title Small
14px/20px

列表标题 · List Title · Pamagat ng Listahan

Body Large
16px/24px

正文内容，产品描述 · Product description · Paglalarawan ng produkto

Body Medium
14px/20px

辅助说明 · Helper text · Teksto ng tulong

Body Small
12px/16px

小字注释 · Annotations · Mga anotasyon

Label Large
14px/20px

按钮文字 · Button text · Teksto ng pindutan

Label Medium
12px/16px

Chip 文字 · Chip text · Teksto ng chip

Label Small
11px/16px

时间戳 · Timestamp · Timestamp

3. 间距系统 Spacing

--md3-spacing-1 (4px)

--md3-spacing-2 (8px)

--md3-spacing-3 (12px)

--md3-spacing-4 (16px)

--md3-spacing-5 (20px)

--md3-spacing-6 (24px)

--md3-spacing-8 (32px)

--md3-spacing-10 (40px)

--md3-spacing-12 (48px)

--md3-spacing-16 (64px)

4. 形状系统 Shape

none
0px

xs
4px

sm
8px

md
12px

lg
16px

xl
28px

full
pill

5. 阴影/高程 Elevation

Level 0

Level 1

Level 2

Level 3

Level 4

Level 5

6. 动效系统 Motion

点击下方色块触发动画

standard

emphasized

decelerate

accelerate

7. 按钮 Buttons

样式变体 Variants

尺寸系列 Sizes (物理高度对比)

LG - 40px

.md3-btn--lg

MD - 36px

Default / MD

SM - 30px

.md3-btn--sm

XS - 28px

.md3-btn--xs

XXS - 24px

.md3-btn--xxs

8. 卡片 Cards

Elevated Card

使用 box-shadow 创建层次感
--md3-elevation-1

Filled Card

使用背景色填充
--md3-color-surface-container-highest

Outlined Card

使用边框勾勒
--md3-color-outline-variant

9. 输入控件 Inputs

用户名 Username

邮箱 Email

密码 Password

尺寸系列 Sizes (高度对齐规范)

LG - 40px

MD - 36px

SM - 30px

XS - 28px

XXS - 24px

10. Chip

Assist ✓ Filter Input × 电子产品 ✓ 包邮 Libreng Pagpapadala

11. 交互状态 State Layers

hover (0.08)

focus (0.10)

pressed (0.10)

dragged (0.16)

disabled (0.38)

disabled-container (0.12)

12. Z-index 层级

dropdown (100)

sticky (200)

drawer (400)

modal (500)

snackbar (600)

tooltip (700)

scrim (800)

overlay (900)

13. 图标尺寸 Icons

sm (18px)

md (24px)

lg (28px)

xl (40px)

display (48px)

14. 电商组件 Commerce

价格排版

₱1,299.00 ₱1,899.00 -32%

¥299.00 ¥499.00

订单状态

待付款 Pending 处理中 Processing 已完成 Completed 已取消 Cancelled 退款 Refund

支付方式选择

◉ 余额支付 Balance ₱5,200.00

○ GCash

○ 支付宝 Alipay

15. 日历选择器 Date Picker

自研组件 · sanxio-date-picker.css + date-picker.js

静态预览

日一二三四五六

⚠ 硬编码 #ffffff 未用 token ⚠ 用旧 --md-sys- 变量名 ⚠ 用旧 --sr-space- 私有变量

16. 下拉选择框 Select Card

自研组件 · md3-select-card.css + md3-select-card.js

尺寸系列 Sizes (高度对齐规范)

LG - 40px

Large

MD - 36px

Medium

SM - 30px

Small

XS - 28px

Extra

XXS - 24px

Micro

17. 数量步进器 Qty Stepper

自研组件 · qty-stepper.css

18. 地区树 Area Tree

自研组件 · search-results.css(嵌入) + area-tree.js

静态预览 — 展开/收起/选中

● 全部地区 All Areas
▶ Metro Manila
- ▶ Makati
- ▶ Quezon City
- ▶ Pasig
▶ 北京 Beijing
▶ 上海 Shanghai

⚠ CSS 嵌入 search-results.css 未独立 ⚠ 依赖后端 API 异步加载子级 ⚠ #id 选择器耦合高

19. 分类穿梭框 Category Shuttle

自研组件 · member-edit-md3-company-tab.css + member-edit-cate-shuttle.js

静态预览 — 左树右列穿梭

选择行业 Select Industry

▸ 电子产品 Electronics

└ 手机配件 Phone Accessories

▸ 服装纺织 Apparel

▸ 食品饮料 Food & Beverage

▸ 建筑材料 Construction

已选主营 Selected (2/5)

手机配件×

服装纺织×

⚠ CSS 嵌入 member-edit-md3-company-tab.css ⚠ 选择器耦合 .member-md3-page

20. 营业时间 Business Hours

自研组件 · member-edit-business-hours.css + member-edit-business-hours.js

静态预览 — 周一至周日

周一 Mon09:00—18:00

周二 Tue09:00—18:00

周三 Wed09:00—18:00

周四 Thu09:00—18:00

周五 Fri09:00—17:00

周六 Sat10:00—15:00

周日 Sun休息 Closed

21. Tab Bar 选项卡

新统一组件 · md3-tabs.css

下划线风格（默认）

全部 36 待付款 5 待发货 2 待收货 1 已完成 28 待评价 0

药丸/Chip 风格

全部服务退款退货换货

填充背景风格

基本资料公司资料联系方式

22. Badge 角标

新统一组件 · md3-badge.css

计数角标

默认(error) 3 Primary 12 Success OK Warning ! Info 99+ 大号 256

小红点 + 描边

未读描边 Primary NEW 描边 Error 紧急描边 Info 普通

状态标签

已完成待处理已取消自营普通

23. Data Table 数据表格

新统一组件 · md3-data-table.css

旑马纹 + Hover

单号	商品	金额	状态	操作
20260510001	Phone Case - Leather Black	₱ 580.00	待付款	详情
20260509042	USB-C 充电器 65W	₱ 1,290.00	已完成	详情
20260508118	蓝牙耳机 TWS Pro	₱ 2,450.00	待发货	详情
20260507200	屏幕保护膜 x3	₱ 320.00	已取消	详情

紧凑模式

快递公司	单号	状态	更新时间
LBC Express	LBC-92837465	已签收	2026-05-09
J&T Express	JT-10294856	运输中	2026-05-10
Flash Express	FL-38475610	待取件	2026-05-10

24. 弹窗 Dialogs

确认退出？

退出后你将需要重新登录才能访问会员中心。

25. 提示条 Snackbars

已成功保存您的个人资料

网络连接错误，请检查您的设置

26. 列表项 List Items

notifications

新消息通知

开启

account_circle

账号安全

上次登录时间：2026-05-10

chevron_right

mail

系统维护通知

我们将于今晚 12:00 进行例行维护，届时部分功能将不可用，请提前做好准备。

15:30

27. 开关与进度条 Controls

Switch 开关

Progress 进度

28. 搜索栏 Search Bar

search mic

29. 分段按钮 Segmented Buttons

30. 空状态 Empty State

shopping_cart_off

购物车空空如也

你还没有添加任何商品到购物车，快去商城逛逛吧！

31. 文字提示 Tooltips

32. 滑块 Sliders

价格区间

₱ 0 ₱ 10,000

33. 头像 Avatars

S

JD

A

34. 分割线 Dividers

这是一段文字内容。

分割线之后的内容，用于区分不同的信息区块。

MD3 的分割线非常克制且优雅。

35. Sheets 浮层

选择操作

share

分享到社交网络

link

复制链接

过滤选项

close

价格从高到低

价格从低到高

37. 移动端导航 Navigation Bar

内容区预览

38. 手风琴 Accordion

进入会员中心，点击“收货地址”管理，即可对现有的地址进行编辑或新增。修改后的地址将在下一次下单时生效。

我们目前支持 GCash, PayMaya, 信用卡支付以及银行转账。部分地区支持货到付款 (COD)。

审核通过后，退款通常会在 3-7 个工作日内退回到您的原支付账户。具体到账时间取决于银行的处理速度。

39. 步骤条 Steppers

check

订单已提交

2026-05-10 14:20

2

商家正在备货

预计今日傍晚发货

3

等待快递取件

4

已收货

40. 底部操作栏 Bottom Actions

页面滚动内容区域...

合计 ₱ 1,850.00

41. 骨架屏 Skeleton Screens

42. 图片上传 Image Uploader

add_a_photo 上传头像

cloud_upload 上传凭证

43. 选择标签组 Choice Chips

check 白色

黑色

蔚蓝色

深灰色

44. 统计卡片 Statistics Cards

总资产 (PHP)

₱ 128,450.00

trending_up 比上月增长 12.5%

累计订单

1,420

trending_down 比上周减少 2.3%

45. 认证组件 Auth UI

欢迎回来

或使用邮箱登录

46. 时间选择器 Time Picker

09:00

10:00

11:00

13:00

14:00

15:00

47. 横幅提示 Banners

48. 密码强度 Password Strength

输入密码

••••••••

密码强度：强

49. 标签云 Tag Cloud

50. 评分 Ratings

star star star star star

4.0 (1.2k 评价)

51. 搜索建议 Search Suggestions

search

history

手机壳苹果15

trending_up

智能手机 2026 新款

search

手机支架车载

52. 订阅价格表 Pricing Tables

基础版

免费

标准客服支持
每月 5 笔订单导出
基础数据分析

专业版 (推荐)

₱ 999/月

优先客服支持
无限订单导出
高级商业智能分析
专属客户经理