测试2

这是一个测试页面，用于展示各种标记、按钮、索引和引用的功能。

本页面继承自SteveZMTstudios的博客页面。
基于CC BY-NC-SA 4.0协议转载。

源代码：test2-1.md

更多用法：mdui.org

标记

加粗文本

斜体文本

删除线文本

按钮

点击我

索引

• 标记
• 按钮
• 引用

引用

这是一个引用示例。

标记

加粗文本

斜体文本

删除线文本

按钮

点击我

主题按钮

favorite

索引

• 标记
• 按钮
• 引用
• 搜索
• 侧边栏

引用

这是一个引用示例。

搜索

搜索

MDUI 组件测试页面

查看完整演示

按钮测试

基础按钮

默认按钮 凸起按钮 face 主题色按钮

按钮事件测试

显示 Snackbar 显示对话框 显示菜单

对话框测试

基础对话框

Alert Confirm Prompt

菜单

下拉菜单

State 1 State 2 State 3 State 4 State 5 State 6

表单组件

文本框

用户名

开关

开关 开关(常开不可用)

滑块

带刻度滑块

卡片

标题

副标题

卡片内容

action

可展开面板

点击展开

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod architecto, mollitia iste, inventore suscipit impedit at ratione hic nulla sapiente sit nam amet! Sapiente, libero? Blanditiis id odio nisi. Delectus placeat harum facere laboriosam eveniet velit inventore obcaecati repudiandae, quae tenetur nisi, totam dolorum, necessitatibus unde quisquam praesentium earum? Recusandae cum minima veritatis quae quis consectetur odio tempora quisquam. Repudiandae atque dolor obcaecati fugiat voluptatem id? Exercitationem aliquid quos aspernatur praesentium, nostrum dolorum qui, debitis quidem fugiat velit possimus numquam, animi unde necessitatibus natus sequi odio aperiam? Quo, assumenda. Magni, mollitia! Ducimus, nihil quisquam deserunt soluta asperiores voluptas doloremque quasi magni quidem eligendi id accusamus repudiandae nostrum excepturi eius fugiat commodi exercitationem animi minus doloribus deleniti quo ipsum? Inventore!

表格

表格：

表头
1	2
3	4

工具提示

鼠标悬浮显示提示

MDUI 组件完整演示

图标

涟漪效果

button
button

自定义涟漪颜色

black
white
red
blue

按钮

扁平

Button
button
button

浮动

Button
Button
Button

图标

add add add

密集型

button
Button

add

不可用

disabled
disabled

add

块级元素

block

block

按钮组

format_align_left format_align_center format_align_right format_align_justify

浮动操作按钮

形同右下角，详见文档

下拉选择

原生单选 select 组件

State 1 State 2 State 3 State 4 State 5 State 6

原生多选 select 组件

Roboto Calibri Courier New Verdana 50% 75% 90% 100% h1 h2 h3 h4 State 1 State 2 State 3 State 4 State 5 State 6

分隔线

内凹分隔线

可扩展面板

Trip name

Carribean cruise

keyboard_arrow_down

First content

First content

First content

First content

First content

First content

cancel save

Location

keyboard_arrow_down

Second content

Second content

Second content

Second content

Second content

Second content

cancel save

Start and end dates

Start date: Feb 29, 2016

End date: Not set

keyboard_arrow_down

Third content

Third content

Third content

Third content

Third content

Third content

cancel save

文本框

固定标签

User Name

浮动标签 （推荐）

Email

不可用

User Name

Email

多行文本框

Subject

Message

Disabled

含帮助文本

Helper Text

含图标

email

account_circle User name

Helper Text

textsms Message

lock

可展开

search close

左

右

search close

表单验证

User name

用户名不能为空

邮箱验证&字数

Email

邮箱格式错误

Password

密码至少 6 位，且包含大小写字母

请输入至少 6 位，且包含大小写字母的密码

布局组件

网格系统

抽屉式导航

已生效，在左侧标签栏中。
文档：mdui.org

导航组件

工具栏

menu Title

search refresh more_vert

menu Title

search refresh more_vert

web shopping videos

menu Title

search refresh more_vert

phone recents favorite favorites perm_contact_calendar nearby

menu Title

search refresh more_vert

抽屉式导航

本页已应用，试着向左滑动。
详见文档

底部导航栏

history Recents favorite Favorites location_on Nearby

live_tv Movies music_note Music book Books library_books Newsstand

live_tv Movies music_note Music book Books library_books Newsstand

选项卡

web shopping images

web content

shopping content

images content

web shopping videos images news maps books flights apps dictionary

web shopping videos

web shopping videos

phone recents favorite favorites perm_contact_calendar nearby

phone recents favorite favorites perm_contact_calendar nearby

底部导航栏

history 最近 favorite 收藏 person 我的

表单组件

单选框

默认不选中 默认选中 禁用，且不选中

禁用，且选中

复选框

默认不选中 默认选中 禁用，且不选中 禁用，且选中 不确定状态 禁用，且不确定状态

开关

开关

滑块

不可用

选择框

选项1 选项2 选项3

对话框组件

基础对话框

open

Are you sure?

You'll lose all photos and media!

cancel erase

不带标题的对话框

open

Discard draft?

cancel discard

竖排按钮

open

Use Google's location service?

Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.

turn on speed boost no thanks

固定标题和按钮

open

Use Google's location service?

Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

no thanks turn on speeboost

提示对话框

提示对话框

反馈组件

Snackbar

open

bottom top left-top left-bottom right-top right-bottom

进度条

循环进度条

环形进度条

多彩环形进度条

滚动条

带滚动条的面板

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

很长的内容...

彩蛋！lol

很长的内容...

提示消息

显示提示消息

其他组件

卡片

Title

Subtitle

share

Title

Subtitle

子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」

action 1 action 2 expand_more

Title

Subtitle

action 1 action 2

列表

email

收件箱

send

发件箱

密集型

• move_to_inbox
  Inbox
• send
  Outbox
• delete
  Trash
• error
  Spam

带复选框

Line item selected

chat

Line item unselected

chat

Line item selected

chat

带开关

• network_wifi
  Wi-Fi
• bluetooth
  Bluetooth
• data_usage
  Data usage

子列表

• home
  Home
• dashboard
  Dashboard
• people

  Audience

  keyboard_arrow_down
  • Overview
  • Language
  • Location
  • New vs Returning
• device_hub

  Acquisition

  keyboard_arrow_down
  • Overview
  • All Traffic
  • Direct Traffic
  • Search Overview
• touch_app

  Behavior

  keyboard_arrow_down
  • Overview
  • All Pages
  • Landing Pages
  • Exit Pages
• shopping_cart
  Ecommerce

表格

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calclum (%)	Lron (%)
Frozen yogurt	159	6.0	24	4.0	87	14%	1%
Ice cream sandwich	237	9.0	37	4.3	129	8%	1%
Eclair	262	16.0	24	6.0	337	6%	7%

Markdown 表格

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

工具提示

悬浮显示提示

徽章

5

123

纸片

Example Chip

/ MDUI Design

face Example Chip

Example Chip cancel

折叠面板

面板标题1

面板内容1

面板标题2

面板内容2

菜单

open

• Refresh
• Help & feedback
• Settings
• Sign out

带图标

open

• remove_red_eyePreview
• file_downloadDownload
• deleteRemove
• Empty

级联

open

• remove_red_eyePreview
• file_downloadDownload
• deleteRemove
• Empty

thumb_up

此页内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文链接：
https://blog.stevezmt.top/2024/12/24/test2-1/