-
- {{ demo.name['zh-CN'] }}
-
+
+
+ {{ demo.name['zh-CN'] }}
+
+
+
@@ -75,14 +87,11 @@
diff --git a/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue b/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue
new file mode 100644
index 000000000..fbb1e2bb1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue
@@ -0,0 +1,29 @@
+
+
+
+ 动作面板
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue b/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue
new file mode 100644
index 000000000..f54fd4184
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/action-sheet/ellipsis.vue
@@ -0,0 +1,82 @@
+
+
+
+
单选,值:{{ activeName1 }}
+
内容超出隐藏
+
内容超出显示
+
+
+
+
多选,值:{{ activeName2 }}
+
内容超出隐藏
+
内容超出显示
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue b/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue
new file mode 100644
index 000000000..f609a4c2f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue
@@ -0,0 +1,29 @@
+
+
+
+ 单击遮罩层不关闭弹窗
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/action-sheet/mask.vue b/examples/docs/resources/mobile-first/app/action-sheet/mask.vue
new file mode 100644
index 000000000..a6d9152f1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/action-sheet/mask.vue
@@ -0,0 +1,29 @@
+
+
+
+ 关闭遮罩层
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue b/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue
new file mode 100644
index 000000000..b3419fd48
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/action-sheet/multiple.vue
@@ -0,0 +1,64 @@
+
+
+
+
+ 单选
+
+
值:{{ activeName1 }}
+
+
+
+
+ 多选
+
+
值:{{ activeName2 }}
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/action-sheet/show.vue b/examples/docs/resources/mobile-first/app/action-sheet/show.vue
new file mode 100644
index 000000000..5e163a872
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/action-sheet/show.vue
@@ -0,0 +1,58 @@
+
+
+
+ 默认属性配置
+
+
+
+ 隐藏头部
+
+
+
+ 显示底部
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/action-sheet/slot.vue b/examples/docs/resources/mobile-first/app/action-sheet/slot.vue
new file mode 100644
index 000000000..7471631b3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/action-sheet/slot.vue
@@ -0,0 +1,81 @@
+
+
+
+ 头部左侧插槽
+
+
+ 清空
+
+
+
+
+ 头部右侧插槽
+
+
+ 自定义关闭
+
+
+
+
+ 内容插槽
+
+
+
选项1
+
选项2
+
选项3
+
选项4
+
+
+
+
+ 底部插槽
+
+
+ 自定义按钮1 自定义按钮2
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/base.vue b/examples/docs/resources/mobile-first/app/alert/base.vue
new file mode 100644
index 000000000..4b6984814
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/base.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/center.vue b/examples/docs/resources/mobile-first/app/alert/center.vue
new file mode 100644
index 000000000..2feb5dc64
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/center.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/closable.vue b/examples/docs/resources/mobile-first/app/alert/closable.vue
new file mode 100644
index 000000000..e6cf3141b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/closable.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/close-text.vue b/examples/docs/resources/mobile-first/app/alert/close-text.vue
new file mode 100644
index 000000000..7a1ac6f1d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/close-text.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/close.vue b/examples/docs/resources/mobile-first/app/alert/close.vue
new file mode 100644
index 000000000..daf24f75d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/close.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/custom-description.vue b/examples/docs/resources/mobile-first/app/alert/custom-description.vue
new file mode 100644
index 000000000..3318972ea
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/custom-description.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+ size 为 large 时根据 description slot 自定义内容
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue b/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue
new file mode 100644
index 000000000..66c70983e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/feedback-of-result.vue
@@ -0,0 +1,26 @@
+
+
+
+ 继续提交
+ 取消操作
+
+
+
+
+
+ 继续提交
+ 取消操作
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/icon.vue b/examples/docs/resources/mobile-first/app/alert/icon.vue
new file mode 100644
index 000000000..34a25dcc5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/icon.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/show-foldable.vue b/examples/docs/resources/mobile-first/app/alert/show-foldable.vue
new file mode 100644
index 000000000..841c36730
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/show-foldable.vue
@@ -0,0 +1,48 @@
+
+
+ 命名插槽:
+
+
+
+ {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }}
+ 相关操作
+
+
+
+
+
+ {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }}
+ 相关操作
+ {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }}
+ 相关操作
+
+
+ 默认插槽:
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/show-icon.vue b/examples/docs/resources/mobile-first/app/alert/show-icon.vue
new file mode 100644
index 000000000..e86f0eed3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/show-icon.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/size.vue b/examples/docs/resources/mobile-first/app/alert/size.vue
new file mode 100644
index 000000000..b36b27aa7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/size.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/slot-default.vue b/examples/docs/resources/mobile-first/app/alert/slot-default.vue
new file mode 100644
index 000000000..d24a0a122
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/slot-default.vue
@@ -0,0 +1,68 @@
+
+
+
+ 这是一条普通的消息提示 相关操作
+
+
+
+ {{ msg }}
+
+
+
+
+ {{ msg.length > 160 ? msg.slice(0, 160) + '...' : msg }} 相关操作
+
+
+
+
+ 自定义内容
+
+
+
+ 确定
+ 取消
+
+
+
+ 继续提交
+ 取消操作
+
+
+
+
+
+ 继续提交
+ 取消操作
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/title.vue b/examples/docs/resources/mobile-first/app/alert/title.vue
new file mode 100644
index 000000000..80689d0ef
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/title.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+ 通过 slot 设置自定义 title
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/type.vue b/examples/docs/resources/mobile-first/app/alert/type.vue
new file mode 100644
index 000000000..40ab511b1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/type.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md
new file mode 100644
index 000000000..3d59cb11d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.cn.md
@@ -0,0 +1,9 @@
+---
+title: Alert 警告
+---
+
+# Alert 警告
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md
new file mode 100644
index 000000000..3d59cb11d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.en.md
@@ -0,0 +1,9 @@
+---
+title: Alert 警告
+---
+
+# Alert 警告
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js
new file mode 100644
index 000000000..4af2d761b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/alert/webdoc/alert.js
@@ -0,0 +1,117 @@
+export default {
+ column: '2',
+ owner: '',
+ demos: [
+ {
+ demoId: 'type',
+ name: {
+ 'zh-CN': '类型',
+ 'en-US': 'basic usage'
+ },
+ desc: {
+ 'zh-CN': '
通过type
设置不同的类型。可选值:success、warning、info、error,默认值:info 。
',
+ 'en-US': '
button type
'
+ },
+ codeFiles: ['type.vue']
+ },
+ {
+ demoId: 'size',
+ name: {
+ 'zh-CN': '大尺寸',
+ 'en-US': 'button round'
+ },
+ desc: {
+ 'zh-CN': '
通过 size
属性设置不同的尺寸,可选值:nomal、large,默认值:nomal 。
',
+ 'en-US': '
button round
'
+ },
+ codeFiles: ['size.vue']
+ },
+ {
+ demoId: 'title',
+ name: {
+ 'zh-CN': '自定义标题',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
当 size
为 large 时显示标题,可设置 title
或 slot
自定义标题。默认标题根据设置的 type
显示。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['title.vue']
+ },
+ {
+ demoId: 'closable',
+ name: {
+ 'zh-CN': '不可关闭',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
通过 closable
属性可设置是否显示关闭按钮,没有关闭按钮,警告框将不可关闭。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['closable.vue']
+ },
+ {
+ demoId: 'custom-description',
+ name: {
+ 'zh-CN': '自定义提示内容',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
可通过 description
属性或插槽设置自定义提示内容。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['custom-description.vue']
+ },
+ {
+ demoId: 'slot-default',
+ name: {
+ 'zh-CN': '自定义交互操作',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
当 size
为 large 时,设置默认插槽自定义交互操作。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['slot-default.vue']
+ },
+ {
+ demoId: 'close',
+ name: {
+ 'zh-CN': '关闭事件',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
close
事件,关闭警告框时触发。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['close.vue']
+ },
+ {
+ demoId: 'feedback-of-result',
+ name: {
+ 'zh-CN': '表单提交结果反馈',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
当 size
为 large 时,属性 description
和默认插槽结合使用,可渲染提交反馈界面。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['feedback-of-result.vue']
+ },
+ {
+ demoId: 'show-icon',
+ name: {
+ 'zh-CN': '是否显示图标',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
通过配置 show-icon
属性,控制图标是否显示。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['show-icon.vue']
+ }
+ ],
+ apis: []
+}
diff --git a/examples/docs/resources/mobile-first/app/badge/base.vue b/examples/docs/resources/mobile-first/app/badge/base.vue
new file mode 100644
index 000000000..163d626bd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/base.vue
@@ -0,0 +1,65 @@
+
+
+
数字标记 :
+
+
+
+
点标记 :
+
+
+ 我的待办
+
+
+
+
+
+
+
+
+
+
+
+
+
+
数字标记 :
+
+
+ 我的待办
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue b/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue
new file mode 100644
index 000000000..8be8a545e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue
@@ -0,0 +1,34 @@
+
+
+
+ 我的待办
+
+
+
+ 读取一条消息
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/is-dot.vue b/examples/docs/resources/mobile-first/app/badge/is-dot.vue
new file mode 100644
index 000000000..c9542e49c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/is-dot.vue
@@ -0,0 +1,15 @@
+
+
+ 小圆点显示
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/max.vue b/examples/docs/resources/mobile-first/app/badge/max.vue
new file mode 100644
index 000000000..123c26a32
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/max.vue
@@ -0,0 +1,15 @@
+
+
+ 最大值显示
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/slot-content.vue b/examples/docs/resources/mobile-first/app/badge/slot-content.vue
new file mode 100644
index 000000000..5c3bc733c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/slot-content.vue
@@ -0,0 +1,18 @@
+
+
+ 自定义内容插槽
+
+ 自定义
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/slot-default.vue b/examples/docs/resources/mobile-first/app/badge/slot-default.vue
new file mode 100644
index 000000000..1c1273716
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/slot-default.vue
@@ -0,0 +1,17 @@
+
+
+
+ 自定义默认插槽
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/target.vue b/examples/docs/resources/mobile-first/app/badge/target.vue
new file mode 100644
index 000000000..823f21ea9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/target.vue
@@ -0,0 +1,21 @@
+
+
+
+ 当前标签打开
+
+
+
+ 新建标签打开
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/type-left.vue b/examples/docs/resources/mobile-first/app/badge/type-left.vue
new file mode 100644
index 000000000..0170cbd4e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/type-left.vue
@@ -0,0 +1,33 @@
+
+
+
+ danger 类型
+
+
+
+ primary 类型
+
+
+
+ success 类型
+
+
+
+ warning 类型
+
+
+
+ info 类型
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/badge/type.vue b/examples/docs/resources/mobile-first/app/badge/type.vue
new file mode 100644
index 000000000..f3da4a12d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/badge/type.vue
@@ -0,0 +1,20 @@
+
+
+ 默认类型
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button-group/base.vue b/examples/docs/resources/mobile-first/app/button-group/base.vue
new file mode 100644
index 000000000..e3b916306
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button-group/base.vue
@@ -0,0 +1,26 @@
+
+
+
+ 当前选中值:{{ checkedVal }}
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button-group/data.vue b/examples/docs/resources/mobile-first/app/button-group/data.vue
new file mode 100644
index 000000000..01a935e1b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button-group/data.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button-group/disabled.vue b/examples/docs/resources/mobile-first/app/button-group/disabled.vue
new file mode 100644
index 000000000..020780b09
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button-group/disabled.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button-group/plain.vue b/examples/docs/resources/mobile-first/app/button-group/plain.vue
new file mode 100644
index 000000000..5f75a3570
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button-group/plain.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button-group/size.vue b/examples/docs/resources/mobile-first/app/button-group/size.vue
new file mode 100644
index 000000000..b226422cf
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button-group/size.vue
@@ -0,0 +1,26 @@
+
+
+
+ 当前选中值:{{ checkedVal }}
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button-group/slot-default.vue b/examples/docs/resources/mobile-first/app/button-group/slot-default.vue
new file mode 100644
index 000000000..1b2708fa5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button-group/slot-default.vue
@@ -0,0 +1,18 @@
+
+
+ Button1
+ Button2
+ Button3
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue b/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue
new file mode 100644
index 000000000..4d5a0a8b0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button-group/text-value-field.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/autofocus.vue b/examples/docs/resources/mobile-first/app/button/autofocus.vue
new file mode 100644
index 000000000..3d2a71b0d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/autofocus.vue
@@ -0,0 +1,24 @@
+
+
+ 默认按钮
+
+ 默认聚焦
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/base-saas.vue b/examples/docs/resources/mobile-first/app/button/base-saas.vue
new file mode 100644
index 000000000..0d6bca37b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/base-saas.vue
@@ -0,0 +1,71 @@
+
+
+
+ 默认按钮
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+ 朴素按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/base.vue b/examples/docs/resources/mobile-first/app/button/base.vue
new file mode 100644
index 000000000..5bc0cad62
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/base.vue
@@ -0,0 +1,71 @@
+
+
+
+ 默认按钮
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+ 线性按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/button-class.vue b/examples/docs/resources/mobile-first/app/button/button-class.vue
new file mode 100644
index 000000000..a99fc1cbf
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/button-class.vue
@@ -0,0 +1,18 @@
+
+
+ 默认按钮
+
+ 主要按钮
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/circle.vue b/examples/docs/resources/mobile-first/app/button/circle.vue
new file mode 100644
index 000000000..bc56576fa
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/circle.vue
@@ -0,0 +1,61 @@
+
+
+
+
+ C
+
+
+ C
+
+
+ C
+
+
+ C
+
+
+ C
+
+
+ C
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/click.vue b/examples/docs/resources/mobile-first/app/button/click.vue
new file mode 100644
index 000000000..7b581969f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/click.vue
@@ -0,0 +1,26 @@
+
+
+ 默认按钮
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue b/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue
new file mode 100644
index 000000000..e9e87078b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue
@@ -0,0 +1,52 @@
+
+
+
+
+ {{ disabled ? '点击启用按钮' : '点击禁用按钮' }}
+
+
+
+
+ 默认按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/icon.vue b/examples/docs/resources/mobile-first/app/button/icon.vue
new file mode 100644
index 000000000..c4b6be925
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/icon.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/image.vue b/examples/docs/resources/mobile-first/app/button/image.vue
new file mode 100644
index 000000000..c78a38bcb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/image.vue
@@ -0,0 +1,21 @@
+
+
+
+ 图片按钮
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/link.vue b/examples/docs/resources/mobile-first/app/button/link.vue
new file mode 100644
index 000000000..51829075b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/link.vue
@@ -0,0 +1,17 @@
+
+
+
+ 超链接按钮
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/loading.vue b/examples/docs/resources/mobile-first/app/button/loading.vue
new file mode 100644
index 000000000..de1f181fb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/loading.vue
@@ -0,0 +1,32 @@
+
+
+
+ 加载中
+
+
+ 加载中
+
+
+ 加载中
+
+
+ 加载中
+
+
+ 加载中
+
+
+ 加载中
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/plain.vue b/examples/docs/resources/mobile-first/app/button/plain.vue
new file mode 100644
index 000000000..555d9cdaf
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/plain.vue
@@ -0,0 +1,38 @@
+
+
+
+ 朴素按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/reset-time.vue b/examples/docs/resources/mobile-first/app/button/reset-time.vue
new file mode 100644
index 000000000..b7f3d05d7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/reset-time.vue
@@ -0,0 +1,27 @@
+
+
+ 默认禁用
+
+ 无禁用
+
+
+ 禁用 5 秒
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/round.vue b/examples/docs/resources/mobile-first/app/button/round.vue
new file mode 100644
index 000000000..9beea86c5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/round.vue
@@ -0,0 +1,32 @@
+
+
+
+ 默认按钮
+
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/size.vue b/examples/docs/resources/mobile-first/app/button/size.vue
new file mode 100644
index 000000000..6d9f3bb34
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/size.vue
@@ -0,0 +1,30 @@
+
+
+ 默认按钮
+
+ 中等按钮
+
+
+ 小型按钮
+
+
+ 超小按钮
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/slot-default.vue b/examples/docs/resources/mobile-first/app/button/slot-default.vue
new file mode 100644
index 000000000..8c7a2b569
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/slot-default.vue
@@ -0,0 +1,30 @@
+
+
+
默认按钮
+
+ 上传
+
+
+
+
+ 图片按钮
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/text.vue b/examples/docs/resources/mobile-first/app/button/text.vue
new file mode 100644
index 000000000..0b2b848a2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/text.vue
@@ -0,0 +1,24 @@
+
+
+
+ 文本按钮
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/type.vue b/examples/docs/resources/mobile-first/app/button/type.vue
new file mode 100644
index 000000000..73ecf2af6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/type.vue
@@ -0,0 +1,39 @@
+
+
+ 默认按钮
+
+ 主要按钮
+
+
+ 成功按钮
+
+
+ 信息按钮
+
+
+ 警告按钮
+
+
+ 危险按钮
+
+
+ 文本按钮
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md b/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md
new file mode 100644
index 000000000..718e2a7b0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.cn.md
@@ -0,0 +1,11 @@
+---
+title: Button 按钮
+---
+
+# Button 按钮
+
+
+
+常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md b/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md
new file mode 100644
index 000000000..718e2a7b0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.en.md
@@ -0,0 +1,11 @@
+---
+title: Button 按钮
+---
+
+# Button 按钮
+
+
+
+常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
+
+
diff --git a/examples/docs/resources/mobile-first/app/button/webdoc/button.js b/examples/docs/resources/mobile-first/app/button/webdoc/button.js
new file mode 100644
index 000000000..d631247df
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/button/webdoc/button.js
@@ -0,0 +1,131 @@
+export default {
+ column: '2',
+ owner: '',
+ demos: [
+ {
+ demoId: 'text',
+ name: {
+ 'zh-CN': '文字按钮',
+ 'en-US': 'basic usage'
+ },
+ desc: {
+ 'zh-CN':
+ '
设置type
属性为 text
即为文字按钮,可在标签子级或者通过 text
属性设置显示内容。
',
+ 'en-US': '
button type
'
+ },
+ codeFiles: ['text.vue']
+ },
+ {
+ demoId: 'button-class',
+ name: {
+ 'zh-CN': '定制样式类',
+ 'en-US': 'button round'
+ },
+ desc: {
+ 'zh-CN': '
设置 button-class
属性定制按钮样式
',
+ 'en-US': '
button round
'
+ },
+ codeFiles: ['button-class.vue']
+ },
+ {
+ demoId: 'plain',
+ name: {
+ 'zh-CN': '线性按钮',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
配置 plain
属性为 true,即可展示为线性按钮的形式。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['plain.vue']
+ },
+ {
+ demoId: 'link',
+ name: {
+ 'zh-CN': '超链接按钮',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
通过设置href
属性可跳转到指定页面。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['link.vue']
+ },
+ {
+ demoId: 'type',
+ name: {
+ 'zh-CN': '主题样式',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
通过 type
属性可以设置不同的主题样式,主要包括 primary、success、info、warning、danger、text。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['type.vue']
+ },
+ {
+ demoId: 'size',
+ name: {
+ 'zh-CN': '尺寸',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
通过 size
属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['size.vue']
+ },
+ {
+ demoId: 'autofocus',
+ name: {
+ 'zh-CN': '聚焦',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
通过 autofocus
属性设置是否默认聚焦。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['autofocus.vue']
+ },
+ {
+ demoId: 'reset-time',
+ name: {
+ 'zh-CN': '防止表单重复提交',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
通过 reset-time
属性可设置单击后按钮禁用的时长,默认的禁用时长为 1000 毫秒。 可用于防止按钮连续点击出现表单重复提交的问题。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['reset-time.vue']
+ },
+ {
+ demoId: 'click',
+ name: {
+ 'zh-CN': '事件',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
按钮的单击事件,该示例中单击按钮将会出现提示信息。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['click.vue']
+ },
+ {
+ demoId: 'dynamic-disable-button',
+ name: {
+ 'zh-CN': '动态禁用按钮',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
设置 disabled
属性为 true 后,可以禁用按钮。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['dynamic-disable-button.vue']
+ }
+ ],
+ apis: []
+}
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue b/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue
new file mode 100644
index 000000000..bf0d0e55b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/basic-usage.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue b/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue
new file mode 100644
index 000000000..1e1674fad
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/disabled.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue b/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue
new file mode 100644
index 000000000..f669876f6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/marked.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue b/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue
new file mode 100644
index 000000000..6a532f27f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/render-current.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue b/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue
new file mode 100644
index 000000000..f95412b01
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/render-today.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md
new file mode 100644
index 000000000..229259be1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.cn.md
@@ -0,0 +1,11 @@
+---
+title: CalendarBar 日历栏
+---
+
+# CalendarBar 日历栏
+
+
+
+CalendarBar 日历栏
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md
new file mode 100644
index 000000000..229259be1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.en.md
@@ -0,0 +1,11 @@
+---
+title: CalendarBar 日历栏
+---
+
+# CalendarBar 日历栏
+
+
+
+CalendarBar 日历栏
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js
new file mode 100644
index 000000000..cb4897003
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js
@@ -0,0 +1,96 @@
+export default {
+ column: '2',
+ owner: '',
+ demos: [
+ {
+ demoId: 'basic-usage',
+ name: {
+ 'zh-CN': '基本用法',
+ 'en-US': 'basic usage'
+ },
+ desc: {
+ 'zh-CN': '
组件 v-model
只接受字符串值,例如 2022-12-18
',
+ 'en-US': '
button type
'
+ },
+ codeFiles: ['basic-usage.vue']
+ },
+ {
+ demoId: 'disabled',
+ name: {
+ 'zh-CN': '禁用',
+ 'en-US': 'button round'
+ },
+ desc: {
+ 'zh-CN':
+ '
使用 config.disabled
配置一个方法,用于判断参数日期是否禁用。 使用 config.disabledColorClass
配置禁用日期的字体颜色类名。 使用 config.disabledBackgroundColorClass
配置禁用日期的背景颜色类名。
',
+ 'en-US': '
button round
'
+ },
+ codeFiles: ['disabled.vue']
+ },
+ {
+ demoId: 'marked',
+ name: {
+ 'zh-CN': '日期标记',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
使用 config.mark
配置一个方法,用于判断参数日期是否存在标记。 此方法返回空字符串表示不存在标记,返回非空字符串表示存在标记,且标记内容就是该字符串。 使用 config.markBackgroundColorClass
配置标记的颜色类名。 使用 config.showMarkMessage
配置是否开启标记 title
提示,默认值为 false
。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['marked.vue']
+ },
+ {
+ demoId: 'render-current',
+ name: {
+ 'zh-CN': '当前日期',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
用户传入的日期为 当前日期
。 使用 config.currentColorClass
配置 当前日期
的字体颜色类名; 使用 config.currentBackgroundColorClass
配置 当前日期
的背景颜色类名。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['render-current.vue']
+ },
+ {
+ demoId: 'render-today',
+ name: {
+ 'zh-CN': '今天',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN': '
使用 config.renderItem
可以配置一个方法,对日期面板的某些项进行定制渲染。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['render-today.vue']
+ },
+ {
+ demoId: 'week-first',
+ name: {
+ 'zh-CN': '周起始',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
使用 config.weekFirst
配置每周的起始天。默认值为 0
,表示周起始为 周日
。也可以配置为 1 ~ 6
,分别表示 周一 ~ 周六
。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['week-first.vue']
+ },
+ {
+ demoId: 'workday',
+ name: {
+ 'zh-CN': '工作日',
+ 'en-US': 'events'
+ },
+ desc: {
+ 'zh-CN':
+ '
用户传入的日期为 当前日期
,当前日期所在月份为 当前月份
,当前月份周六周日为 周末,非周六周日为 工作日。 使用 config.workday
配置一个方法,用于判断 工作日 是否作为真正的工作日; 使用 config.holiday
配置一个方法,用于判断 周末 是否作为真正的周末; 使用 config.workdayColorClass 和 config.holidayColorClass
配置工作日和周末的字体颜色类。
',
+ 'en-US': '
bbutton click
'
+ },
+ codeFiles: ['marked.vue']
+ }
+ ],
+ apis: []
+}
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue b/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue
new file mode 100644
index 000000000..36deb554e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/week-first.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue b/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue
new file mode 100644
index 000000000..f4a85a094
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/calendar-bar/workday.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/basic-usage.vue b/examples/docs/resources/mobile-first/app/card/basic-usage.vue
new file mode 100644
index 000000000..8eb3dc0bd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/basic-usage.vue
@@ -0,0 +1,21 @@
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/card-disabled.vue b/examples/docs/resources/mobile-first/app/card/card-disabled.vue
new file mode 100644
index 000000000..2f8ef4f21
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/card-disabled.vue
@@ -0,0 +1,46 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/card-events.vue b/examples/docs/resources/mobile-first/app/card/card-events.vue
new file mode 100644
index 000000000..2663a96e5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/card-events.vue
@@ -0,0 +1,60 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/card-group.vue b/examples/docs/resources/mobile-first/app/card/card-group.vue
new file mode 100644
index 000000000..2a099cd89
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/card-group.vue
@@ -0,0 +1,70 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/card-size.vue b/examples/docs/resources/mobile-first/app/card/card-size.vue
new file mode 100644
index 000000000..d098600f2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/card-size.vue
@@ -0,0 +1,60 @@
+
+
+
+ 这是一段长文本内容,这是一段长文本内容
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/card-status.vue b/examples/docs/resources/mobile-first/app/card/card-status.vue
new file mode 100644
index 000000000..7f2659aef
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/card-status.vue
@@ -0,0 +1,44 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/card-type.vue b/examples/docs/resources/mobile-first/app/card/card-type.vue
new file mode 100644
index 000000000..a70bacc3b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/card-type.vue
@@ -0,0 +1,41 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/check-type-checkbox.vue b/examples/docs/resources/mobile-first/app/card/check-type-checkbox.vue
new file mode 100644
index 000000000..aff36deb7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/check-type-checkbox.vue
@@ -0,0 +1,32 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/check-type-radio.vue b/examples/docs/resources/mobile-first/app/card/check-type-radio.vue
new file mode 100644
index 000000000..ef00ed845
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/check-type-radio.vue
@@ -0,0 +1,32 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/custom-class.vue b/examples/docs/resources/mobile-first/app/card/custom-class.vue
new file mode 100644
index 000000000..289f26575
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/custom-class.vue
@@ -0,0 +1,52 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/operate-bar.vue b/examples/docs/resources/mobile-first/app/card/operate-bar.vue
new file mode 100644
index 000000000..36b28dc40
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/operate-bar.vue
@@ -0,0 +1,45 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/card/slot.vue b/examples/docs/resources/mobile-first/app/card/slot.vue
new file mode 100644
index 000000000..85925e6f8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/card/slot.vue
@@ -0,0 +1,82 @@
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 大数据
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 云计算
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+ 这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,这是一段长文本内容,
+
+
+
+
+
+
刘小华
+
2023-03-20 10:10:10
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/aspect-ratio.vue b/examples/docs/resources/mobile-first/app/carousel/aspect-ratio.vue
new file mode 100644
index 000000000..1cfa157c1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/aspect-ratio.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/autoplay.vue b/examples/docs/resources/mobile-first/app/carousel/autoplay.vue
new file mode 100644
index 000000000..8fdb55f0c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/autoplay.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/basic-usage.vue b/examples/docs/resources/mobile-first/app/carousel/basic-usage.vue
new file mode 100644
index 000000000..81c94a4b6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/basic-usage.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-always.vue b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-always.vue
new file mode 100644
index 000000000..6baf1e640
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-always.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-hover.vue b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-hover.vue
new file mode 100644
index 000000000..9cc1b8b85
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-hover.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-never.vue b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-never.vue
new file mode 100644
index 000000000..b28c04b59
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/carousel-arrow-never.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/close-loop.vue b/examples/docs/resources/mobile-first/app/carousel/close-loop.vue
new file mode 100644
index 000000000..b30701758
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/close-loop.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/custom-height.vue b/examples/docs/resources/mobile-first/app/carousel/custom-height.vue
new file mode 100644
index 000000000..487ad55b6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/custom-height.vue
@@ -0,0 +1,36 @@
+
+
+
+
+ {{ item }}
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/indicator-style.vue b/examples/docs/resources/mobile-first/app/carousel/indicator-style.vue
new file mode 100644
index 000000000..5f61d5e76
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/indicator-style.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/indicator-trigger.vue b/examples/docs/resources/mobile-first/app/carousel/indicator-trigger.vue
new file mode 100644
index 000000000..25cf5ae77
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/indicator-trigger.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/initial-index.vue b/examples/docs/resources/mobile-first/app/carousel/initial-index.vue
new file mode 100644
index 000000000..f137acfc9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/initial-index.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/manual-play.vue b/examples/docs/resources/mobile-first/app/carousel/manual-play.vue
new file mode 100644
index 000000000..fb60a6ef5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/manual-play.vue
@@ -0,0 +1,55 @@
+
+
+
+
+ {{ item }}
+
+
+ 切换到
+
+
+ 上一张
+ 下一张
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/play-interval.vue b/examples/docs/resources/mobile-first/app/carousel/play-interval.vue
new file mode 100644
index 000000000..2873d9d52
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/play-interval.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/show-title.vue b/examples/docs/resources/mobile-first/app/carousel/show-title.vue
new file mode 100644
index 000000000..50517f462
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/show-title.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/carousel/up-down-carousel.vue b/examples/docs/resources/mobile-first/app/carousel/up-down-carousel.vue
new file mode 100644
index 000000000..6c9e2de92
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/carousel/up-down-carousel.vue
@@ -0,0 +1,28 @@
+
+
+
+ {{ item }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue b/examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue
new file mode 100644
index 000000000..3a07b01df
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue
@@ -0,0 +1,98 @@
+
+
+ 点击显示级联选择
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/cascader-select/cities.vue b/examples/docs/resources/mobile-first/app/cascader-select/cities.vue
new file mode 100644
index 000000000..db6456516
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/cascader-select/cities.vue
@@ -0,0 +1,56 @@
+
+
+ 点击显示级联选择
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue b/examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue
new file mode 100644
index 000000000..873dc3547
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue
@@ -0,0 +1,98 @@
+
+
+ 点击显示级联选择
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue b/examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue
new file mode 100644
index 000000000..04b6218af
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue
@@ -0,0 +1,106 @@
+
+
+ 点击显示级联选择
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/cascader-select/disabled.vue b/examples/docs/resources/mobile-first/app/cascader-select/disabled.vue
new file mode 100644
index 000000000..1e01583c8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/cascader-select/disabled.vue
@@ -0,0 +1,58 @@
+
+
+ 点击显示级联选择
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/cascader-select/object-option.vue b/examples/docs/resources/mobile-first/app/cascader-select/object-option.vue
new file mode 100644
index 000000000..8d52b9111
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/cascader-select/object-option.vue
@@ -0,0 +1,55 @@
+
+
+ 点击显示级联选择
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue b/examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue
new file mode 100644
index 000000000..850db6dd3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue
@@ -0,0 +1,112 @@
+
+
+ 点击显示级联选择
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue b/examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue
new file mode 100644
index 000000000..9b39dfc4b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue
@@ -0,0 +1,20 @@
+
+
+ 复选框
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue b/examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue
new file mode 100644
index 000000000..ff8063b1e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue
@@ -0,0 +1,36 @@
+
+
+
+ 获取文本
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-button.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-button.vue
new file mode 100644
index 000000000..de69b5179
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-button.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ 获取文本
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-events.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-events.vue
new file mode 100644
index 000000000..9de996c39
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-events.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ {{ logger }}
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-group.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-group.vue
new file mode 100644
index 000000000..eb6b6344b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-group.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/checkbox-slot.vue b/examples/docs/resources/mobile-first/app/checkbox/checkbox-slot.vue
new file mode 100644
index 000000000..0d6f3c167
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/checkbox-slot.vue
@@ -0,0 +1,30 @@
+
+
+
+
+ 复选框1
+
+
+
+
+ 复选框2
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/checked.vue b/examples/docs/resources/mobile-first/app/checkbox/checked.vue
new file mode 100644
index 000000000..5bb87e2be
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/checked.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/content-overflow.vue b/examples/docs/resources/mobile-first/app/checkbox/content-overflow.vue
new file mode 100644
index 000000000..edd9b89f7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/content-overflow.vue
@@ -0,0 +1,33 @@
+
+
+
+ 备选项1 提示文字 提示文字
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/dynamic-create-checkbox.vue b/examples/docs/resources/mobile-first/app/checkbox/dynamic-create-checkbox.vue
new file mode 100644
index 000000000..7a94467f2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/dynamic-create-checkbox.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/group-options.vue b/examples/docs/resources/mobile-first/app/checkbox/group-options.vue
new file mode 100644
index 000000000..88a6d8b4f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/group-options.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/indeterminate.vue b/examples/docs/resources/mobile-first/app/checkbox/indeterminate.vue
new file mode 100644
index 000000000..718c74dd1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/indeterminate.vue
@@ -0,0 +1,47 @@
+
+
+
全选
+
+
+
+ {{ city }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/min-max.vue b/examples/docs/resources/mobile-first/app/checkbox/min-max.vue
new file mode 100644
index 000000000..c6dab83ce
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/min-max.vue
@@ -0,0 +1,24 @@
+
+
+
+ {{ city }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/text.vue b/examples/docs/resources/mobile-first/app/checkbox/text.vue
new file mode 100644
index 000000000..374b7a215
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/text.vue
@@ -0,0 +1,36 @@
+
+
+
+ 获取文本
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/app/checkbox/vertical-checkbox.vue b/examples/docs/resources/mobile-first/app/checkbox/vertical-checkbox.vue
new file mode 100644
index 000000000..cbdfbab7a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/vertical-checkbox.vue
@@ -0,0 +1,24 @@
+
+
+
+ {{ city }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/checkbox/with-border.vue b/examples/docs/resources/mobile-first/app/checkbox/with-border.vue
new file mode 100644
index 000000000..7bd87cda2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/checkbox/with-border.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+ {{ city }}
+
+
+
+
+
+
+ {{ city }}
+
+
+
+
+
+
+ {{ city }}
+
+
+
+
+
+
+ {{ city }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/accordion.vue b/examples/docs/resources/mobile-first/app/collapse/accordion.vue
new file mode 100644
index 000000000..432f4fedd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/accordion.vue
@@ -0,0 +1,45 @@
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/basic-usage.vue b/examples/docs/resources/mobile-first/app/collapse/basic-usage.vue
new file mode 100644
index 000000000..c4eb3e300
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/basic-usage.vue
@@ -0,0 +1,37 @@
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/block-close.vue b/examples/docs/resources/mobile-first/app/collapse/block-close.vue
new file mode 100644
index 000000000..6ca635ae6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/block-close.vue
@@ -0,0 +1,43 @@
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/collapse-events.vue b/examples/docs/resources/mobile-first/app/collapse/collapse-events.vue
new file mode 100644
index 000000000..db848d775
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/collapse-events.vue
@@ -0,0 +1,45 @@
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title-right.vue b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title-right.vue
new file mode 100644
index 000000000..05b968b02
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title-right.vue
@@ -0,0 +1,44 @@
+
+
+
+
+ 一致性 Consistency
+
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title.vue b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title.vue
new file mode 100644
index 000000000..a5fe9b173
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/custom-collapse-title.vue
@@ -0,0 +1,49 @@
+
+
+
+
+ 一致性 Consistency
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/collapse/dynamic-disable.vue
new file mode 100644
index 000000000..19950ed3b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/dynamic-disable.vue
@@ -0,0 +1,37 @@
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/nested-form.vue b/examples/docs/resources/mobile-first/app/collapse/nested-form.vue
new file mode 100644
index 000000000..2a6cc90b6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/nested-form.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/nested-grid.vue b/examples/docs/resources/mobile-first/app/collapse/nested-grid.vue
new file mode 100644
index 000000000..618c7d1ba
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/nested-grid.vue
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/slot-icon.vue b/examples/docs/resources/mobile-first/app/collapse/slot-icon.vue
new file mode 100644
index 000000000..95ef23b11
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/slot-icon.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue b/examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue
new file mode 100644
index 000000000..9238a1395
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue
@@ -0,0 +1,39 @@
+
+
+
+
+ 一致性
+
+ Consistency
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+
+ 反馈 Feedback
+
+
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/collapse/slot-title.vue b/examples/docs/resources/mobile-first/app/collapse/slot-title.vue
new file mode 100644
index 000000000..26afc8ad6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/collapse/slot-title.vue
@@ -0,0 +1,49 @@
+
+
+
+
+ 一致性 Consistency
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+
+ 反馈 Feedback
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+
+ 效率 Efficiency
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+
+ 点击标题不折叠,点击图标折叠
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue b/examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue
new file mode 100644
index 000000000..5b3aff023
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue
@@ -0,0 +1,141 @@
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+ 换算率: 55
+
+
+
+
+ 上架时间: 2023-01-31
+ 顺序号: 123456
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+ 换算率: 55
+
+
+
+
+ 上架时间: 2023-01-31
+ 顺序号: 123456
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/content-slot.vue b/examples/docs/resources/mobile-first/app/column-list-item/content-slot.vue
new file mode 100644
index 000000000..771b0ccd7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/content-slot.vue
@@ -0,0 +1,87 @@
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+ 换算率: 55
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+ 换算率: 55
+
+
+
+
+ 上架中
+ 上架时间: 2023-01-31
+ 顺序号: 123456
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue b/examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue
new file mode 100644
index 000000000..13f974c30
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+ 换算率: 55
+
+
+
+
+ 上架时间: 2023-01-31
+ 顺序号: 123456
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/icon-click-event.vue b/examples/docs/resources/mobile-first/app/column-list-item/icon-click-event.vue
new file mode 100644
index 000000000..dc3a6c8c2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/icon-click-event.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+ 换算率: 55
+
+
+
+
+ 上架时间: 2023-01-31
+ 顺序号: 123456
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/icon-disabled.vue b/examples/docs/resources/mobile-first/app/column-list-item/icon-disabled.vue
new file mode 100644
index 000000000..284380b59
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/icon-disabled.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+ 换算率: 55
+
+
+
+
+ 上架时间: 2023-01-31
+ 顺序号: 123456
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/image-operate-slot.vue b/examples/docs/resources/mobile-first/app/column-list-item/image-operate-slot.vue
new file mode 100644
index 000000000..f293a8e25
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/image-operate-slot.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+ 操作列
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/list-group.vue b/examples/docs/resources/mobile-first/app/column-list-item/list-group.vue
new file mode 100644
index 000000000..cd4968f22
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/list-group.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/show-checkbox.vue b/examples/docs/resources/mobile-first/app/column-list-item/show-checkbox.vue
new file mode 100644
index 000000000..38d01072a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/show-checkbox.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+ 智能手机智能手机
+ 品牌: 手机
+ 编码: HYFVFHJGG1354
+
+
+
+
+ 规格型号: 256G
+ 计量单位: 1
+ 尺寸: 6.5英寸
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/column-list-item/size.vue b/examples/docs/resources/mobile-first/app/column-list-item/size.vue
new file mode 100644
index 000000000..9c90dd7cb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/column-list-item/size.vue
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 最小包装数: 2
+ 参考价格: 8888.55
+
+
+
+
+ 上架时间: 2023-01-31
+ 顺序号: 123456
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue
new file mode 100644
index 000000000..a18312de9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue
@@ -0,0 +1,39 @@
+
+
+
日期选择器组件
+
值:{{ value }}
+
格式化值:{{ formatValue }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue
new file mode 100644
index 000000000..cea32ebe4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue
@@ -0,0 +1,41 @@
+
+
+
日期选择器组件
+
值:{{ value }}
+
格式化值:{{ formatValue }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue
new file mode 100644
index 000000000..cdcfd4f40
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue
@@ -0,0 +1,49 @@
+
+
+
日期选择器组件
+
值:{{ value }}
+
格式化值:{{ formatValue }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue
new file mode 100644
index 000000000..70fc0eb09
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue
@@ -0,0 +1,48 @@
+
+
+
日期时间选择器
+
值:{{ value }}
+
格式化值:{{ formatValue }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/drawer/basic-usage.vue b/examples/docs/resources/mobile-first/app/drawer/basic-usage.vue
new file mode 100644
index 000000000..4c7ba866f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/basic-usage.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/app/drawer/dragable.vue b/examples/docs/resources/mobile-first/app/drawer/dragable.vue
new file mode 100644
index 000000000..faaed9cbc
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/dragable.vue
@@ -0,0 +1,33 @@
+
+
+
宽度拖拽
+
+
+ 抽屉宽度改为 700px
+ 抽屉宽度改为 80%
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/drawer/event.vue b/examples/docs/resources/mobile-first/app/drawer/event.vue
new file mode 100644
index 000000000..0f388e094
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/event.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/drawer/mask-event.vue b/examples/docs/resources/mobile-first/app/drawer/mask-event.vue
new file mode 100644
index 000000000..e188b2f0d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/mask-event.vue
@@ -0,0 +1,29 @@
+
+
+
单击遮罩层不关闭弹窗
+
+ 内容区域
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/drawer/mask.vue b/examples/docs/resources/mobile-first/app/drawer/mask.vue
new file mode 100644
index 000000000..dd74d5413
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/mask.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/drawer/placement.vue b/examples/docs/resources/mobile-first/app/drawer/placement.vue
new file mode 100644
index 000000000..90f9320c6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/placement.vue
@@ -0,0 +1,35 @@
+
+
+
left
+
right
+
top
+
bottom
+
+
+ 内容区域
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/drawer/show.vue b/examples/docs/resources/mobile-first/app/drawer/show.vue
new file mode 100644
index 000000000..d191e7dac
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/show.vue
@@ -0,0 +1,36 @@
+
+
+
默认属性配置
+
隐藏头部
+
显示底部
+
+
+ 内容区域
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/drawer/slot.vue b/examples/docs/resources/mobile-first/app/drawer/slot.vue
new file mode 100644
index 000000000..22690849a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/slot.vue
@@ -0,0 +1,32 @@
+
+
+
抽屉组件
+
+
+ 自定义关闭
+
+ 内容区域
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/app/drawer/width.vue b/examples/docs/resources/mobile-first/app/drawer/width.vue
new file mode 100644
index 000000000..9eae8afea
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/drawer/width.vue
@@ -0,0 +1,33 @@
+
+
+
抽屉组件
+
+
+ 抽屉宽度改为 700px
+ 抽屉宽度改为 80%
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue b/examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue
new file mode 100644
index 000000000..dabf88e97
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue
@@ -0,0 +1,25 @@
+
+
+ 更多
+
+
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue b/examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue
new file mode 100644
index 000000000..e1494dfcf
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue
@@ -0,0 +1,25 @@
+
+
+ 更多
+
+
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/border-size.vue b/examples/docs/resources/mobile-first/app/dropdown/border-size.vue
new file mode 100644
index 000000000..1f46f8ed4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/border-size.vue
@@ -0,0 +1,25 @@
+
+
+ 更多
+
+
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue b/examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue
new file mode 100644
index 000000000..935f50a42
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue
@@ -0,0 +1,23 @@
+
+
+ 标准按钮
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/button-size.vue b/examples/docs/resources/mobile-first/app/dropdown/button-size.vue
new file mode 100644
index 000000000..4d7deaaf5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/button-size.vue
@@ -0,0 +1,25 @@
+
+
+ 更多
+
+
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/button-type.vue b/examples/docs/resources/mobile-first/app/dropdown/button-type.vue
new file mode 100644
index 000000000..1258c7441
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/button-type.vue
@@ -0,0 +1,23 @@
+
+
+ 按钮类型
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/checked-status.vue b/examples/docs/resources/mobile-first/app/dropdown/checked-status.vue
new file mode 100644
index 000000000..9fb1a95a2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/checked-status.vue
@@ -0,0 +1,26 @@
+
+
+ 更多
+
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue b/examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue
new file mode 100644
index 000000000..c873e015d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue
@@ -0,0 +1,28 @@
+
+
+ 标准按钮
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue b/examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue
new file mode 100644
index 000000000..9587d2297
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue
@@ -0,0 +1,30 @@
+
+
+ 更多
+
+
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue b/examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue
new file mode 100644
index 000000000..5b9b2aefb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue
@@ -0,0 +1,33 @@
+
+
+ 更多
+
+
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/label-over.vue b/examples/docs/resources/mobile-first/app/dropdown/label-over.vue
new file mode 100644
index 000000000..ff2ac7a2a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/label-over.vue
@@ -0,0 +1,24 @@
+
+
+ 更多
+
+
+ 选择一选择一选择一选择一选择一选择一选择一选择一选择一
+ 选择二
+ 选择三选择三选择三选择三选择三选择三选择三选择三选择三
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue b/examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue
new file mode 100644
index 000000000..0cf4f43dd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/max-height.vue b/examples/docs/resources/mobile-first/app/dropdown/max-height.vue
new file mode 100644
index 000000000..b256af7fb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/max-height.vue
@@ -0,0 +1,51 @@
+
+
+ 更多
+
+
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+ 黄金糕
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+ 双皮奶
+ 蚵仔煎
+ 龙须面
+ 北京烤鸭
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue b/examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue
new file mode 100644
index 000000000..c7a95d2c1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue
@@ -0,0 +1,30 @@
+
+
+ 更多
+
+
+
+ 这是一级
+
+ 这是一级不可点击
+
+
+ 这是二级
+ 这是二级
+
+ 这是一级
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/pop-direction.vue b/examples/docs/resources/mobile-first/app/dropdown/pop-direction.vue
new file mode 100644
index 000000000..21b406e84
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/pop-direction.vue
@@ -0,0 +1,60 @@
+
+
+
+
+ 默认
+
+ 更多
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
+ 下居中
+
+ 更多
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
+ 下偏左
+
+ 更多
+
+
+ 选择一
+ 选择二
+ 选择三
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue b/examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue
new file mode 100644
index 000000000..3a2acd6f3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue
@@ -0,0 +1,85 @@
+
+
+
+
+ hover 激活
+
+ 更多
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+ click 激活
+
+ 更多
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+ 二级菜单 click 激活
+
+ 更多
+
+
+
+ 这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级
+ 这是一级不可点击
+
+ 这是二级
+ 这是二级
+
+ 这是一级
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/exception/button-text.vue b/examples/docs/resources/mobile-first/app/exception/button-text.vue
new file mode 100644
index 000000000..b861e117c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/exception/button-text.vue
@@ -0,0 +1,21 @@
+
+
+ 立即新建
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/exception/component-empty.vue b/examples/docs/resources/mobile-first/app/exception/component-empty.vue
new file mode 100644
index 000000000..8828d5f3f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/exception/component-empty.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/exception/message.vue b/examples/docs/resources/mobile-first/app/exception/message.vue
new file mode 100644
index 000000000..6a283b244
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/exception/message.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/exception/page-empty.vue b/examples/docs/resources/mobile-first/app/exception/page-empty.vue
new file mode 100644
index 000000000..dd5e7e0ff
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/exception/page-empty.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/exception/sub-message.vue b/examples/docs/resources/mobile-first/app/exception/sub-message.vue
new file mode 100644
index 000000000..081a167ea
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/exception/sub-message.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/form-clear-validate.vue b/examples/docs/resources/mobile-first/app/form/form-clear-validate.vue
new file mode 100644
index 000000000..95730ad97
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/form-clear-validate.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 移除表单校验
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/form-disabled.vue b/examples/docs/resources/mobile-first/app/form/form-disabled.vue
new file mode 100644
index 000000000..410567532
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/form-disabled.vue
@@ -0,0 +1,192 @@
+
+
+
+ 点击切换表单状态
+ {{
+ formDisabled ? '启用表单' : '禁用表单'
+ }}
+ disabled: {{ !!formDisabled }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 男
+
+
+
+ 复选框
+ 复选框2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 默认链接
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/form-display-only.vue b/examples/docs/resources/mobile-first/app/form/form-display-only.vue
new file mode 100644
index 000000000..f7dd79385
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/form-display-only.vue
@@ -0,0 +1,181 @@
+
+
+
+ display-only/{{ displayOnly }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 男
+
+
+
+
+ 备选项1
+ 备选项2
+
+
+
+ 复选框
+ 复选框2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/form-in-row.vue b/examples/docs/resources/mobile-first/app/form/form-in-row.vue
new file mode 100644
index 000000000..d5a18607f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/form-in-row.vue
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+ 男
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/form-item-tip.vue b/examples/docs/resources/mobile-first/app/form/form-item-tip.vue
new file mode 100644
index 000000000..2b3ca8906
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/form-item-tip.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+ 注册
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/form-validation.vue b/examples/docs/resources/mobile-first/app/form/form-validation.vue
new file mode 100644
index 000000000..ad6b77ebb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/form-validation.vue
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/frequently-used-form.vue b/examples/docs/resources/mobile-first/app/form/frequently-used-form.vue
new file mode 100644
index 000000000..9d4ee51ff
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/frequently-used-form.vue
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+ 男
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/no-validate-to-add.vue b/examples/docs/resources/mobile-first/app/form/no-validate-to-add.vue
new file mode 100644
index 000000000..ae0f815ec
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/no-validate-to-add.vue
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 立即创建
+ 重置
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/popper-options-bubbling.vue b/examples/docs/resources/mobile-first/app/form/popper-options-bubbling.vue
new file mode 100644
index 000000000..8c2886d61
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/popper-options-bubbling.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/size.vue b/examples/docs/resources/mobile-first/app/form/size.vue
new file mode 100644
index 000000000..0dcb938cc
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/size.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+
+
+ 男
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/slot-label.vue b/examples/docs/resources/mobile-first/app/form/slot-label.vue
new file mode 100644
index 000000000..5d6ed3b22
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/slot-label.vue
@@ -0,0 +1,103 @@
+
+
+
+
+ 必填
+
+
+
+ 日期
+
+
+
+ URL
+
+
+
+ 等级
+
+
+
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/switch-from-item.vue b/examples/docs/resources/mobile-first/app/form/switch-from-item.vue
new file mode 100644
index 000000000..9891476c7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/switch-from-item.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/validate-debounce.vue b/examples/docs/resources/mobile-first/app/form/validate-debounce.vue
new file mode 100644
index 000000000..a2c6175c0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/validate-debounce.vue
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+ 移除表单校验
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/validate-type.vue b/examples/docs/resources/mobile-first/app/form/validate-type.vue
new file mode 100644
index 000000000..b5701a4a9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/validate-type.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/form/validation-position.vue b/examples/docs/resources/mobile-first/app/form/validation-position.vue
new file mode 100644
index 000000000..98aaad071
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/form/validation-position.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/grid/basicUsage-conf.vue b/examples/docs/resources/mobile-first/app/grid/basicUsage-conf.vue
new file mode 100644
index 000000000..644b2cbd0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/grid/basicUsage-conf.vue
@@ -0,0 +1,127 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/grid/basicUsage.vue b/examples/docs/resources/mobile-first/app/grid/basicUsage.vue
new file mode 100644
index 000000000..649562222
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/grid/basicUsage.vue
@@ -0,0 +1,179 @@
+
+
+
+ 表格视图
+ 卡片视图
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/grid/column-anchor.vue b/examples/docs/resources/mobile-first/app/grid/column-anchor.vue
new file mode 100644
index 000000000..deac44b4f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/grid/column-anchor.vue
@@ -0,0 +1,144 @@
+
+
+
+ 表格视图
+ 卡片视图
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/grid/operation-column.vue b/examples/docs/resources/mobile-first/app/grid/operation-column.vue
new file mode 100644
index 000000000..9c7135a10
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/grid/operation-column.vue
@@ -0,0 +1,83 @@
+
+
+
+ 表格视图
+ 卡片视图
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/grid/toolbar-custom-teleport.vue b/examples/docs/resources/mobile-first/app/grid/toolbar-custom-teleport.vue
new file mode 100644
index 000000000..8dd6d7dab
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/grid/toolbar-custom-teleport.vue
@@ -0,0 +1,94 @@
+
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/image/auto-fit-container-size.vue b/examples/docs/resources/mobile-first/app/image/auto-fit-container-size.vue
new file mode 100644
index 000000000..6874e5a1a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/image/auto-fit-container-size.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/image/basic-usage.vue b/examples/docs/resources/mobile-first/app/image/basic-usage.vue
new file mode 100644
index 000000000..6560be34d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/image/basic-usage.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/image/preview-src-list.vue b/examples/docs/resources/mobile-first/app/image/preview-src-list.vue
new file mode 100644
index 000000000..e931e1c21
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/image/preview-src-list.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/image/show-hover.vue b/examples/docs/resources/mobile-first/app/image/show-hover.vue
new file mode 100644
index 000000000..68cf6daef
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/image/show-hover.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/autocomplete.vue b/examples/docs/resources/mobile-first/app/input/autocomplete.vue
new file mode 100644
index 000000000..903027123
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/autocomplete.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/autofocus.vue b/examples/docs/resources/mobile-first/app/input/autofocus.vue
new file mode 100644
index 000000000..e2d8b51c0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/autofocus.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/autosize.vue b/examples/docs/resources/mobile-first/app/input/autosize.vue
new file mode 100644
index 000000000..2ebb67124
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/autosize.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/basic-usage.vue b/examples/docs/resources/mobile-first/app/input/basic-usage.vue
new file mode 100644
index 000000000..ae4767dd6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/basic-usage.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/clearable.vue b/examples/docs/resources/mobile-first/app/input/clearable.vue
new file mode 100644
index 000000000..974d706f6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/clearable.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/cols.vue b/examples/docs/resources/mobile-first/app/input/cols.vue
new file mode 100644
index 000000000..f832586e9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/cols.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/counter.vue b/examples/docs/resources/mobile-first/app/input/counter.vue
new file mode 100644
index 000000000..b19b35bea
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/counter.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/disabled.vue b/examples/docs/resources/mobile-first/app/input/disabled.vue
new file mode 100644
index 000000000..85105edae
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/disabled.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/event-blur.vue b/examples/docs/resources/mobile-first/app/input/event-blur.vue
new file mode 100644
index 000000000..e8a49bb69
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/event-blur.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/event-change.vue b/examples/docs/resources/mobile-first/app/input/event-change.vue
new file mode 100644
index 000000000..f02a4808e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/event-change.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/event-clear.vue b/examples/docs/resources/mobile-first/app/input/event-clear.vue
new file mode 100644
index 000000000..b7d570166
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/event-clear.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/event-focus.vue b/examples/docs/resources/mobile-first/app/input/event-focus.vue
new file mode 100644
index 000000000..7880d815d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/event-focus.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/event-input.vue b/examples/docs/resources/mobile-first/app/input/event-input.vue
new file mode 100644
index 000000000..125ff0ae6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/event-input.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/form.vue b/examples/docs/resources/mobile-first/app/input/form.vue
new file mode 100644
index 000000000..e264a03c7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/form.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/label.vue b/examples/docs/resources/mobile-first/app/input/label.vue
new file mode 100644
index 000000000..105107e21
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/label.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/max.vue b/examples/docs/resources/mobile-first/app/input/max.vue
new file mode 100644
index 000000000..6ce5bdd7b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/max.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/maxlength.vue b/examples/docs/resources/mobile-first/app/input/maxlength.vue
new file mode 100644
index 000000000..0b81d899c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/maxlength.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/method-addMemory.vue b/examples/docs/resources/mobile-first/app/input/method-addMemory.vue
new file mode 100644
index 000000000..45ace489d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/method-addMemory.vue
@@ -0,0 +1,37 @@
+
+
+
input:{{ input }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/method-blur.vue b/examples/docs/resources/mobile-first/app/input/method-blur.vue
new file mode 100644
index 000000000..e941fe673
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/method-blur.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/method-focus.vue b/examples/docs/resources/mobile-first/app/input/method-focus.vue
new file mode 100644
index 000000000..d1bea664f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/method-focus.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+ 输入框获取焦点
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/method-select.vue b/examples/docs/resources/mobile-first/app/input/method-select.vue
new file mode 100644
index 000000000..9d84efb68
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/method-select.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+ 选中输入框内容
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/min.vue b/examples/docs/resources/mobile-first/app/input/min.vue
new file mode 100644
index 000000000..72719776f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/min.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/name.vue b/examples/docs/resources/mobile-first/app/input/name.vue
new file mode 100644
index 000000000..e99035a2d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/name.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/placeholder.vue b/examples/docs/resources/mobile-first/app/input/placeholder.vue
new file mode 100644
index 000000000..dad7eb89b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/placeholder.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/prefix-icon.vue b/examples/docs/resources/mobile-first/app/input/prefix-icon.vue
new file mode 100644
index 000000000..45c059607
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/prefix-icon.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/readonly.vue b/examples/docs/resources/mobile-first/app/input/readonly.vue
new file mode 100644
index 000000000..19fb5fe57
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/readonly.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/resize.vue b/examples/docs/resources/mobile-first/app/input/resize.vue
new file mode 100644
index 000000000..af0819e67
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/resize.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/rows.vue b/examples/docs/resources/mobile-first/app/input/rows.vue
new file mode 100644
index 000000000..3d1681b2a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/rows.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/show-password.vue b/examples/docs/resources/mobile-first/app/input/show-password.vue
new file mode 100644
index 000000000..93f871916
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/show-password.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/show-word-limit.vue b/examples/docs/resources/mobile-first/app/input/show-word-limit.vue
new file mode 100644
index 000000000..cc6722e7a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/show-word-limit.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/size.vue b/examples/docs/resources/mobile-first/app/input/size.vue
new file mode 100644
index 000000000..eb0b58c96
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/size.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/slot-append.vue b/examples/docs/resources/mobile-first/app/input/slot-append.vue
new file mode 100644
index 000000000..31c213043
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/slot-append.vue
@@ -0,0 +1,28 @@
+
+
+
+ .com
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/slot-prefix.vue b/examples/docs/resources/mobile-first/app/input/slot-prefix.vue
new file mode 100644
index 000000000..29a52de6d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/slot-prefix.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/slot-prepend.vue b/examples/docs/resources/mobile-first/app/input/slot-prepend.vue
new file mode 100644
index 000000000..1e8a5088c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/slot-prepend.vue
@@ -0,0 +1,28 @@
+
+
+
+ Http://
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/slot-suffix.vue b/examples/docs/resources/mobile-first/app/input/slot-suffix.vue
new file mode 100644
index 000000000..45d8f368a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/slot-suffix.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/step.vue b/examples/docs/resources/mobile-first/app/input/step.vue
new file mode 100644
index 000000000..0ea10e120
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/step.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/suffix-icon.vue b/examples/docs/resources/mobile-first/app/input/suffix-icon.vue
new file mode 100644
index 000000000..04b1c4db0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/suffix-icon.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/tabindex.vue b/examples/docs/resources/mobile-first/app/input/tabindex.vue
new file mode 100644
index 000000000..108364a25
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/tabindex.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/type.vue b/examples/docs/resources/mobile-first/app/input/type.vue
new file mode 100644
index 000000000..17358115b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/type.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/input/validate-event.vue b/examples/docs/resources/mobile-first/app/input/validate-event.vue
new file mode 100644
index 000000000..09194f9d3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/input/validate-event.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/background.vue b/examples/docs/resources/mobile-first/app/loading/background.vue
new file mode 100644
index 000000000..d39253309
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/background.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/basic-usage.vue b/examples/docs/resources/mobile-first/app/loading/basic-usage.vue
new file mode 100644
index 000000000..6970d203a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/basic-usage.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/body.vue b/examples/docs/resources/mobile-first/app/loading/body.vue
new file mode 100644
index 000000000..b0387082a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/body.vue
@@ -0,0 +1,46 @@
+
+
+
设置v-loading.body的值为true
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/custom-class.vue b/examples/docs/resources/mobile-first/app/loading/custom-class.vue
new file mode 100644
index 000000000..b1b820550
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/custom-class.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/fullscreen.vue b/examples/docs/resources/mobile-first/app/loading/fullscreen.vue
new file mode 100644
index 000000000..164cebda2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/fullscreen.vue
@@ -0,0 +1,44 @@
+
+
+
+ 指令方式加载全屏Loading
+
+ 静态方法加载全屏Loading
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/loading-size.vue b/examples/docs/resources/mobile-first/app/loading/loading-size.vue
new file mode 100644
index 000000000..d8dcea6ad
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/loading-size.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/loading-tip-text.vue b/examples/docs/resources/mobile-first/app/loading/loading-tip-text.vue
new file mode 100644
index 000000000..60a7b45d5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/loading-tip-text.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/spinner.vue b/examples/docs/resources/mobile-first/app/loading/spinner.vue
new file mode 100644
index 000000000..d0cd1bde4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/spinner.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/loading/target.vue b/examples/docs/resources/mobile-first/app/loading/target.vue
new file mode 100644
index 000000000..84ad671ce
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/loading/target.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/message/base.vue b/examples/docs/resources/mobile-first/app/message/base.vue
new file mode 100644
index 000000000..f4acf8f7a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/message/base.vue
@@ -0,0 +1,20 @@
+
+
+ message 提示框
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/message/duration.vue b/examples/docs/resources/mobile-first/app/message/duration.vue
new file mode 100644
index 000000000..41bb28335
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/message/duration.vue
@@ -0,0 +1,36 @@
+
+
+ 默认3000ms后自动关闭提示框
+ 500ms后自动关闭提示框
+ 5000ms后自动关闭提示框
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/message/id.vue b/examples/docs/resources/mobile-first/app/message/id.vue
new file mode 100644
index 000000000..e50070f96
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/message/id.vue
@@ -0,0 +1,18 @@
+
+ 不允许重复点击
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/message/status.vue b/examples/docs/resources/mobile-first/app/message/status.vue
new file mode 100644
index 000000000..63ee66157
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/message/status.vue
@@ -0,0 +1,32 @@
+
+
+ 基本提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/base.vue b/examples/docs/resources/mobile-first/app/modal/base.vue
new file mode 100644
index 000000000..c643de9b8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/base.vue
@@ -0,0 +1,36 @@
+
+
+ 成功提示框
+ 失败提示框
+ 确认提示框
+ 警告提示框
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/before-close.vue b/examples/docs/resources/mobile-first/app/modal/before-close.vue
new file mode 100644
index 000000000..05f21e0f6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/before-close.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
点击打开 Modal 弹窗
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/cancel-event.vue b/examples/docs/resources/mobile-first/app/modal/cancel-event.vue
new file mode 100644
index 000000000..7a085652b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/cancel-event.vue
@@ -0,0 +1,31 @@
+
+
+
点击取消按钮时触发事件
+
+
+ test
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/close-event.vue b/examples/docs/resources/mobile-first/app/modal/close-event.vue
new file mode 100644
index 000000000..e223ff32a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/close-event.vue
@@ -0,0 +1,31 @@
+
+
+
点击关闭按钮时触发事件
+
+
+ test
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/confirm-event.vue b/examples/docs/resources/mobile-first/app/modal/confirm-event.vue
new file mode 100644
index 000000000..b04955487
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/confirm-event.vue
@@ -0,0 +1,31 @@
+
+
+
点击确定按钮触发事件
+
+
+ test
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/div-button-content.vue b/examples/docs/resources/mobile-first/app/modal/div-button-content.vue
new file mode 100644
index 000000000..774c857a9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/div-button-content.vue
@@ -0,0 +1,33 @@
+
+
+ 基本提示框
+ 成功提示框
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/duration.vue b/examples/docs/resources/mobile-first/app/modal/duration.vue
new file mode 100644
index 000000000..a5e006bda
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/duration.vue
@@ -0,0 +1,36 @@
+
+
+ 默认3000ms后自动关闭提示框
+ 500ms后自动关闭提示框
+ 5000ms后自动关闭提示框
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/esc-closable.vue b/examples/docs/resources/mobile-first/app/modal/esc-closable.vue
new file mode 100644
index 000000000..c1447490c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/esc-closable.vue
@@ -0,0 +1,18 @@
+
+ 按 Esc 键可以关闭弹出框
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/footer-slot.vue b/examples/docs/resources/mobile-first/app/modal/footer-slot.vue
new file mode 100644
index 000000000..352376169
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/footer-slot.vue
@@ -0,0 +1,26 @@
+
+
+ 自定义底部
+
+
+ 自定义底部信息
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/fullscreen.vue b/examples/docs/resources/mobile-first/app/modal/fullscreen.vue
new file mode 100644
index 000000000..6a505d879
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/fullscreen.vue
@@ -0,0 +1,18 @@
+
+ 最大化显示
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/grid.vue b/examples/docs/resources/mobile-first/app/modal/grid.vue
new file mode 100644
index 000000000..26bdf5c7c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/grid.vue
@@ -0,0 +1,59 @@
+
+
+
默认插槽
+
+
+ test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/hide-event.vue b/examples/docs/resources/mobile-first/app/modal/hide-event.vue
new file mode 100644
index 000000000..162dee51c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/hide-event.vue
@@ -0,0 +1,31 @@
+
+
+
在窗口关闭时会触发事件
+
+
+ test
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/id.vue b/examples/docs/resources/mobile-first/app/modal/id.vue
new file mode 100644
index 000000000..7c1cff617
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/id.vue
@@ -0,0 +1,18 @@
+
+ 不允许重复点击
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/lock-scroll.vue b/examples/docs/resources/mobile-first/app/modal/lock-scroll.vue
new file mode 100644
index 000000000..9921a341a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/lock-scroll.vue
@@ -0,0 +1,22 @@
+
+ 不锁住滚动条不要遮罩层
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/lock-view.vue b/examples/docs/resources/mobile-first/app/modal/lock-view.vue
new file mode 100644
index 000000000..31d88f37d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/lock-view.vue
@@ -0,0 +1,22 @@
+
+ 不锁界面不要遮罩层
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/mask-closable.vue b/examples/docs/resources/mobile-first/app/modal/mask-closable.vue
new file mode 100644
index 000000000..41f708f3d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/mask-closable.vue
@@ -0,0 +1,18 @@
+
+ 点击遮罩层可以关闭
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/message-jsx.vue b/examples/docs/resources/mobile-first/app/modal/message-jsx.vue
new file mode 100644
index 000000000..0b27edbf0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/message-jsx.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+
点击打开 Modal 弹窗
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/message.vue b/examples/docs/resources/mobile-first/app/modal/message.vue
new file mode 100644
index 000000000..bcf1371e4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/message.vue
@@ -0,0 +1,18 @@
+
+ 自定义提示框的内容
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/min-height.vue b/examples/docs/resources/mobile-first/app/modal/min-height.vue
new file mode 100644
index 000000000..77026a6f4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/min-height.vue
@@ -0,0 +1,22 @@
+
+ 提示框最小高度为300
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/min-width.vue b/examples/docs/resources/mobile-first/app/modal/min-width.vue
new file mode 100644
index 000000000..9f3da5ff4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/min-width.vue
@@ -0,0 +1,22 @@
+
+ 提示框最小宽度为700
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/resize.vue b/examples/docs/resources/mobile-first/app/modal/resize.vue
new file mode 100644
index 000000000..127e355ae
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/resize.vue
@@ -0,0 +1,23 @@
+
+ 可以拖动调整窗口大小
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/show-event.vue b/examples/docs/resources/mobile-first/app/modal/show-event.vue
new file mode 100644
index 000000000..b13bd1cbc
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/show-event.vue
@@ -0,0 +1,31 @@
+
+
+
在窗口显示时触发事件
+
+
+ test
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/showFooter.vue b/examples/docs/resources/mobile-first/app/modal/showFooter.vue
new file mode 100644
index 000000000..594e8da09
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/showFooter.vue
@@ -0,0 +1,18 @@
+
+ 不显示底部
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/showHeader.vue b/examples/docs/resources/mobile-first/app/modal/showHeader.vue
new file mode 100644
index 000000000..c420ceabf
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/showHeader.vue
@@ -0,0 +1,18 @@
+
+ 不显示头部
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/status.vue b/examples/docs/resources/mobile-first/app/modal/status.vue
new file mode 100644
index 000000000..5cd983a0c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/status.vue
@@ -0,0 +1,47 @@
+
+
+ 基本提示图标
+ 成功提示图标
+ 警告提示图标
+ 错误提示图标
+ 加载提示图标
+ status 为自定义组件
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/title.vue b/examples/docs/resources/mobile-first/app/modal/title.vue
new file mode 100644
index 000000000..a97f4aa3b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/title.vue
@@ -0,0 +1,18 @@
+
+ 自定义标题
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/type.vue b/examples/docs/resources/mobile-first/app/modal/type.vue
new file mode 100644
index 000000000..223bc28eb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/type.vue
@@ -0,0 +1,28 @@
+
+
+ alert 弹框
+ message 提示框
+ confirm 确认提示框
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/value.vue b/examples/docs/resources/mobile-first/app/modal/value.vue
new file mode 100644
index 000000000..9d1e3580f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/value.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/zIndex.vue b/examples/docs/resources/mobile-first/app/modal/zIndex.vue
new file mode 100644
index 000000000..f03864359
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/zIndex.vue
@@ -0,0 +1,18 @@
+
+ zIndex的值为500
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/modal/zoom-event.vue b/examples/docs/resources/mobile-first/app/modal/zoom-event.vue
new file mode 100644
index 000000000..180225e3a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/modal/zoom-event.vue
@@ -0,0 +1,31 @@
+
+
+
窗口缩放时触发事件
+
+
+ test
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/about-step.vue b/examples/docs/resources/mobile-first/app/numeric/about-step.vue
new file mode 100644
index 000000000..47115e578
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/about-step.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/basic-usage.vue b/examples/docs/resources/mobile-first/app/numeric/basic-usage.vue
new file mode 100644
index 000000000..be45bcd33
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/basic-usage.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/blur-event.vue b/examples/docs/resources/mobile-first/app/numeric/blur-event.vue
new file mode 100644
index 000000000..01338666f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/blur-event.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/change-event.vue b/examples/docs/resources/mobile-first/app/numeric/change-event.vue
new file mode 100644
index 000000000..c87e8a816
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/change-event.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/dynamic-disabled.vue b/examples/docs/resources/mobile-first/app/numeric/dynamic-disabled.vue
new file mode 100644
index 000000000..5778ee91c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/dynamic-disabled.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/focus-event.vue b/examples/docs/resources/mobile-first/app/numeric/focus-event.vue
new file mode 100644
index 000000000..78548e458
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/focus-event.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/max-min.vue b/examples/docs/resources/mobile-first/app/numeric/max-min.vue
new file mode 100644
index 000000000..55c1fd040
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/max-min.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/numeric-size.vue b/examples/docs/resources/mobile-first/app/numeric/numeric-size.vue
new file mode 100644
index 000000000..4c7306620
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/numeric-size.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/numeric/unit.vue b/examples/docs/resources/mobile-first/app/numeric/unit.vue
new file mode 100644
index 000000000..9126438d8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/numeric/unit.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/basic-usage.vue b/examples/docs/resources/mobile-first/app/pager/basic-usage.vue
new file mode 100644
index 000000000..95ef3891f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/basic-usage.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/before-page-change.vue b/examples/docs/resources/mobile-first/app/pager/before-page-change.vue
new file mode 100644
index 000000000..608bc03f4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/before-page-change.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/current-page.vue b/examples/docs/resources/mobile-first/app/pager/current-page.vue
new file mode 100644
index 000000000..321ea4c86
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/current-page.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/custom-layout.vue b/examples/docs/resources/mobile-first/app/pager/custom-layout.vue
new file mode 100644
index 000000000..0b7f09d55
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/custom-layout.vue
@@ -0,0 +1,17 @@
+
+
+
+ 我是插槽
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/custom-next-prev-text.vue b/examples/docs/resources/mobile-first/app/pager/custom-next-prev-text.vue
new file mode 100644
index 000000000..7c7337e86
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/custom-next-prev-text.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/hide-on-single-page.vue b/examples/docs/resources/mobile-first/app/pager/hide-on-single-page.vue
new file mode 100644
index 000000000..7bdf8c4d6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/hide-on-single-page.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/page-append-to-body.vue b/examples/docs/resources/mobile-first/app/pager/page-append-to-body.vue
new file mode 100644
index 000000000..472eb9232
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/page-append-to-body.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/page-count.vue b/examples/docs/resources/mobile-first/app/pager/page-count.vue
new file mode 100644
index 000000000..2def35b89
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/page-count.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/page-size.vue b/examples/docs/resources/mobile-first/app/pager/page-size.vue
new file mode 100644
index 000000000..3102b0c10
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/page-size.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-count.vue b/examples/docs/resources/mobile-first/app/pager/pager-count.vue
new file mode 100644
index 000000000..67d3324da
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-count.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-custom-total.vue b/examples/docs/resources/mobile-first/app/pager/pager-custom-total.vue
new file mode 100644
index 000000000..99f3581a1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-custom-total.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events-current-change.vue b/examples/docs/resources/mobile-first/app/pager/pager-events-current-change.vue
new file mode 100644
index 000000000..68c307e2f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-events-current-change.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events-nextclick.vue b/examples/docs/resources/mobile-first/app/pager/pager-events-nextclick.vue
new file mode 100644
index 000000000..bd0516e37
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-events-nextclick.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events-prev-click.vue b/examples/docs/resources/mobile-first/app/pager/pager-events-prev-click.vue
new file mode 100644
index 000000000..8b2c6814c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-events-prev-click.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-events.vue b/examples/docs/resources/mobile-first/app/pager/pager-events.vue
new file mode 100644
index 000000000..61f09048f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-events.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-in-grid.vue b/examples/docs/resources/mobile-first/app/pager/pager-in-grid.vue
new file mode 100644
index 000000000..0e739852c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-in-grid.vue
@@ -0,0 +1,417 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode-fixed.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode-fixed.vue
new file mode 100644
index 000000000..6a6e23c79
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-mode-fixed.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode-number.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode-number.vue
new file mode 100644
index 000000000..a5478bf4d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-mode-number.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode-simple.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode-simple.vue
new file mode 100644
index 000000000..cde1da631
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-mode-simple.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-mode.vue b/examples/docs/resources/mobile-first/app/pager/pager-mode.vue
new file mode 100644
index 000000000..d31abb37b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-mode.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/pager/pager-show-total-loading.vue b/examples/docs/resources/mobile-first/app/pager/pager-show-total-loading.vue
new file mode 100644
index 000000000..b185577b4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/pager/pager-show-total-loading.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popconfirm/basic-usage.vue b/examples/docs/resources/mobile-first/app/popconfirm/basic-usage.vue
new file mode 100644
index 000000000..2eeed1f14
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popconfirm/basic-usage.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ 悬浮我提示
+
+
+
+
+
+
+
+ 点击弹出,info 信息,右侧显示
+
+
+
+
+
+
+
+ 默认悬浮弹出,warning 警告,下面显示
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/arrow-offset.vue b/examples/docs/resources/mobile-first/app/popover/arrow-offset.vue
new file mode 100644
index 000000000..f64a4dfbe
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/arrow-offset.vue
@@ -0,0 +1,30 @@
+
+
+
+
+ 提示
+
+
+
+
+ 提示
+
+
+
+
+ 提示
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/basic-usage.vue b/examples/docs/resources/mobile-first/app/popover/basic-usage.vue
new file mode 100644
index 000000000..f26b864e7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/basic-usage.vue
@@ -0,0 +1,18 @@
+
+
+
+ 悬浮我提示
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/close-delay.vue b/examples/docs/resources/mobile-first/app/popover/close-delay.vue
new file mode 100644
index 000000000..6dbda665f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/close-delay.vue
@@ -0,0 +1,23 @@
+
+
+
+ 提示
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/custom-tip-text.vue b/examples/docs/resources/mobile-first/app/popover/custom-tip-text.vue
new file mode 100644
index 000000000..6139bf957
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/custom-tip-text.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+ 悬浮我触发
+
+
+
+
+
+ 这是一段内容,这是一段内容,这是一段内容,这是一段内容。
+
+ 悬浮我触发
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/popover/dynamic-disable.vue
new file mode 100644
index 000000000..ed279b843
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/dynamic-disable.vue
@@ -0,0 +1,26 @@
+
+
+ {{ popverDisable ? '启用' : '禁用' }}弹出框
+
+
+ 悬浮弹出
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/frame-offset.vue b/examples/docs/resources/mobile-first/app/popover/frame-offset.vue
new file mode 100644
index 000000000..d4b9ada55
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/frame-offset.vue
@@ -0,0 +1,30 @@
+
+
+
+
+ 提示0
+
+
+
+
+ 提示100
+
+
+
+
+ 提示200
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/hidden-arrow.vue b/examples/docs/resources/mobile-first/app/popover/hidden-arrow.vue
new file mode 100644
index 000000000..ea670cf09
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/hidden-arrow.vue
@@ -0,0 +1,25 @@
+
+
+
+
+ 有提示箭头
+
+
+
+
+ 无提示箭头
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/open-delay.vue b/examples/docs/resources/mobile-first/app/popover/open-delay.vue
new file mode 100644
index 000000000..28c11a367
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/open-delay.vue
@@ -0,0 +1,23 @@
+
+
+
+ 鼠标悬浮我两秒
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/popover-content.vue b/examples/docs/resources/mobile-first/app/popover/popover-content.vue
new file mode 100644
index 000000000..6cc0341e2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/popover-content.vue
@@ -0,0 +1,18 @@
+
+
+
+ 提示
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/popover-events.vue b/examples/docs/resources/mobile-first/app/popover/popover-events.vue
new file mode 100644
index 000000000..b508a451a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/popover-events.vue
@@ -0,0 +1,53 @@
+
+
+
+ 悬浮我触发
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/popover-placement.vue b/examples/docs/resources/mobile-first/app/popover/popover-placement.vue
new file mode 100644
index 000000000..cc64c6df1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/popover-placement.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+ 悬浮有提示
+
+
+
+
+
+
+ 悬浮有提示
+
+
+
+
+
+
+ 悬浮有提示
+
+
+
+
+
+
+ 悬浮有提示
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/popover-width.vue b/examples/docs/resources/mobile-first/app/popover/popover-width.vue
new file mode 100644
index 000000000..c7d19ad13
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/popover-width.vue
@@ -0,0 +1,22 @@
+
+
+
+ 悬浮我看效果
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/popper-class.vue b/examples/docs/resources/mobile-first/app/popover/popper-class.vue
new file mode 100644
index 000000000..553e4ed0e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/popper-class.vue
@@ -0,0 +1,30 @@
+
+
+
+
+ 单个class
+
+
+
+
+ 多个class
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/popper-options.vue b/examples/docs/resources/mobile-first/app/popover/popper-options.vue
new file mode 100644
index 000000000..61fd994db
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/popper-options.vue
@@ -0,0 +1,23 @@
+
+
+
+ 提示
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/trigger-mode.vue b/examples/docs/resources/mobile-first/app/popover/trigger-mode.vue
new file mode 100644
index 000000000..718eb17ab
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/trigger-mode.vue
@@ -0,0 +1,40 @@
+
+
+
+
+ hover 激活
+
+
+
+
+ click 激活
+
+
+
+
+ focus 激活
+
+
+
+
+ 手动激活
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/popover/trigger-reference.vue b/examples/docs/resources/mobile-first/app/popover/trigger-reference.vue
new file mode 100644
index 000000000..deef21278
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/popover/trigger-reference.vue
@@ -0,0 +1,18 @@
+
+
+
+ 触发源
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/basic-usage.vue b/examples/docs/resources/mobile-first/app/progress/basic-usage.vue
new file mode 100644
index 000000000..36add9de4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/basic-usage.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/custom-color.vue b/examples/docs/resources/mobile-first/app/progress/custom-color.vue
new file mode 100644
index 000000000..2a9828b0b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/custom-color.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/dynamic-control-changes.vue b/examples/docs/resources/mobile-first/app/progress/dynamic-control-changes.vue
new file mode 100644
index 000000000..ebe9a911c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/dynamic-control-changes.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/format-text.vue b/examples/docs/resources/mobile-first/app/progress/format-text.vue
new file mode 100644
index 000000000..86d841d63
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/format-text.vue
@@ -0,0 +1,35 @@
+
+
+
+
+ {{ testInside ? '外置' : '内置' }}文字
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/progress-size.vue b/examples/docs/resources/mobile-first/app/progress/progress-size.vue
new file mode 100644
index 000000000..194c1d281
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/progress-size.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/progress-status.vue b/examples/docs/resources/mobile-first/app/progress/progress-status.vue
new file mode 100644
index 000000000..1728286a2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/progress-status.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/progress-type-circle.vue b/examples/docs/resources/mobile-first/app/progress/progress-type-circle.vue
new file mode 100644
index 000000000..6eec89a27
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/progress-type-circle.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/progress-type.vue b/examples/docs/resources/mobile-first/app/progress/progress-type.vue
new file mode 100644
index 000000000..101a8510b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/progress-type.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/progress-width.vue b/examples/docs/resources/mobile-first/app/progress/progress-width.vue
new file mode 100644
index 000000000..bffba8c00
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/progress-width.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/progress/text-inside-or-no-text.vue b/examples/docs/resources/mobile-first/app/progress/text-inside-or-no-text.vue
new file mode 100644
index 000000000..9c95633d3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/progress/text-inside-or-no-text.vue
@@ -0,0 +1,27 @@
+
+
+
+
+ {{ showTest ? '隐藏' : '显示' }}文字
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio-block/basic-usage.vue b/examples/docs/resources/mobile-first/app/radio-block/basic-usage.vue
new file mode 100644
index 000000000..9f3282937
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio-block/basic-usage.vue
@@ -0,0 +1,29 @@
+
+
+
+ 日度
+
+
+ 月度
+
+
+ 年度
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio-block/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/radio-block/dynamic-disable.vue
new file mode 100644
index 000000000..90ac8c7db
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio-block/dynamic-disable.vue
@@ -0,0 +1,36 @@
+
+
+
+
+ 日度
+ 月度
+ 年度
+
+
+
+
+ 日度
+ 月度
+ 年度
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio-block/group-options.vue b/examples/docs/resources/mobile-first/app/radio-block/group-options.vue
new file mode 100644
index 000000000..40e30b1de
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio-block/group-options.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-button.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-button.vue
new file mode 100644
index 000000000..02a26de52
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio-block/radio-button.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-events.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-events.vue
new file mode 100644
index 000000000..5aa0b3fbe
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio-block/radio-events.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-size.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-size.vue
new file mode 100644
index 000000000..345125c4e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio-block/radio-size.vue
@@ -0,0 +1,34 @@
+
+
+
+ 近3月
+ 近6月
+ 近9月
+ 近12月
+
+
+
+ 近3月
+ 近6月
+ 近9月
+ 近12月
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio-block/radio-tips.vue b/examples/docs/resources/mobile-first/app/radio-block/radio-tips.vue
new file mode 100644
index 000000000..1cc71d0ae
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio-block/radio-tips.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/active-color.vue b/examples/docs/resources/mobile-first/app/radio/active-color.vue
new file mode 100644
index 000000000..ab546510d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/active-color.vue
@@ -0,0 +1,23 @@
+
+
+ 日度
+ 月度
+ 年度
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/basic-usage.vue b/examples/docs/resources/mobile-first/app/radio/basic-usage.vue
new file mode 100644
index 000000000..dd895ee12
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/basic-usage.vue
@@ -0,0 +1,23 @@
+
+
+
+ 选项一
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/radio/dynamic-disable.vue
new file mode 100644
index 000000000..10bf8ce1e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/dynamic-disable.vue
@@ -0,0 +1,41 @@
+
+
+
+ 选中禁用
+
+
+ 不选中禁用
+
+
+
+
+ 备选项1
+
+
+ 备选项2
+
+
+ 备选项3
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/group-options.vue b/examples/docs/resources/mobile-first/app/radio/group-options.vue
new file mode 100644
index 000000000..40e30b1de
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/group-options.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/radio-button.vue b/examples/docs/resources/mobile-first/app/radio/radio-button.vue
new file mode 100644
index 000000000..f8b90472f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/radio-button.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/radio-default.vue b/examples/docs/resources/mobile-first/app/radio/radio-default.vue
new file mode 100644
index 000000000..882170e73
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/radio-default.vue
@@ -0,0 +1,27 @@
+
+
+
+ 选项内容一
+ 选项描述
+
+
+ 选项内容二
+ 选项描述
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/radio-events.vue b/examples/docs/resources/mobile-first/app/radio/radio-events.vue
new file mode 100644
index 000000000..65987db7b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/radio-events.vue
@@ -0,0 +1,35 @@
+
+
+
+ 选项一
+
+
+ 选项二
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/radio-size.vue b/examples/docs/resources/mobile-first/app/radio/radio-size.vue
new file mode 100644
index 000000000..0b8585f2c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/radio-size.vue
@@ -0,0 +1,57 @@
+
+
+
+
+ 日度
+
+
+ 月度
+
+
+ 年度
+
+
+
+
+
+ 日度
+
+
+ 月度
+
+
+ 年度
+
+
+
+
+
+
+ 日度
+
+
+ 月度
+
+
+ 年度
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/radio-text.vue b/examples/docs/resources/mobile-first/app/radio/radio-text.vue
new file mode 100644
index 000000000..4f554f1cd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/radio-text.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/radio-value.vue b/examples/docs/resources/mobile-first/app/radio/radio-value.vue
new file mode 100644
index 000000000..c56f57b0b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/radio-value.vue
@@ -0,0 +1,29 @@
+
+
+
+ 选项一
+
+
+ 选项二
+
+
+ 选项三
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/read-only.vue b/examples/docs/resources/mobile-first/app/radio/read-only.vue
new file mode 100644
index 000000000..eae2303d7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/read-only.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/vertical.vue b/examples/docs/resources/mobile-first/app/radio/vertical.vue
new file mode 100644
index 000000000..a98ece199
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/vertical.vue
@@ -0,0 +1,34 @@
+
+
+
+ 备选项1
+
+
+ 备选项2
+
+
+ 备选项3
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/radio/with-border.vue b/examples/docs/resources/mobile-first/app/radio/with-border.vue
new file mode 100644
index 000000000..9ff193543
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/radio/with-border.vue
@@ -0,0 +1,28 @@
+
+
+
+ 日度
+
+
+ 月度
+
+
+ 年度
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/allow-half.vue b/examples/docs/resources/mobile-first/app/rate/allow-half.vue
new file mode 100644
index 000000000..87cc5bad6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/allow-half.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/basic-usage.vue b/examples/docs/resources/mobile-first/app/rate/basic-usage.vue
new file mode 100644
index 000000000..15da32337
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/basic-usage.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-colors.vue b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-colors.vue
new file mode 100644
index 000000000..cc67b8be3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-colors.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-icon.vue b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-icon.vue
new file mode 100644
index 000000000..c654054c0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/custom-3-threshold-icon.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-class.vue b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-class.vue
new file mode 100644
index 000000000..34a690854
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-class.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-color.vue b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-color.vue
new file mode 100644
index 000000000..808d5a97e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/disabled-not-selected-color.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/rate/dynamic-disable.vue
new file mode 100644
index 000000000..8af22c842
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/dynamic-disable.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/max-score.vue b/examples/docs/resources/mobile-first/app/rate/max-score.vue
new file mode 100644
index 000000000..495432505
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/max-score.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/not-selected-class.vue b/examples/docs/resources/mobile-first/app/rate/not-selected-class.vue
new file mode 100644
index 000000000..90e6e3ad9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/not-selected-class.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/not-selected-color.vue b/examples/docs/resources/mobile-first/app/rate/not-selected-color.vue
new file mode 100644
index 000000000..454cea8bb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/not-selected-color.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/radio-rate.vue b/examples/docs/resources/mobile-first/app/rate/radio-rate.vue
new file mode 100644
index 000000000..0d4f1252b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/radio-rate.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/rate-events.vue b/examples/docs/resources/mobile-first/app/rate/rate-events.vue
new file mode 100644
index 000000000..0ca1a362d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/rate-events.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/show-score.vue b/examples/docs/resources/mobile-first/app/rate/show-score.vue
new file mode 100644
index 000000000..410b9f360
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/show-score.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/size.vue b/examples/docs/resources/mobile-first/app/rate/size.vue
new file mode 100644
index 000000000..bd2b67da3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/size.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/text-on-bottom.vue b/examples/docs/resources/mobile-first/app/rate/text-on-bottom.vue
new file mode 100644
index 000000000..a7fd3bd6f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/text-on-bottom.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/texts-and-text-color.vue b/examples/docs/resources/mobile-first/app/rate/texts-and-text-color.vue
new file mode 100644
index 000000000..537483f36
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/texts-and-text-color.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/rate/threshold-value.vue b/examples/docs/resources/mobile-first/app/rate/threshold-value.vue
new file mode 100644
index 000000000..9535e7df3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/rate/threshold-value.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/record/basic-usage.vue b/examples/docs/resources/mobile-first/app/record/basic-usage.vue
new file mode 100644
index 000000000..1fd6f91b5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/record/basic-usage.vue
@@ -0,0 +1,32 @@
+
+
+
+ 打开录音
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/scrollbar/basic-usage.vue b/examples/docs/resources/mobile-first/app/scrollbar/basic-usage.vue
new file mode 100644
index 000000000..bec29eb33
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/scrollbar/basic-usage.vue
@@ -0,0 +1,30 @@
+
+
+
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
当内部元素大于外部元素宽高时,出现滚动条
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/scrollbar/horizon.vue b/examples/docs/resources/mobile-first/app/scrollbar/horizon.vue
new file mode 100644
index 000000000..104bd3f46
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/scrollbar/horizon.vue
@@ -0,0 +1,31 @@
+
+
+
+
+ 当内部元素大于外部元素宽高时,出现滚动条当内部元素大于外部元素宽高时,出现滚动条元素大于外部元素宽高时,出现滚动条
+
+
+ 当内部元素大于外部元素宽高时,出现滚动条当内部元素大于外部元素宽高时,出现滚动条元素大于外部元素宽高时,出现滚动条
+
+
+ 当内部元素大于外部元素宽高时,出现滚动条当内部元素大于外部元素宽高时,出现滚动条元素大于外部元素宽高时,出现滚动条
+
+
+ 当内部元素大于外部元素宽高时,出现滚动条当内部元素大于外部元素宽高时,出现滚动条元素大于外部元素宽高时,出现滚动条
+
+
+ 当内部元素大于外部元素宽高时,出现滚动条当内部元素大于外部元素宽高时,出现滚动条元素大于外部元素宽高时,出现滚动条
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/basic-usage.vue b/examples/docs/resources/mobile-first/app/search/basic-usage.vue
new file mode 100644
index 000000000..013f04d09
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/basic-usage.vue
@@ -0,0 +1,21 @@
+
+
+
+ {{ value }}
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/button-search.vue b/examples/docs/resources/mobile-first/app/search/button-search.vue
new file mode 100644
index 000000000..013f04d09
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/button-search.vue
@@ -0,0 +1,21 @@
+
+
+
+ {{ value }}
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/change-bg.vue b/examples/docs/resources/mobile-first/app/search/change-bg.vue
new file mode 100644
index 000000000..064d4648b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/change-bg.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/change-events.vue b/examples/docs/resources/mobile-first/app/search/change-events.vue
new file mode 100644
index 000000000..de5a08e20
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/change-events.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/clearable.vue b/examples/docs/resources/mobile-first/app/search/clearable.vue
new file mode 100644
index 000000000..da935df36
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/clearable.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/custom-search-types.vue b/examples/docs/resources/mobile-first/app/search/custom-search-types.vue
new file mode 100644
index 000000000..8b0bdbd6d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/custom-search-types.vue
@@ -0,0 +1,37 @@
+
+
+
+
+ {{ slotScope.slotScope.text }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/default-value.vue b/examples/docs/resources/mobile-first/app/search/default-value.vue
new file mode 100644
index 000000000..de056226c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/default-value.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/enter-search.vue b/examples/docs/resources/mobile-first/app/search/enter-search.vue
new file mode 100644
index 000000000..514956189
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/enter-search.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/mini-mode.vue b/examples/docs/resources/mobile-first/app/search/mini-mode.vue
new file mode 100644
index 000000000..6b42852f0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/mini-mode.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/search-events.vue b/examples/docs/resources/mobile-first/app/search/search-events.vue
new file mode 100644
index 000000000..d7802be4f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/search-events.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/search-types.vue b/examples/docs/resources/mobile-first/app/search/search-types.vue
new file mode 100644
index 000000000..ba8338fd5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/search-types.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/select-events.vue b/examples/docs/resources/mobile-first/app/search/select-events.vue
new file mode 100644
index 000000000..ae110d363
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/select-events.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/show-selected-types.vue b/examples/docs/resources/mobile-first/app/search/show-selected-types.vue
new file mode 100644
index 000000000..1dce17016
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/show-selected-types.vue
@@ -0,0 +1,37 @@
+
+
+
+
+ {{ data.slotScope.text }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/search/transparent-mode.vue b/examples/docs/resources/mobile-first/app/search/transparent-mode.vue
new file mode 100644
index 000000000..f2529d24f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/search/transparent-mode.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-mobile/basic-usage.vue b/examples/docs/resources/mobile-first/app/select-mobile/basic-usage.vue
new file mode 100644
index 000000000..cfe3ca156
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-mobile/basic-usage.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-mobile/ellipsis.vue b/examples/docs/resources/mobile-first/app/select-mobile/ellipsis.vue
new file mode 100644
index 000000000..8666d2787
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-mobile/ellipsis.vue
@@ -0,0 +1,63 @@
+
+
+
+
单选,值:{{ activeName1 }}
+
内容超出隐藏
+
内容超出显示
+
+
+
+
多选,值:{{ activeName2 }}
+
内容超出隐藏
+
内容超出显示
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-mobile/multiple.vue b/examples/docs/resources/mobile-first/app/select-mobile/multiple.vue
new file mode 100644
index 000000000..999a68649
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-mobile/multiple.vue
@@ -0,0 +1,75 @@
+
+
+
+
单选
+
值:{{ activeName1 }}
+
text 文本:{{ text1 }}
+
+
+
+
多选
+
值:{{ activeName2 }}
+
text 文本:{{ text2 }}
+
+
+
+
多选
+
值:{{ activeName3 }}
+
设置文本分隔符为 / text 文本:{{ text3 }}
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/basic-usage.vue b/examples/docs/resources/mobile-first/app/select-view/basic-usage.vue
new file mode 100644
index 000000000..852c9dc75
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/basic-usage.vue
@@ -0,0 +1,70 @@
+
+
+ 页面选择器 值:{{ value }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/field.vue b/examples/docs/resources/mobile-first/app/select-view/field.vue
new file mode 100644
index 000000000..c4674020c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/field.vue
@@ -0,0 +1,70 @@
+
+
+ 页面选择器 值:{{ value }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/infinit-scroll.vue b/examples/docs/resources/mobile-first/app/select-view/infinit-scroll.vue
new file mode 100644
index 000000000..e2b52ec48
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/infinit-scroll.vue
@@ -0,0 +1,124 @@
+
+
+
同步数据滚动
+
异步请求滚动
+
值:{{ value }}
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/multiple-required.vue b/examples/docs/resources/mobile-first/app/select-view/multiple-required.vue
new file mode 100644
index 000000000..1a6d8181f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/multiple-required.vue
@@ -0,0 +1,77 @@
+
+
+ 页面选择器 值:{{ value }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/multiple.vue b/examples/docs/resources/mobile-first/app/select-view/multiple.vue
new file mode 100644
index 000000000..7f77f0756
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/multiple.vue
@@ -0,0 +1,76 @@
+
+
+ 页面选择器 值:{{ value }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/required.vue b/examples/docs/resources/mobile-first/app/select-view/required.vue
new file mode 100644
index 000000000..da13213a3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/required.vue
@@ -0,0 +1,86 @@
+
+
+
页面选择器
+
选中值:{{ value }}
+
必选项: {{ requiredSelectedList }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/slot.vue b/examples/docs/resources/mobile-first/app/select-view/slot.vue
new file mode 100644
index 000000000..7f3d378eb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/slot.vue
@@ -0,0 +1,73 @@
+
+
+
页面选择器 值:{{ activeName }}
+
+
+
+
{{ item.userName }}
+
{{ item.employeeNumber }}
+
+ {{ item.dept }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/select-view/text.vue b/examples/docs/resources/mobile-first/app/select-view/text.vue
new file mode 100644
index 000000000..6f386ca6f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/select-view/text.vue
@@ -0,0 +1,80 @@
+
+
+
页面选择器
+
值:{{ value }}
+
文本分隔符设置为:/
+
文本:{{ text }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/selected-box/basic-usage.vue b/examples/docs/resources/mobile-first/app/selected-box/basic-usage.vue
new file mode 100644
index 000000000..beba7e87b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/selected-box/basic-usage.vue
@@ -0,0 +1,49 @@
+
+
+ 提交增加数据项
+ 提交减少数据项
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/selected-box/inverse.vue b/examples/docs/resources/mobile-first/app/selected-box/inverse.vue
new file mode 100644
index 000000000..87bbbdb75
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/selected-box/inverse.vue
@@ -0,0 +1,49 @@
+
+
+ 提交增加数据项
+ 提交减少数据项
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/selected-box/slots.vue b/examples/docs/resources/mobile-first/app/selected-box/slots.vue
new file mode 100644
index 000000000..58aa5b694
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/selected-box/slots.vue
@@ -0,0 +1,72 @@
+
+
+
提交增加数据项
+
提交减少数据项
+
+
+
+ {{ `已选中了${params.total}项` }}
+
+
+
+ 自定义按钮
+
+
+
+ 清空
+
+
+
+
+ {{ `id: ${option.id}, name: ${option.name}, dept: ${option.dept}` }}
+
+
+
+
+ 删除
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/about-step.vue b/examples/docs/resources/mobile-first/app/slider/about-step.vue
new file mode 100644
index 000000000..41a9b4a26
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/about-step.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/basic-usage.vue b/examples/docs/resources/mobile-first/app/slider/basic-usage.vue
new file mode 100644
index 000000000..51e57fe24
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/basic-usage.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/slider/dynamic-disable.vue
new file mode 100644
index 000000000..c89270fcc
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/dynamic-disable.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/format-tooltip.vue b/examples/docs/resources/mobile-first/app/slider/format-tooltip.vue
new file mode 100644
index 000000000..5798d477e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/format-tooltip.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/left-right-slot.vue b/examples/docs/resources/mobile-first/app/slider/left-right-slot.vue
new file mode 100644
index 000000000..6adead441
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/left-right-slot.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/max-min.vue b/examples/docs/resources/mobile-first/app/slider/max-min.vue
new file mode 100644
index 000000000..df8fb1e48
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/max-min.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/range-select.vue b/examples/docs/resources/mobile-first/app/slider/range-select.vue
new file mode 100644
index 000000000..dd671a7ab
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/range-select.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/show-graduate.vue b/examples/docs/resources/mobile-first/app/slider/show-graduate.vue
new file mode 100644
index 000000000..23cff5330
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/show-graduate.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/show-input.vue b/examples/docs/resources/mobile-first/app/slider/show-input.vue
new file mode 100644
index 000000000..7e7006734
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/show-input.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/show-label.vue b/examples/docs/resources/mobile-first/app/slider/show-label.vue
new file mode 100644
index 000000000..f0c2a9e96
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/show-label.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/show-tip.vue b/examples/docs/resources/mobile-first/app/slider/show-tip.vue
new file mode 100644
index 000000000..379df7a13
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/show-tip.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/slider-event-change.vue b/examples/docs/resources/mobile-first/app/slider/slider-event-change.vue
new file mode 100644
index 000000000..1ffff20b2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/slider-event-change.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/slider-event-start.vue b/examples/docs/resources/mobile-first/app/slider/slider-event-start.vue
new file mode 100644
index 000000000..ff71ff840
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/slider-event-start.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/slider-event-stop.vue b/examples/docs/resources/mobile-first/app/slider/slider-event-stop.vue
new file mode 100644
index 000000000..6f5fecbc7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/slider-event-stop.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/slider/slider-slot.vue b/examples/docs/resources/mobile-first/app/slider/slider-slot.vue
new file mode 100644
index 000000000..237973805
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/slider/slider-slot.vue
@@ -0,0 +1,24 @@
+
+
+
+
+ {{ slotScope.slotScope }}%
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/basic-usage.vue b/examples/docs/resources/mobile-first/app/standard-list-item/basic-usage.vue
new file mode 100644
index 000000000..e38050897
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/standard-list-item/basic-usage.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/content-slot.vue b/examples/docs/resources/mobile-first/app/standard-list-item/content-slot.vue
new file mode 100644
index 000000000..b24267de6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/standard-list-item/content-slot.vue
@@ -0,0 +1,48 @@
+
+
+
+ 内容区域插槽,可以自定义想展示的内容
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/icon-click-event.vue b/examples/docs/resources/mobile-first/app/standard-list-item/icon-click-event.vue
new file mode 100644
index 000000000..ee44e5c9a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/standard-list-item/icon-click-event.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/icon-disabled.vue b/examples/docs/resources/mobile-first/app/standard-list-item/icon-disabled.vue
new file mode 100644
index 000000000..8bc71dc8d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/standard-list-item/icon-disabled.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/image-operate-slot.vue b/examples/docs/resources/mobile-first/app/standard-list-item/image-operate-slot.vue
new file mode 100644
index 000000000..45ffb4759
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/standard-list-item/image-operate-slot.vue
@@ -0,0 +1,31 @@
+
+
+
+
+ 图片插槽
+
+
+ 操作栏插槽
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/standard-list-item/type.vue b/examples/docs/resources/mobile-first/app/standard-list-item/type.vue
new file mode 100644
index 000000000..6c8168c93
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/standard-list-item/type.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/advanced-flex.vue b/examples/docs/resources/mobile-first/app/steps/advanced-flex.vue
new file mode 100644
index 000000000..7b489ec8e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/advanced-flex.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/advanced-no-arrow.vue b/examples/docs/resources/mobile-first/app/steps/advanced-no-arrow.vue
new file mode 100644
index 000000000..70b389ae4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/advanced-no-arrow.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/advanced-steps.vue b/examples/docs/resources/mobile-first/app/steps/advanced-steps.vue
new file mode 100644
index 000000000..0ffc12285
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/advanced-steps.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/complicated.vue b/examples/docs/resources/mobile-first/app/steps/complicated.vue
new file mode 100644
index 000000000..5f2fec14d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/complicated.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
名称:{{ node.name }}
+
状态:{{ node.status }}
+
描述:{{ node.description }}
+
自定义字段4:{{ node.field4 }}
+
自定义字段5:{{ node.field5 }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/data-resource-saas.vue b/examples/docs/resources/mobile-first/app/steps/data-resource-saas.vue
new file mode 100644
index 000000000..9282ac0a4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/data-resource-saas.vue
@@ -0,0 +1,60 @@
+
+
+
横向单链型
+
+
+
+
+
+
+
+
垂直单链型
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/data-resource.vue b/examples/docs/resources/mobile-first/app/steps/data-resource.vue
new file mode 100644
index 000000000..f33ac4475
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/data-resource.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/duration.vue b/examples/docs/resources/mobile-first/app/steps/duration.vue
new file mode 100644
index 000000000..00ae32bb4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/duration.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/slot-bottom.vue b/examples/docs/resources/mobile-first/app/steps/slot-bottom.vue
new file mode 100644
index 000000000..ef319b05a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/slot-bottom.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
{{ node.date.split(' ')[0] }}
+
{{ node.date.split(' ')[1] }}
+
+ {{ node.description }}
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/slot-item.vue b/examples/docs/resources/mobile-first/app/steps/slot-item.vue
new file mode 100644
index 000000000..beb239a56
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/slot-item.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
序号:{{ index }}
+
名称:{{ node.name }}
+
状态:{{ node.status }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/slot.vue b/examples/docs/resources/mobile-first/app/steps/slot.vue
new file mode 100644
index 000000000..23fd5c479
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/slot.vue
@@ -0,0 +1,54 @@
+
+
+
+
+ {{ index > 1 ? 'SS' + (index + 1) : '插槽 ' + node.status }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/steps/vertical.vue b/examples/docs/resources/mobile-first/app/steps/vertical.vue
new file mode 100644
index 000000000..fcb092040
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/steps/vertical.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/basic-usage.vue b/examples/docs/resources/mobile-first/app/switch/basic-usage.vue
new file mode 100644
index 000000000..38e19f1fe
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/basic-usage.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/custom-open-close.vue b/examples/docs/resources/mobile-first/app/switch/custom-open-close.vue
new file mode 100644
index 000000000..10fe0f7bb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/custom-open-close.vue
@@ -0,0 +1,25 @@
+
+
+
+ 是
+
+
+ 否
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/custom-true-false-value.vue b/examples/docs/resources/mobile-first/app/switch/custom-true-false-value.vue
new file mode 100644
index 000000000..99eac25cf
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/custom-true-false-value.vue
@@ -0,0 +1,28 @@
+
+
+
+
+ 是
+
+
+ 否
+
+
+ 当前值:{{ value }}
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/switch/dynamic-disable.vue
new file mode 100644
index 000000000..836bf9b96
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/dynamic-disable.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/enent.vue b/examples/docs/resources/mobile-first/app/switch/enent.vue
new file mode 100644
index 000000000..68c8f76a7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/enent.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/icon-mode.vue b/examples/docs/resources/mobile-first/app/switch/icon-mode.vue
new file mode 100644
index 000000000..7900a791b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/icon-mode.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/loading-mode.vue b/examples/docs/resources/mobile-first/app/switch/loading-mode.vue
new file mode 100644
index 000000000..ad758db90
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/loading-mode.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/mini-mode.vue b/examples/docs/resources/mobile-first/app/switch/mini-mode.vue
new file mode 100644
index 000000000..9374b9dd6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/mini-mode.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/switch/word-mode.vue b/examples/docs/resources/mobile-first/app/switch/word-mode.vue
new file mode 100644
index 000000000..d5808707a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/switch/word-mode.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/align-center.vue b/examples/docs/resources/mobile-first/app/tabs/align-center.vue
new file mode 100644
index 000000000..728f2a794
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/align-center.vue
@@ -0,0 +1,24 @@
+
+
+
+ 页签一内容
+
+
+ 页签二内容
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/basic-usage.vue b/examples/docs/resources/mobile-first/app/tabs/basic-usage.vue
new file mode 100644
index 000000000..4a614cb19
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/basic-usage.vue
@@ -0,0 +1,32 @@
+
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+
+
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/before-leave.vue b/examples/docs/resources/mobile-first/app/tabs/before-leave.vue
new file mode 100644
index 000000000..a0ae91ee7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/before-leave.vue
@@ -0,0 +1,37 @@
+
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+
+
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/change-title.vue b/examples/docs/resources/mobile-first/app/tabs/change-title.vue
new file mode 100644
index 000000000..6f5f8a5c0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/change-title.vue
@@ -0,0 +1,40 @@
+
+
+
+ 改变标题
+
+
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+
+
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/custom-tab-content.vue b/examples/docs/resources/mobile-first/app/tabs/custom-tab-content.vue
new file mode 100644
index 000000000..0101f1d63
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/custom-tab-content.vue
@@ -0,0 +1,32 @@
+
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+
+
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/custom-tab-title.vue b/examples/docs/resources/mobile-first/app/tabs/custom-tab-title.vue
new file mode 100644
index 000000000..c0323c490
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/custom-tab-title.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ 表单组件
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+
+
+
+
+ 数据组件
+
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+
+
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/mobile-first.vue b/examples/docs/resources/mobile-first/app/tabs/mobile-first.vue
new file mode 100644
index 000000000..a3ab2fac5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/mobile-first.vue
@@ -0,0 +1,109 @@
+
+
+
+
+ title插槽-6
+
+
+
+
+
+
+
+
+
+
+
+ 操作1
+
+
+ 操作2
+
+
+ 操作3
+
+
+
+
+
+ 页签六内容
+
+
+ 页签七内容
+
+
+ 页签八内容
+
+
+ 页签九内容
+
+
+ 页签十内容
+
+
+ 页签十一内容
+
+
+ 页签十二内容
+
+
+ 页签十三内容
+
+
+ 页签十四内容
+
+
+ 页签十五内容
+
+
+ 页签十六内容
+
+
+ custom插槽-设置
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/position-bottom.vue b/examples/docs/resources/mobile-first/app/tabs/position-bottom.vue
new file mode 100644
index 000000000..eca01b9a5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/position-bottom.vue
@@ -0,0 +1,50 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/position-left.vue b/examples/docs/resources/mobile-first/app/tabs/position-left.vue
new file mode 100644
index 000000000..fa0527441
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/position-left.vue
@@ -0,0 +1,50 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/position-right.vue b/examples/docs/resources/mobile-first/app/tabs/position-right.vue
new file mode 100644
index 000000000..c305bcf32
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/position-right.vue
@@ -0,0 +1,50 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/position.vue b/examples/docs/resources/mobile-first/app/tabs/position.vue
new file mode 100644
index 000000000..094243d7d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/position.vue
@@ -0,0 +1,50 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/prevent-tab-switching.vue b/examples/docs/resources/mobile-first/app/tabs/prevent-tab-switching.vue
new file mode 100644
index 000000000..4247c9f8d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/prevent-tab-switching.vue
@@ -0,0 +1,37 @@
+
+
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+
+
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/show-different-grid-data.vue b/examples/docs/resources/mobile-first/app/tabs/show-different-grid-data.vue
new file mode 100644
index 000000000..3e647bb94
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/show-different-grid-data.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/show-echarts.vue b/examples/docs/resources/mobile-first/app/tabs/show-echarts.vue
new file mode 100644
index 000000000..7bfb22a73
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/show-echarts.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/stretch-wh.vue b/examples/docs/resources/mobile-first/app/tabs/stretch-wh.vue
new file mode 100644
index 000000000..23b393731
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/stretch-wh.vue
@@ -0,0 +1,28 @@
+
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tab-style-bordercard.vue b/examples/docs/resources/mobile-first/app/tabs/tab-style-bordercard.vue
new file mode 100644
index 000000000..c155b2300
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tab-style-bordercard.vue
@@ -0,0 +1,50 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tab-style-card.vue b/examples/docs/resources/mobile-first/app/tabs/tab-style-card.vue
new file mode 100644
index 000000000..77f168d64
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tab-style-card.vue
@@ -0,0 +1,50 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabdata-title.vue b/examples/docs/resources/mobile-first/app/tabs/tabdata-title.vue
new file mode 100644
index 000000000..c35e692a5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabdata-title.vue
@@ -0,0 +1,66 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-draggable.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-draggable.vue
new file mode 100644
index 000000000..02320826b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabs-draggable.vue
@@ -0,0 +1,67 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-add.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-add.vue
new file mode 100644
index 000000000..eb1b3a371
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-add.vue
@@ -0,0 +1,60 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-click.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-click.vue
new file mode 100644
index 000000000..4b3a8c6b6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-click.vue
@@ -0,0 +1,34 @@
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-close.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-close.vue
new file mode 100644
index 000000000..03911cb3c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-close.vue
@@ -0,0 +1,62 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-events-edit.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-events-edit.vue
new file mode 100644
index 000000000..d6df8efb3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabs-events-edit.vue
@@ -0,0 +1,57 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-size.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-size.vue
new file mode 100644
index 000000000..95bb31062
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabs-size.vue
@@ -0,0 +1,26 @@
+
+
+ 表单组件,具有与用户交互,并可完成数据采集功能的控件。
+
+ 数据组件,提供了非常强大数据表格功能,在Grid可以展示数据列表,可以对数据列表进行选择、编辑等
+
+ 导航组件,帮助网站访问者浏览站点的组件.
+ 业务组件,与业务紧密相关实现某种业务功能的组件集
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/tabs-tabs.vue b/examples/docs/resources/mobile-first/app/tabs/tabs-tabs.vue
new file mode 100644
index 000000000..fef4c2e93
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/tabs-tabs.vue
@@ -0,0 +1,62 @@
+
+
+
+ {{ item.content }}
+
+
+ 子tab1
+
+ 孙tab1
+ 孙tab2
+ 孙tab3
+
+
+ 子tab2
+ 子tab3
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tabs/with-add.vue b/examples/docs/resources/mobile-first/app/tabs/with-add.vue
new file mode 100644
index 000000000..329ffe3a0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tabs/with-add.vue
@@ -0,0 +1,48 @@
+
+
+
+ {{ item.content }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag-group/basic-usage.vue b/examples/docs/resources/mobile-first/app/tag-group/basic-usage.vue
new file mode 100644
index 000000000..6418301b3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag-group/basic-usage.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag-group/tag-group-effect.vue b/examples/docs/resources/mobile-first/app/tag-group/tag-group-effect.vue
new file mode 100644
index 000000000..1dad882ac
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag-group/tag-group-effect.vue
@@ -0,0 +1,38 @@
+
+
+ 深色标签
+
+
+
+ 浅色标签
+
+
+
+ 朴素标签
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag-group/tag-group-size.vue b/examples/docs/resources/mobile-first/app/tag-group/tag-group-size.vue
new file mode 100644
index 000000000..a41ce6a57
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag-group/tag-group-size.vue
@@ -0,0 +1,38 @@
+
+
+ 中等标签:medium
+
+
+
+ 小型标签:small
+
+
+
+ 超小标签:mini
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag-group/tag-group-type.vue b/examples/docs/resources/mobile-first/app/tag-group/tag-group-type.vue
new file mode 100644
index 000000000..6436b337b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag-group/tag-group-type.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/basic-usage.vue b/examples/docs/resources/mobile-first/app/tag/basic-usage.vue
new file mode 100644
index 000000000..0c58659f4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/basic-usage.vue
@@ -0,0 +1,13 @@
+
+ 标签
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/closeable.vue b/examples/docs/resources/mobile-first/app/tag/closeable.vue
new file mode 100644
index 000000000..16b7f341c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/closeable.vue
@@ -0,0 +1,40 @@
+
+
+
+ {{ tag.name }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/color3.vue b/examples/docs/resources/mobile-first/app/tag/color3.vue
new file mode 100644
index 000000000..0c921a778
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/color3.vue
@@ -0,0 +1,15 @@
+
+
+ 自定义背景色
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/colorful-tag.vue b/examples/docs/resources/mobile-first/app/tag/colorful-tag.vue
new file mode 100644
index 000000000..9bc9b4bc8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/colorful-tag.vue
@@ -0,0 +1,38 @@
+
+
+ 深色标签
+
+ {{ item.label }}
+
+
+ 浅色标签
+
+ {{ item.label }}
+
+
+ 朴素标签
+
+ {{ item.label }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/create.vue b/examples/docs/resources/mobile-first/app/tag/create.vue
new file mode 100644
index 000000000..8c57c64e3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/create.vue
@@ -0,0 +1,70 @@
+
+
+
+ {{ tag }}
+
+
+
+
+ 添加标签
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/effect.vue b/examples/docs/resources/mobile-first/app/tag/effect.vue
new file mode 100644
index 000000000..5f588cfdd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/effect.vue
@@ -0,0 +1,54 @@
+
+
+ 深色标签
+
+ {{ item.label }}
+
+
+ 浅色标签
+
+ {{ item.label }}
+
+
+ 朴素标签
+
+ {{ item.label }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/hit.vue b/examples/docs/resources/mobile-first/app/tag/hit.vue
new file mode 100644
index 000000000..0b055dac9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/hit.vue
@@ -0,0 +1,35 @@
+
+
+
+ 标签一
+
+
+ 标签二
+
+
+ 标签三
+
+
+ 标签四
+
+
+ 标签五
+
+
+ 标签六
+
+
+ 标签七
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/tag-event-click.vue b/examples/docs/resources/mobile-first/app/tag/tag-event-click.vue
new file mode 100644
index 000000000..9f22dc61e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/tag-event-click.vue
@@ -0,0 +1,40 @@
+
+
+
+ {{ tag.name }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/tag-event-close.vue b/examples/docs/resources/mobile-first/app/tag/tag-event-close.vue
new file mode 100644
index 000000000..442161e2a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/tag-event-close.vue
@@ -0,0 +1,41 @@
+
+
+
+ {{ tag.name }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/tag-selectable.vue b/examples/docs/resources/mobile-first/app/tag/tag-selectable.vue
new file mode 100644
index 000000000..56156065c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/tag-selectable.vue
@@ -0,0 +1,29 @@
+
+
+
+ {{ item.label }}
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tag/tag-size.vue b/examples/docs/resources/mobile-first/app/tag/tag-size.vue
new file mode 100644
index 000000000..82b71f837
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tag/tag-size.vue
@@ -0,0 +1,24 @@
+
+
+ 默认标签
+
+ 中等标签
+
+
+ 小型标签
+
+
+ 超小标签
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-line/auto-slot.vue b/examples/docs/resources/mobile-first/app/time-line/auto-slot.vue
new file mode 100644
index 000000000..4faf6c7ac
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-line/auto-slot.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+ {{ data.slotScope.title }}
+
+
+
+
+
+
+
+
+
+ {{ data1.slotScope.title }}
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-line/basic-usage.vue b/examples/docs/resources/mobile-first/app/time-line/basic-usage.vue
new file mode 100644
index 000000000..009b1de1b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-line/basic-usage.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-line/fold-time.vue b/examples/docs/resources/mobile-first/app/time-line/fold-time.vue
new file mode 100644
index 000000000..cf19e09a6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-line/fold-time.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-line/many-status.vue b/examples/docs/resources/mobile-first/app/time-line/many-status.vue
new file mode 100644
index 000000000..c06e86148
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-line/many-status.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-line/node-toset.vue b/examples/docs/resources/mobile-first/app/time-line/node-toset.vue
new file mode 100644
index 000000000..e07084ce0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-line/node-toset.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-line/single-status.vue b/examples/docs/resources/mobile-first/app/time-line/single-status.vue
new file mode 100644
index 000000000..c04b8e775
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-line/single-status.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-line/sub-field.vue b/examples/docs/resources/mobile-first/app/time-line/sub-field.vue
new file mode 100644
index 000000000..8831a88d9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-line/sub-field.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/time-picker-mobile/basic-usage.vue b/examples/docs/resources/mobile-first/app/time-picker-mobile/basic-usage.vue
new file mode 100644
index 000000000..89f29b3a4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/time-picker-mobile/basic-usage.vue
@@ -0,0 +1,43 @@
+
+
+
+ 时间选择器组件
+
+
值:{{ value }}
+
格式化值:{{ formatValue }}
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/basic-usage.vue b/examples/docs/resources/mobile-first/app/tooltip/basic-usage.vue
new file mode 100644
index 000000000..65ffb787c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/basic-usage.vue
@@ -0,0 +1,59 @@
+
+
+
+
+ 上左
+
+
+ 上边
+
+
+ 上右
+
+
+
+
+ 左上
+
+
+ 左边
+
+
+ 左下
+
+
+
+
+ 右上
+
+
+ 右边
+
+
+ 右下
+
+
+
+
+ 下左
+
+
+ 下边
+
+
+ 下右
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/content-pre.vue b/examples/docs/resources/mobile-first/app/tooltip/content-pre.vue
new file mode 100644
index 000000000..1560b45eb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/content-pre.vue
@@ -0,0 +1,28 @@
+
+
+
+ 文本预格式化
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/content-render.vue b/examples/docs/resources/mobile-first/app/tooltip/content-render.vue
new file mode 100644
index 000000000..cd2f3cdbd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/content-render.vue
@@ -0,0 +1,37 @@
+
+
+
+ 文本自定义渲染
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/dynamic-disable.vue b/examples/docs/resources/mobile-first/app/tooltip/dynamic-disable.vue
new file mode 100644
index 000000000..96b75d62f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/dynamic-disable.vue
@@ -0,0 +1,23 @@
+
+
+
+ 点击{{ disabled ? '开启' : '关闭' }} tooltip 功能
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/enterable.vue b/examples/docs/resources/mobile-first/app/tooltip/enterable.vue
new file mode 100644
index 000000000..7f8603a43
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/enterable.vue
@@ -0,0 +1,23 @@
+
+
+
+ 鼠标不能进入到 tooltip 中
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/manual-control-tip.vue b/examples/docs/resources/mobile-first/app/tooltip/manual-control-tip.vue
new file mode 100644
index 000000000..6db272793
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/manual-control-tip.vue
@@ -0,0 +1,33 @@
+
+
+
+ 手动控制tooltip的显示和隐藏
+
+
+
+ 手动控制模式
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/open-delay.vue b/examples/docs/resources/mobile-first/app/tooltip/open-delay.vue
new file mode 100644
index 000000000..937fc8e47
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/open-delay.vue
@@ -0,0 +1,28 @@
+
+
+
+
+ 延迟 2s 出现
+
+
+
+
+ 2s 后自动隐藏
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/popper-class.vue b/examples/docs/resources/mobile-first/app/tooltip/popper-class.vue
new file mode 100644
index 000000000..e5cc5b21b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/popper-class.vue
@@ -0,0 +1,23 @@
+
+
+
+ 为 Tooltip 的 popper 添加类名
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/popper-options-bubbling.vue b/examples/docs/resources/mobile-first/app/tooltip/popper-options-bubbling.vue
new file mode 100644
index 000000000..1498b3046
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/popper-options-bubbling.vue
@@ -0,0 +1,58 @@
+
+
+
+ 手动控制tooltip的显示和隐藏
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/popper-options.vue b/examples/docs/resources/mobile-first/app/tooltip/popper-options.vue
new file mode 100644
index 000000000..64dbcc59f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/popper-options.vue
@@ -0,0 +1,26 @@
+
+
+
+ popper-options配置
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/tabindex.vue b/examples/docs/resources/mobile-first/app/tooltip/tabindex.vue
new file mode 100644
index 000000000..d8ac3ed2b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/tabindex.vue
@@ -0,0 +1,16 @@
+
+
+ Tooltip 组件的 tabindex 为1
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/tooltip-content.vue b/examples/docs/resources/mobile-first/app/tooltip/tooltip-content.vue
new file mode 100644
index 000000000..7380c6a07
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/tooltip-content.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+ 通过 slot = "content" 自定义提示内容
+
+
+
+ 插槽的使用
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/tooltip-offset.vue b/examples/docs/resources/mobile-first/app/tooltip/tooltip-offset.vue
new file mode 100644
index 000000000..d2e5a2717
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/tooltip-offset.vue
@@ -0,0 +1,21 @@
+
+
+
+ 出现位置的偏移量
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/tooltip-theme.vue b/examples/docs/resources/mobile-first/app/tooltip/tooltip-theme.vue
new file mode 100644
index 000000000..c219b62e8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/tooltip-theme.vue
@@ -0,0 +1,21 @@
+
+
+
+ Dark
+
+
+ Light
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/visible-arrow.vue b/examples/docs/resources/mobile-first/app/tooltip/visible-arrow.vue
new file mode 100644
index 000000000..2e3021315
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/visible-arrow.vue
@@ -0,0 +1,23 @@
+
+
+
+ 不显示 Tooltip 箭头
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/tooltip/z-index.vue b/examples/docs/resources/mobile-first/app/tooltip/z-index.vue
new file mode 100644
index 000000000..22b067e10
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/tooltip/z-index.vue
@@ -0,0 +1,40 @@
+
+
+
+ {{ `点击${showTooltip ? '关闭' : '打开'}Tooltip` }}
+
+
+
+
+ Reference
+
+
+
+
+ Reference
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/user-head/basic-usage.vue b/examples/docs/resources/mobile-first/app/user-head/basic-usage.vue
new file mode 100644
index 000000000..8a5b6e5c8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/user-head/basic-usage.vue
@@ -0,0 +1,38 @@
+
+
+
+ 中文
+
+
+
+ 图标
+
+
+
+ 英文
+
+
+
+
+ 图片
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/user-head/user-head-group.vue b/examples/docs/resources/mobile-first/app/user-head/user-head-group.vue
new file mode 100644
index 000000000..42699e507
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/user-head/user-head-group.vue
@@ -0,0 +1,211 @@
+
+
+
+
+ 中文
+
+
+
+
+ 中文
+
+
+
+
+ 中文
+
+
+
+
+
+
+ 图标
+
+
+
+
+ 图标
+
+
+
+
+ 图标
+
+
+
+
+
+
+ 图片
+
+
+
+
+ 图片
+
+
+
+
+ 图片
+
+
+
+
+
+
+ 中文
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 图片
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/user-head/user-head-size.vue b/examples/docs/resources/mobile-first/app/user-head/user-head-size.vue
new file mode 100644
index 000000000..f30430dd2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/user-head/user-head-size.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/app/user-head/user-head-style.vue b/examples/docs/resources/mobile-first/app/user-head/user-head-style.vue
new file mode 100644
index 000000000..ccb9988d8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/app/user-head/user-head-style.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-mf.md b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-mf.md
new file mode 100644
index 000000000..ec88301f8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-mf.md
@@ -0,0 +1,54 @@
+
+
+### 基本用法
+
+
+
+### 操作列表模式
+
+设置 `type` 为 `action` 启用操作列表模式,设置 `title` 显示提示语。
+
+
+
+### 显示隐藏
+
+:::tip 显示隐藏说明
+
+- show-header: 显示头部,默认值为 true;
+- show-search: 显示头部搜索功能,默认值为 true;
+- show-footer: 显示底部,默认值为 false;
+ :::
+
+
+
+### 遮罩层
+
+添加 `mask` 属性可以关闭遮罩层,默认值为 `true` 。
+
+
+
+默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 `mask-closable` 为 `false` 后将禁用该功能,默认值为 `true` 。
+
+
+
+### 插槽
+
+:::tip 插槽说明
+
+- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效;
+- header-left: 头部左侧插槽,默认显示搜索功能;
+- header-right: 头部右侧插槽,默认显示关闭功能;
+- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效;
+ :::
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-slot.md b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-slot.md
new file mode 100644
index 000000000..21efac396
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/action-sheet/action-sheet-slot.md
@@ -0,0 +1,26 @@
+
+
+### 插槽
+
+:::tip 插槽说明
+
+- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效;
+- header-left: 头部左侧插槽,默认显示搜索功能;
+- header-right: 头部右侧插槽,默认显示关闭功能;
+- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效;
+ :::
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/action-sheet/basic-usage.md b/examples/docs/resources/mobile-first/md/action-sheet/basic-usage.md
new file mode 100644
index 000000000..d833de87f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/action-sheet/basic-usage.md
@@ -0,0 +1,52 @@
+
+
+### 基本用法
+
+
+
+### 操作列表模式
+
+设置 `type` 为 `action` 启用操作列表模式,设置 `title` 显示提示语。
+
+
+
+### 显示隐藏
+
+:::tip 显示隐藏说明
+
+- show-header: 显示头部,默认值为 true;
+- show-search: 显示头部搜索功能,默认值为 true;
+- show-footer: 显示底部,默认值为 false;
+ :::
+
+
+
+### 遮罩层
+
+添加 `mask` 属性可以关闭遮罩层,默认值为 `true` 。
+
+
+
+默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 `mask-closable` 为 `false` 后将禁用该功能,默认值为 `true` 。
+
+
+
+### 插槽
+
+:::tip 插槽说明
+
+- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效;
+- header-left: 头部左侧插槽,默认显示搜索功能;
+- header-right: 头部右侧插槽,默认显示关闭功能;
+- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效;
+ :::
+
+
diff --git a/examples/docs/resources/mobile-first/md/action-sheet/ellipsis.md b/examples/docs/resources/mobile-first/md/action-sheet/ellipsis.md
new file mode 100644
index 000000000..b83063445
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/action-sheet/ellipsis.md
@@ -0,0 +1,18 @@
+
+
+### 插槽
+
+添加属性 `ellipsis` 选项内容会超出隐藏。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/action-sheet/multiple.md b/examples/docs/resources/mobile-first/md/action-sheet/multiple.md
new file mode 100644
index 000000000..a09cd8b10
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/action-sheet/multiple.md
@@ -0,0 +1,18 @@
+
+
+### 插槽
+
+通过添加属性 `multiple`,开启多选功能。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/action-sheet/show.md b/examples/docs/resources/mobile-first/md/action-sheet/show.md
new file mode 100644
index 000000000..80175865f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/action-sheet/show.md
@@ -0,0 +1,24 @@
+
+
+### 插槽
+
+:::tip 显示隐藏说明
+
+- show-header: 显示头部,默认值为 true;
+- show-search: 显示头部搜索功能,默认值为 true;
+- show-footer: 显示底部,默认值为 false;
+ :::
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/action-sheet/slot.md b/examples/docs/resources/mobile-first/md/action-sheet/slot.md
new file mode 100644
index 000000000..29585b646
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/action-sheet/slot.md
@@ -0,0 +1,24 @@
+
+
+### 插槽
+
+:::tip 插槽说明
+- header: 头部插槽,默认显示头部,设置 show-header="true" 时有效;
+- header-left: 头部左侧插槽,默认显示搜索功能;
+- header-right: 头部右侧插槽,默认显示关闭功能;
+- footer: 头部插槽,默认隐藏底部,设置 show-footer="true" 时有效;
+:::
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/alert-close-event.md b/examples/docs/resources/mobile-first/md/alert/alert-close-event.md
new file mode 100644
index 000000000..5d49004a3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/alert-close-event.md
@@ -0,0 +1,18 @@
+
+
+### 关闭事件
+
+`close` 事件,关闭警告框时触发。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/alert-type.md b/examples/docs/resources/mobile-first/md/alert/alert-type.md
new file mode 100644
index 000000000..9feef3fe7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/alert-type.md
@@ -0,0 +1,18 @@
+
+
+### 类型
+
+通过 `type` 设置不同的类型。可选值:success、warning、info、error,默认值:info 。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/align-center.md b/examples/docs/resources/mobile-first/md/alert/align-center.md
new file mode 100644
index 000000000..63e9202b4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/align-center.md
@@ -0,0 +1,18 @@
+
+
+### 文字居中
+
+通过 `center` 属性可使文字显示居中。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/basic-usage.md b/examples/docs/resources/mobile-first/md/alert/basic-usage.md
new file mode 100644
index 000000000..ed3ffcebc
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/basic-usage.md
@@ -0,0 +1,18 @@
+
+
+### 基本用法
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/custom-alert-icon.md b/examples/docs/resources/mobile-first/md/alert/custom-alert-icon.md
new file mode 100644
index 000000000..976062f7f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/custom-alert-icon.md
@@ -0,0 +1,18 @@
+
+
+### 自定义警告图标
+
+通过 `icon` 属性自定义图标。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/custom-close-text.md b/examples/docs/resources/mobile-first/md/alert/custom-close-text.md
new file mode 100644
index 000000000..d646225f3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/custom-close-text.md
@@ -0,0 +1,18 @@
+
+
+### 自定义关闭按钮文本
+
+通过属性 `close-text` 自定义关闭按钮文本。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/custom-description.md b/examples/docs/resources/mobile-first/md/alert/custom-description.md
new file mode 100644
index 000000000..6955f01f3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/custom-description.md
@@ -0,0 +1,18 @@
+
+
+### 自定义提示内容
+
+可通过 `description` 属性或插槽设置自定义提示内容。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/custom-title.md b/examples/docs/resources/mobile-first/md/alert/custom-title.md
new file mode 100644
index 000000000..78bf191e5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/custom-title.md
@@ -0,0 +1,18 @@
+
+
+### 自定义标题
+
+当 `size` 为 large 时显示标题,可设置 `title` 或 `slot` 自定义标题。默认标题根据设置的 `type` 显示。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/feedback-of-result.md b/examples/docs/resources/mobile-first/md/alert/feedback-of-result.md
new file mode 100644
index 000000000..f834822b4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/feedback-of-result.md
@@ -0,0 +1,18 @@
+
+
+### 表单提交结果反馈
+
+当 `size` 为 large 时,属性 `description` 和默认插槽结合使用,可渲染提交反馈界面。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/interactive-operation.md b/examples/docs/resources/mobile-first/md/alert/interactive-operation.md
new file mode 100644
index 000000000..a42d418b3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/interactive-operation.md
@@ -0,0 +1,18 @@
+
+
+### 自定义交互操作
+
+当 `size` 为 large 时,设置默认插槽自定义交互操作。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/large-size.md b/examples/docs/resources/mobile-first/md/alert/large-size.md
new file mode 100644
index 000000000..ddf81af7b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/large-size.md
@@ -0,0 +1,18 @@
+
+
+### 大尺寸
+
+通过 `size` 属性设置不同的尺寸,可选值:nomal、large,默认值:nomal 。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/not-closable.md b/examples/docs/resources/mobile-first/md/alert/not-closable.md
new file mode 100644
index 000000000..17209e05d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/not-closable.md
@@ -0,0 +1,18 @@
+
+
+### 不可关闭
+
+通过 `closable` 属性可设置是否显示关闭按钮,没有关闭按钮,警告框将不可关闭。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/alert/show-icon.md b/examples/docs/resources/mobile-first/md/alert/show-icon.md
new file mode 100644
index 000000000..75f7a60f0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/alert/show-icon.md
@@ -0,0 +1,18 @@
+
+
+### 是否显示图标
+
+通过配置 `show-icon` 属性,控制图标是否显示。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/badge-style.md b/examples/docs/resources/mobile-first/md/badge/badge-style.md
new file mode 100644
index 000000000..f90bfebd0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/badge-style.md
@@ -0,0 +1,25 @@
+
+
+### 默认主題样式
+
+`type` 设置显示主题,可选值:danger(默认)、primary、success、warning、info
+
+
+
+### 圆点向左排列样式
+
+`show-left` 设置是否向左展示,仅对圆点生效
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/basic-usage.md b/examples/docs/resources/mobile-first/md/badge/basic-usage.md
new file mode 100644
index 000000000..06593881b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/basic-usage.md
@@ -0,0 +1,21 @@
+
+
+### 基本用法
+
+
Badge 展示指定数据信息,如:我的待办数、新任务数等。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/custom-badge-target.md b/examples/docs/resources/mobile-first/md/badge/custom-badge-target.md
new file mode 100644
index 000000000..d2bef7c06
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/custom-badge-target.md
@@ -0,0 +1,20 @@
+
+
+### 自定义标记目标
+
+`default slot` 标记内容自定义
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/custom-tip-text.md b/examples/docs/resources/mobile-first/md/badge/custom-tip-text.md
new file mode 100644
index 000000000..bc20d50da
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/custom-tip-text.md
@@ -0,0 +1,20 @@
+
+
+### 自定义提示内容
+
+`content slot` 自定义提示内容
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/hidden-badge-while-read-message.md b/examples/docs/resources/mobile-first/md/badge/hidden-badge-while-read-message.md
new file mode 100644
index 000000000..ad2543963
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/hidden-badge-while-read-message.md
@@ -0,0 +1,20 @@
+
+
+### 消息已读动态隐藏标记
+
+`hidden` 隐藏标记
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/href-target.md b/examples/docs/resources/mobile-first/md/badge/href-target.md
new file mode 100644
index 000000000..a1557bcc5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/href-target.md
@@ -0,0 +1,20 @@
+
+
+### 跳转链接
+
+`href`定义跳转链接
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/is-dot.md b/examples/docs/resources/mobile-first/md/badge/is-dot.md
new file mode 100644
index 000000000..dc95baf38
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/is-dot.md
@@ -0,0 +1,20 @@
+
+
+### 小圆点标记
+
+通过`is-dot` 显示小圆点标记
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/max-num.md b/examples/docs/resources/mobile-first/md/badge/max-num.md
new file mode 100644
index 000000000..758607c3c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/max-num.md
@@ -0,0 +1,20 @@
+
+
+### 计数最大值
+
+`max` 超过最大值会显示 '{max}+'
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/badge/props-content.md b/examples/docs/resources/mobile-first/md/badge/props-content.md
new file mode 100644
index 000000000..2082f716b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/badge/props-content.md
@@ -0,0 +1,20 @@
+
+
+### 属性传值显示内容
+
+通过绑定`data`属性传入自定义内容
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button-group/basic-usage.md b/examples/docs/resources/mobile-first/md/button-group/basic-usage.md
new file mode 100644
index 000000000..e7a5c9204
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button-group/basic-usage.md
@@ -0,0 +1,21 @@
+
+
+### 基本用法
+
+通过 `v-model` 设置默认选中的按钮,并实现双向绑定。通过 `value` 也可设置默认选中按钮,但不能进行双向绑定。
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button-group/button-group-data.md b/examples/docs/resources/mobile-first/md/button-group/button-group-data.md
new file mode 100644
index 000000000..809515eda
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button-group/button-group-data.md
@@ -0,0 +1,19 @@
+
+
+### 按钮组数据
+
+通过 `data` 属性设置按钮组数据,对象中的 text 为按钮显示文本,value 用于双向绑定时指定的值。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button-group/default-slot-usage.md b/examples/docs/resources/mobile-first/md/button-group/default-slot-usage.md
new file mode 100644
index 000000000..b73fa99d7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button-group/default-slot-usage.md
@@ -0,0 +1,21 @@
+
+
+### 默认插槽
+
+使用默认插槽的方式时,ButtonGroup 的 `data、text-field、value-field、value / v-model、size` 属性对插槽中的按钮将不再生效。
+
+但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性,具体参考 Button 组件属性。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button-group/dynamic-disable.md b/examples/docs/resources/mobile-first/md/button-group/dynamic-disable.md
new file mode 100644
index 000000000..8a9f09755
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button-group/dynamic-disable.md
@@ -0,0 +1,19 @@
+
+
+### 禁用状态
+
+设置 `disabled` 属性为 true 可禁用整个按钮组。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button-group/plain-button-group.md b/examples/docs/resources/mobile-first/md/button-group/plain-button-group.md
new file mode 100644
index 000000000..c835feb21
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button-group/plain-button-group.md
@@ -0,0 +1,19 @@
+
+
+### 朴素按钮
+
+设置 `plain` 属性为 true 可显示为朴素按钮样式。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button-group/size.md b/examples/docs/resources/mobile-first/md/button-group/size.md
new file mode 100644
index 000000000..926767f24
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button-group/size.md
@@ -0,0 +1,16 @@
+
+
+### 设置组件大小
+
+可以设置为:`medium`,`small`,`mini`
+
diff --git a/examples/docs/resources/mobile-first/md/button-group/text-value-field.md b/examples/docs/resources/mobile-first/md/button-group/text-value-field.md
new file mode 100644
index 000000000..67ab73b46
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button-group/text-value-field.md
@@ -0,0 +1,19 @@
+
+
+### 数据字段映射
+
+若按钮组数据对象中的字段不是默认的 text 和 value ,则可通过 `text-field`、`value-field` 属性进行映射。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/autofocus.md b/examples/docs/resources/mobile-first/md/button/autofocus.md
new file mode 100644
index 000000000..c75bf6a17
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/autofocus.md
@@ -0,0 +1,20 @@
+
+
+### 聚焦
+
+通过 `autofocus` 属性设置是否默认聚焦。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/basic-usage-saas.md b/examples/docs/resources/mobile-first/md/button/basic-usage-saas.md
new file mode 100644
index 000000000..54c2c5039
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/basic-usage-saas.md
@@ -0,0 +1,21 @@
+
+
+### 基本用法
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/basic-usage.md b/examples/docs/resources/mobile-first/md/button/basic-usage.md
new file mode 100644
index 000000000..575050b79
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/basic-usage.md
@@ -0,0 +1,21 @@
+
+
+### 基本用法
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/button-events.md b/examples/docs/resources/mobile-first/md/button/button-events.md
new file mode 100644
index 000000000..efec78b87
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/button-events.md
@@ -0,0 +1,19 @@
+
+
+### 事件
+
+按钮的单击事件,该示例中单击按钮将会出现提示信息。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/button-group.md b/examples/docs/resources/mobile-first/md/button/button-group.md
new file mode 100644
index 000000000..39a1ed623
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/button-group.md
@@ -0,0 +1,17 @@
+
+
+### 按钮组
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/button-mf.md b/examples/docs/resources/mobile-first/md/button/button-mf.md
new file mode 100644
index 000000000..625b912fb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/button-mf.md
@@ -0,0 +1,74 @@
+
+
+### 基本用法
+
+
+
+### 文字按钮
+
+设置 `type` 属性为 `text` 即为文字按钮,可在标签子级或者通过 `text` 属性设置显示内容。
+
+
+
+### 线性按钮
+
+配置 `plain` 属性为 true,即可展示为线性按钮的形式。
+
+
+
+### 超链接按钮
+
+通过设置 `href` 属性可跳转到指定页面。
+
+
+
+### 主题样式
+
+通过 `type` 属性可以设置不同的主题样式,主要包括 primary、success、info、warning、danger、text。
+
+
+
+### 尺寸
+
+通过 `size` 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。
+
+
+
+### 聚焦
+
+通过 `autofocus` 属性设置是否默认聚焦。
+
+
+
+### 防止表单重复提交
+
+通过 `reset-time` 属性可设置单击后按钮禁用的时长,默认的禁用时长为 1000 毫秒。
+
+可用于防止按钮连续点击出现表单重复提交的问题。
+
+
+
+### 事件
+
+按钮的单击事件,该示例中单击按钮将会出现提示信息。
+
+
+
+### 动态禁用按钮
+
+设置 `disabled` 属性为 true 后,可以禁用按钮。
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/button/button-size.md b/examples/docs/resources/mobile-first/md/button/button-size.md
new file mode 100644
index 000000000..e8ad80f30
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/button-size.md
@@ -0,0 +1,20 @@
+
+
+### 尺寸
+
+通过 `size` 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/button-style.md b/examples/docs/resources/mobile-first/md/button/button-style.md
new file mode 100644
index 000000000..5fe2aa6f8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/button-style.md
@@ -0,0 +1,19 @@
+
+
+### 主题样式
+
+通过 `type` 属性可以设置不同的主题样式,主要包括 primary、success、info、warning、danger、text。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/circle-button.md b/examples/docs/resources/mobile-first/md/button/circle-button.md
new file mode 100644
index 000000000..0188292de
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/circle-button.md
@@ -0,0 +1,19 @@
+
+
+### 圆形按钮
+
+直接配置 `circle` 属性为 true,即可展示为圆形按钮的形式。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/dynamic-disable-button.md b/examples/docs/resources/mobile-first/md/button/dynamic-disable-button.md
new file mode 100644
index 000000000..fd3be8c8e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/dynamic-disable-button.md
@@ -0,0 +1,19 @@
+
+
+### 动态禁用按钮
+
+设置 `disabled` 属性为 true 后,可以禁用按钮。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/icon-button.md b/examples/docs/resources/mobile-first/md/button/icon-button.md
new file mode 100644
index 000000000..ebe995383
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/icon-button.md
@@ -0,0 +1,24 @@
+
+
+### 图标按钮
+
+指定 `icon` 属性值为需要的 Icon 图标即可展示为图标按钮。
+
+:::tip Icon 图标用法
+先从 `@aurora/vue-icon` 中导入需要的 Icon,再在 data 函数中初始化 Icon 组件并赋值给一个属性。最后在模板中通过 `icon` 属性进行引用。
点击这里 查看更多图标。
+通过 `native-type` 设置 button、image 两种按钮的表单类型。该属性仅当属性 type 为 button 或 image 时使用。该属性的可选值为 button / submit / reset。
+:::
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/img-button.md b/examples/docs/resources/mobile-first/md/button/img-button.md
new file mode 100644
index 000000000..6dc06e409
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/img-button.md
@@ -0,0 +1,19 @@
+
+
+### 图片按钮
+
+以默认插槽的用法嵌入 img 标签,并引入图片。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/link-button.md b/examples/docs/resources/mobile-first/md/button/link-button.md
new file mode 100644
index 000000000..3d1dd5632
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/link-button.md
@@ -0,0 +1,20 @@
+
+
+### 超链接按钮
+
+通过设置 `href` 属性可跳转到指定页面。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/plain-button.md b/examples/docs/resources/mobile-first/md/button/plain-button.md
new file mode 100644
index 000000000..45c756fe9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/plain-button.md
@@ -0,0 +1,19 @@
+
+
+### 线性按钮
+
+配置 `plain` 属性为 true,即可展示为线性按钮的形式。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/reset-time.md b/examples/docs/resources/mobile-first/md/button/reset-time.md
new file mode 100644
index 000000000..335dc52fd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/reset-time.md
@@ -0,0 +1,21 @@
+
+
+### 防止表单重复提交
+
+通过 `reset-time` 属性可设置单击后按钮禁用的时长,默认的禁用时长为 1000 毫秒。
+
+可用于防止按钮连续点击出现表单重复提交的问题。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/round.md b/examples/docs/resources/mobile-first/md/button/round.md
new file mode 100644
index 000000000..74c07114a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/round.md
@@ -0,0 +1,20 @@
+
+
+### 防止表单重复提交
+
+通过 `round` 属性设置是否圆角按钮。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/show-loading.md b/examples/docs/resources/mobile-first/md/button/show-loading.md
new file mode 100644
index 000000000..ea134ccc8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/show-loading.md
@@ -0,0 +1,19 @@
+
+
+### 显示加载中
+
+直接配置 `loading` 属性为 true,即可展示为加载中的样式。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/button/text-button.md b/examples/docs/resources/mobile-first/md/button/text-button.md
new file mode 100644
index 000000000..268106747
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/button/text-button.md
@@ -0,0 +1,28 @@
+
+
+### 文字按钮
+
+设置 `type` 属性为 `text` 即为文字按钮,可在标签子级或者通过 `text` 属性设置显示内容。
+
+
+
+
+
+### 定制样式类
+
+设置 `button-class` 属性定制按钮样式
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/calendar-bar/basic-usage.md b/examples/docs/resources/mobile-first/md/calendar-bar/basic-usage.md
new file mode 100644
index 000000000..af78186c0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/calendar-bar/basic-usage.md
@@ -0,0 +1,61 @@
+
+
+### 基本用法
+
+组件 `v-model` 只接受字符串值,例如 `2022-12-18`
+
+
+
+### 禁用
+
+使用 `config.disabled` 配置一个方法,用于判断参数日期是否禁用。
+使用 `config.disabledColorClass` 配置禁用日期的字体颜色类名。
+使用 `config.disabledBackgroundColorClass` 配置禁用日期的背景颜色类名。
+
+
+
+
+### 日期标记
+
+使用 `config.mark` 配置一个方法,用于判断参数日期是否存在标记。
+此方法返回空字符串表示不存在标记,返回非空字符串表示存在标记,且标记内容就是该字符串。
+使用 `config.markBackgroundColorClass` 配置标记的颜色类名。
+使用 `config.showMarkMessage` 配置是否开启标记 `title` 提示,默认值为 `false`。
+
+
+
+### 当前日期
+
+用户传入的日期为 `当前日期`。
+使用 `config.currentColorClass` 配置 `当前日期` 的字体颜色类名;
+使用 `config.currentBackgroundColorClass` 配置 `当前日期` 的背景颜色类名。
+
+
+
+### 今天
+
+使用 `config.renderItem` 可以配置一个方法,对日期面板的某些项进行定制渲染。
+
+
+
+### 周起始
+
+使用 `config.weekFirst` 配置每周的起始天。默认值为 `0`,表示周起始为 `周日`。也可以配置为 `1 ~ 6`,分别表示 `周一 ~ 周六`。
+
+
+
+### 工作日
+
+用户传入的日期为 `当前日期`,当前日期所在月份为 `当前月份`,当前月份周六周日为 `周末`,非周六周日为 `工作日`。
+使用 `config.workday` 配置一个方法,用于判断 `工作日` 是否作为真正的工作日;
+使用 `config.holiday` 配置一个方法,用于判断 `周末` 是否作为真正的周末;
+使用 `config.workdayColorClass` 和 `config.holidayColorClass` 配置工作日和周末的字体颜色类。
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/basic-usage.md b/examples/docs/resources/mobile-first/md/card/basic-usage.md
new file mode 100644
index 000000000..4c87abc4f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/basic-usage.md
@@ -0,0 +1,18 @@
+
+
+### 基本用法
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/card-disabled.md b/examples/docs/resources/mobile-first/md/card/card-disabled.md
new file mode 100644
index 000000000..8ff3f5e10
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/card-disabled.md
@@ -0,0 +1,20 @@
+
+
+### 禁用
+
+通过设置属性`disabled`禁用卡片
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/card-events.md b/examples/docs/resources/mobile-first/md/card/card-events.md
new file mode 100644
index 000000000..b91380f62
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/card-events.md
@@ -0,0 +1,20 @@
+
+
+### 事件
+
+`change` 事件:卡片勾选和取消勾选时触发
+`icon-click` 事件:操作栏按钮点击时触发
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/card-group.md b/examples/docs/resources/mobile-first/md/card/card-group.md
new file mode 100644
index 000000000..08bdb0337
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/card-group.md
@@ -0,0 +1,20 @@
+
+
+### 卡片组
+
+`card-group` 与 `card` 结合一起使用,提供响应式布局的能力
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/card-size.md b/examples/docs/resources/mobile-first/md/card/card-size.md
new file mode 100644
index 000000000..bbead6ea4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/card-size.md
@@ -0,0 +1,20 @@
+
+
+### 尺寸
+
+支持`mini small medium large`4 个尺寸的卡片
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/card-status.md b/examples/docs/resources/mobile-first/md/card/card-status.md
new file mode 100644
index 000000000..91b8693d7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/card-status.md
@@ -0,0 +1,20 @@
+
+
+### 卡片状态
+
+支持 `success warning alerting danger` 4 种状态
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/card-type.md b/examples/docs/resources/mobile-first/md/card/card-type.md
new file mode 100644
index 000000000..881efc4d8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/card-type.md
@@ -0,0 +1,19 @@
+
+
+### 卡片类型
+
+支持 `text image video logo` 4 种类型
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/check-type.md b/examples/docs/resources/mobile-first/md/card/check-type.md
new file mode 100644
index 000000000..1f61ead72
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/check-type.md
@@ -0,0 +1,27 @@
+
+
+### 单选
+
+通过属性`check-type='radio'`设置卡片单选,需同时设置 label。
+注意:目前仅支持在 text 类型开启单选
+
+
+
+
+### 多选
+
+通过属性`check-type='checkbox'`设置卡片多选,需同时设置 label。
+注意:目前仅支持在 text 类型开启多选
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/custom-class.md b/examples/docs/resources/mobile-first/md/card/custom-class.md
new file mode 100644
index 000000000..4a11c86ae
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/custom-class.md
@@ -0,0 +1,20 @@
+
+
+### 自定义 class
+
+属性`card-class`可自定义卡片的 class,属性`height`可设置卡片内容区的高度。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/operate-bar.md b/examples/docs/resources/mobile-first/md/card/operate-bar.md
new file mode 100644
index 000000000..ca0d38225
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/operate-bar.md
@@ -0,0 +1,19 @@
+
+
+### 操作栏选项配置
+
+通过`options`属性配置操作栏,支持按钮的禁用(`disabled: true`)与隐藏(`hidden: true`)
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/card/slot.md b/examples/docs/resources/mobile-first/md/card/slot.md
new file mode 100644
index 000000000..9441d1b02
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/card/slot.md
@@ -0,0 +1,19 @@
+
+
+### 插槽
+
+组件提供`default、title-left、title-right、footer`4 个插槽
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/aspect-ratio.md b/examples/docs/resources/mobile-first/md/carousel/aspect-ratio.md
new file mode 100644
index 000000000..018255812
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/aspect-ratio.md
@@ -0,0 +1,21 @@
+
+
+### 宽高比
+
+`aspect-ratio` 属性可以设置轮播图的宽高比,如果设置了 height,会以 height 为主,默认值为 16:2,可以设置任意的整数宽高比例。
+设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/autoplay.md b/examples/docs/resources/mobile-first/md/carousel/autoplay.md
new file mode 100644
index 000000000..6de0936f7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/autoplay.md
@@ -0,0 +1,20 @@
+
+
+### 自动切换
+
+配置 `autoplay` 属性为 true 后,走马灯的幻灯片内容将自动轮播切换。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/basic-usage.md b/examples/docs/resources/mobile-first/md/carousel/basic-usage.md
new file mode 100644
index 000000000..5e6ea30de
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/basic-usage.md
@@ -0,0 +1,30 @@
+
+
+### 基本用法
+
+
+
+
+
+### Carousel 属性
+
+
+
+
+
+### Carousel-Item 属性
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/carousel-arrow.md b/examples/docs/resources/mobile-first/md/carousel/carousel-arrow.md
new file mode 100644
index 000000000..d945ae87d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/carousel-arrow.md
@@ -0,0 +1,26 @@
+
+
+### 总是显示切换箭头
+
+
+
+### hover 时显示切换箭头
+
+
+
+### 隐藏切换箭头
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/carousel-mf.md b/examples/docs/resources/mobile-first/md/carousel/carousel-mf.md
new file mode 100644
index 000000000..21b251ec3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/carousel-mf.md
@@ -0,0 +1,130 @@
+
+
+### 基本用法
+
+
+
+
+
+### Carousel 属性
+
+
+
+
+
+### Carousel-Item 属性
+
+
+
+
+
+### 自动切换
+
+配置 `autoplay` 属性为 true 后,走马灯的幻灯片内容将自动轮播切换。
+
+
+
+
+
+### 总是显示切换箭头
+
+
+
+### hover 时显示切换箭头
+
+
+
+### 隐藏切换箭头
+
+
+
+
+
+### 宽高比
+
+`aspect-ratio` 属性可以设置轮播图的宽高比,如果设置了 height,会以 height 为主,默认值为 16:2,可以设置任意的整数宽高比例。
+设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。
+
+
+
+
+
+### 关闭循环轮播
+
+配置 `loop` 属性为 false 后,若走马灯幻灯片已切换到最后一项,则将不能再从第一项开始循环切换。即切换到最后一项时,右侧切换箭头不再显示,切换到第一项时,左侧切换箭头不再显示。
+
+
+
+
+
+### 设置高度
+
+
+
+
+
+### 指示器样式
+
+`indicator-style` 属性可以设置轮播图指示器样式,支持 light 与 dark 两种类型,默认为 light。
+
+
+
+
+
+### 指示器和触发方式
+
+走马灯指示器默认显示在幻灯片内容上,配置 `indicator-position` 为 outside 后,将显示在外部。
+
+配置 `trigger` 为 click ,可以修改指示器触发方式为单击,默认鼠标悬停到指示器时,走马灯幻灯片就会对应切换。
+
+
+
+
+
+### 播放开始位置
+
+
+
+
+
+### 手动轮播
+
+调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。
+
+
+
+
+
+### 轮播间隔时间
+
+走马灯幻灯片轮播间隔时间默认为 3000 毫秒,通过 `interval` 属性可以自定义。
+
+
+
+
+
+### 显示标题
+
+通过 `title` 配置显示标题,需要与 `show-title` 结合使用。
+
+
+
+
+### 纵向轮播
+
+配置 `type` 属性为 vertical 即可实现纵向轮播。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/close-loop.md b/examples/docs/resources/mobile-first/md/carousel/close-loop.md
new file mode 100644
index 000000000..c193dc691
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/close-loop.md
@@ -0,0 +1,20 @@
+
+
+### 关闭循环轮播
+
+配置 `loop` 属性为 false 后,若走马灯幻灯片已切换到最后一项,则将不能再从第一项开始循环切换。即切换到最后一项时,右侧切换箭头不再显示,切换到第一项时,左侧切换箭头不再显示。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/custom-height.md b/examples/docs/resources/mobile-first/md/carousel/custom-height.md
new file mode 100644
index 000000000..545e246be
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/custom-height.md
@@ -0,0 +1,18 @@
+
+
+### 设置高度
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/indicator-style.md b/examples/docs/resources/mobile-first/md/carousel/indicator-style.md
new file mode 100644
index 000000000..8330eb49e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/indicator-style.md
@@ -0,0 +1,20 @@
+
+
+### 指示器样式
+
+`indicator-style` 属性可以设置轮播图指示器样式,支持 light 与 dark 两种类型,默认为 light。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/indicator-trigger.md b/examples/docs/resources/mobile-first/md/carousel/indicator-trigger.md
new file mode 100644
index 000000000..861b00ff9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/indicator-trigger.md
@@ -0,0 +1,22 @@
+
+
+### 指示器和触发方式
+
+走马灯指示器默认显示在幻灯片内容上,配置 `indicator-position` 为 outside 后,将显示在外部。
+
+配置 `trigger` 为 click ,可以修改指示器触发方式为单击,默认鼠标悬停到指示器时,走马灯幻灯片就会对应切换。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/initial-index.md b/examples/docs/resources/mobile-first/md/carousel/initial-index.md
new file mode 100644
index 000000000..7f4bd6fa1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/initial-index.md
@@ -0,0 +1,18 @@
+
+
+### 播放开始位置
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/manual-play.md b/examples/docs/resources/mobile-first/md/carousel/manual-play.md
new file mode 100644
index 000000000..c7c4bfdc6
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/manual-play.md
@@ -0,0 +1,20 @@
+
+
+### 手动轮播
+
+调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/play-interval.md b/examples/docs/resources/mobile-first/md/carousel/play-interval.md
new file mode 100644
index 000000000..b8e4f5a31
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/play-interval.md
@@ -0,0 +1,20 @@
+
+
+### 轮播间隔时间
+
+走马灯幻灯片轮播间隔时间默认为 3000 毫秒,通过 `interval` 属性可以自定义。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/show-title.md b/examples/docs/resources/mobile-first/md/carousel/show-title.md
new file mode 100644
index 000000000..ba52ddee5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/show-title.md
@@ -0,0 +1,19 @@
+
+
+### 显示标题
+
+通过 `title` 配置显示标题,需要与 `show-title` 结合使用。
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/carousel/up-down-carousel.md b/examples/docs/resources/mobile-first/md/carousel/up-down-carousel.md
new file mode 100644
index 000000000..a04c57553
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/carousel/up-down-carousel.md
@@ -0,0 +1,20 @@
+
+
+### 纵向轮播
+
+配置 `type` 属性为 vertical 即可实现纵向轮播。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/cascader-select/basic-usage.md b/examples/docs/resources/mobile-first/md/cascader-select/basic-usage.md
new file mode 100644
index 000000000..cad8e1d35
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/cascader-select/basic-usage.md
@@ -0,0 +1,51 @@
+
+
+### 基本用法
+
+使用 `v-model` 绑定组件 `当前值`,使用 `options` 绑定组件 `选项列表`,这两个数组长度必须相同。
+
+
+
+### 循环滚动
+
+设置属性 `cycle-roll` 为 `true` 打开选项循环滚动功能。默认值为 `false`。
+
+
+
+### 数组选项禁用
+
+如果组件 `选项列表` 是数组值,可以使用属性 `disabled` 配置一个方法判断选项是否禁用。
+此方法的第一个参数是可见选项的当前值,其它参数是组件当前聚焦值,返回 `true` 则禁用选项。
+
+
+
+### 对象选项禁用
+
+如果组件 `选项列表` 是对象值,使用 `optionMethod` 生成选项时即可指定是否禁用。
+`optionMethod` 方法的第一个参数是可见选项的当前值,其它参数是组件当前聚焦值,设置返回值的 `disabled` 为 `true` 则禁用选项。
+
+
+
+### 对象选项
+
+组件的 `选项列表` 可以是对象值。此方式更方便生成动态选项值,但是选项值必须为数字值。
+此对象需配置选项范围 `range`,和生成方法 `optionMethod`。选项范围也可以指定为生成方法 `rangeMethod`。
+`rangeMethod` 的参数是组件当前聚焦值。
+`optionMethod` 的第一个参数是可见选项的当前值,其它参数是组件当前聚焦值。
+
+
+
+### 文字颜色
+
+
+
+### 城市级联
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/basic-usage.md b/examples/docs/resources/mobile-first/md/checkbox/basic-usage.md
new file mode 100644
index 000000000..4d884847b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/basic-usage.md
@@ -0,0 +1,33 @@
+
+
+### 基本用法
+
+
+
+
+
+### Checkbox 属性
+
+
+
+
+
+### Checkbox-Button 属性
+
+
+
+
+
+### Checkbox-Group 属性
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-button.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-button.md
new file mode 100644
index 000000000..cb44fab4e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-button.md
@@ -0,0 +1,20 @@
+
+
+### 按钮形式复选框
+
+在 `checkbox-group` 元素中嵌入 `checkbox-button` 即可实现按钮形式的复选框组。
+通过 `fill` 按钮形式的 Checkbox 激活时的填充色和边框色,默认值为:#409EFF。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-events.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-events.md
new file mode 100644
index 000000000..2efe721d9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-events.md
@@ -0,0 +1,20 @@
+
+
+### 事件
+
+勾选值改变后将触发 `change` 事件。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-group.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-group.md
new file mode 100644
index 000000000..2528aecfa
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-group.md
@@ -0,0 +1,34 @@
+
+
+### 复选框组
+
+通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组,在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值,若该标签中无内容,则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
+
+
+
+### 配置式复选框组
+
+提供 `options` 属性,支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后,可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。
+
+
+
+`options` 对象数组中包括三个字段:`label`、`text`、`events`。
+
+
+
+另外还提供 `type` 属性,配合 `options` 属性一起使用,默认值为 `checkbox`。还可以配置为 `button`,配置后复选框组将以按钮的形式展示。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-mf.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-mf.md
new file mode 100644
index 000000000..ccd842602
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-mf.md
@@ -0,0 +1,90 @@
+
+
+### 基本用法
+
+
+
+
+
+### 复选框组
+
+通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组,在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值,若该标签中无内容,则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
+
+
+
+### 配置式复选框组
+
+提供 `options` 属性,支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后,可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。
+
+
+
+`options` 对象数组中包括三个字段:`label`、`text`、`events`。
+
+
+
+另外还提供 `type` 属性,配合 `options` 属性一起使用,默认值为 `checkbox`。还可以配置为 `button`,配置后复选框组将以按钮的形式展示。
+
+
+
+### 全选与半选
+
+在 `checkbox` 元素中配置 `indeterminate` 属性为 true 后,勾选框将展示为半选的样式。
+
+
+
+
+
+### 可选数量限制
+
+在 `checkbox-group` 上可通过 `min`、`max` 属性指定可勾选项目的最小、最大值。
+
+
+
+
+
+### 当前是否勾选
+
+在 `checked` 当前是否勾选,通过 `disabled` 设置组件是否禁用。
+
+
+
+
+
+### 垂直布局
+
+在 `checkbox-group` 元素上设置 `vertical` 为 true,则其管理的 `checkbox-button` 或 `checkbox` 将展示为垂直布局。
+
+
+
+
+
+### 内容超出时的提示信息
+
+若复选框后的介绍文字超出时,可以通过 Tooltip 组件增加提示信息,鼠标悬停时可提示所有内容。
+
+
+
+在 `checkbox` 元素上配置 `border` 属性为 true,可显示边框。
+
+
+
+
+
+### 插槽
+
+Checkbox 的内容
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-slot.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-slot.md
new file mode 100644
index 000000000..fe819b2a5
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-slot.md
@@ -0,0 +1,20 @@
+
+
+### 插槽
+
+Checkbox 的内容
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/checkbox-text.md b/examples/docs/resources/mobile-first/md/checkbox/checkbox-text.md
new file mode 100644
index 000000000..15a4b6ecd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/checkbox-text.md
@@ -0,0 +1,27 @@
+
+
+### 文本
+
+在 `text` 属性设置文本内容
+通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。
+
+
+
+
+
+### 文本选择
+
+通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/content-overflow.md b/examples/docs/resources/mobile-first/md/checkbox/content-overflow.md
new file mode 100644
index 000000000..8b7799d97
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/content-overflow.md
@@ -0,0 +1,23 @@
+
+
+### 内容超出时的提示信息
+
+若复选框后的介绍文字超出时,可以通过 Tooltip 组件增加提示信息,鼠标悬停时可提示所有内容。
+
+
+
+在 `checkbox` 元素上配置 `border` 属性为 true,可显示边框。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/dynamic-create-checkbox.md b/examples/docs/resources/mobile-first/md/checkbox/dynamic-create-checkbox.md
new file mode 100644
index 000000000..1bd2c3a10
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/dynamic-create-checkbox.md
@@ -0,0 +1,19 @@
+
+
+### 动态生成复选框组
+
+复选框组所需数据可通过请求服务从后台取得,然后动态生成。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/indeterminate.md b/examples/docs/resources/mobile-first/md/checkbox/indeterminate.md
new file mode 100644
index 000000000..ddb8c660f
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/indeterminate.md
@@ -0,0 +1,19 @@
+
+
+### 全选与半选
+
+在 `checkbox` 元素中配置 `indeterminate` 属性为 true 后,勾选框将展示为半选的样式。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/min-max.md b/examples/docs/resources/mobile-first/md/checkbox/min-max.md
new file mode 100644
index 000000000..d86ac3661
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/min-max.md
@@ -0,0 +1,28 @@
+
+
+### 可选数量限制
+
+在 `checkbox-group` 上可通过 `min`、`max` 属性指定可勾选项目的最小、最大值。
+
+
+
+
+
+### 当前是否勾选
+
+在 `checked` 当前是否勾选,通过 `disabled` 设置组件是否禁用。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/text.md b/examples/docs/resources/mobile-first/md/checkbox/text.md
new file mode 100644
index 000000000..bcf41c08a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/text.md
@@ -0,0 +1,28 @@
+
+
+### 文本
+
+在 `text` 属性设置文本内容
+通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。
+
+
+
+
+
+### 文本选择
+
+通过 `true-label` 设置选中的值, `false-label` 设置未选中的值。
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/vertical-checkbox.md b/examples/docs/resources/mobile-first/md/checkbox/vertical-checkbox.md
new file mode 100644
index 000000000..3e3b85540
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/vertical-checkbox.md
@@ -0,0 +1,19 @@
+
+
+### 垂直布局
+
+在 `checkbox-group` 元素上设置 `vertical` 为 true,则其管理的 `checkbox-button` 或 `checkbox` 将展示为垂直布局。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/checkbox/with-border.md b/examples/docs/resources/mobile-first/md/checkbox/with-border.md
new file mode 100644
index 000000000..54525bce3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/checkbox/with-border.md
@@ -0,0 +1,23 @@
+
+
+### 尺寸
+
+当复选框为按钮形式时,通过 `size` 属性可以设置按钮复选框的尺寸,可选项有 medium、small、mini。
+
+
+
+在 `checkbox-button` 上设置 `disabled` 属性,将禁用某一个复选按钮,若在 `checkbox-group` 标签上配置 `disabled` 属性,则禁用所有复选按钮。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/accordion.md b/examples/docs/resources/mobile-first/md/collapse/accordion.md
new file mode 100644
index 000000000..022ceb679
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/accordion.md
@@ -0,0 +1,23 @@
+
+
+### 手风琴效果
+
+配置 `accordion` 属性为 true 后,折叠面板将展示手风琴效果。
+配置 `v-model` 设置当前激活的面板(如果是手风琴模式,绑定值类型需要为 string ,否则为 array )
+`change` 事件,在当前激活面板改变时触发,参数为当前的 value 值
+配置 `name` 属性作为每个 collapse-item 的唯一标志符
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/basic-usage.md b/examples/docs/resources/mobile-first/md/collapse/basic-usage.md
new file mode 100644
index 000000000..2a140bf57
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/basic-usage.md
@@ -0,0 +1,27 @@
+
+
+### 基本用法
+
+
+
+
+
+### Collapse 属性
+
+
+
+
+
+### Collapse-Item 属性
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/block-close.md b/examples/docs/resources/mobile-first/md/collapse/block-close.md
new file mode 100644
index 000000000..e260ba813
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/block-close.md
@@ -0,0 +1,19 @@
+
+
+### 阻止折叠面板关闭事件
+
+:before-close 折叠面板关闭前事件,方法里面 return true/false,表示是否可以关闭
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/collapse-events.md b/examples/docs/resources/mobile-first/md/collapse/collapse-events.md
new file mode 100644
index 000000000..95ea19ab9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/collapse-events.md
@@ -0,0 +1,19 @@
+
+
+### 折叠面板事件
+
+激活面板的值改变时将触发 `change` 事件。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/collapse-mf.md b/examples/docs/resources/mobile-first/md/collapse/collapse-mf.md
new file mode 100644
index 000000000..ad6deca9d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/collapse-mf.md
@@ -0,0 +1,87 @@
+
+
+### 手风琴效果
+
+配置 `accordion` 属性为 true 后,折叠面板将展示手风琴效果。
+配置 `v-model` 设置当前激活的面板(如果是手风琴模式,绑定值类型需要为 string ,否则为 array )
+`change` 事件,在当前激活面板改变时触发,参数为当前的 value 值
+配置 `name` 属性作为每个 collapse-item 的唯一标志符
+
+
+
+
+
+### 禁用状态
+
+在 `collapse-item` 元素上配置 `disabled` 属性为 true 后,将禁用指定的折叠面板项。
+
+
+
+
+
+### 自定义面板标题
+
+在 `collapse-item` 元素上配置 `title` 属性可以指定每个折叠面板项的标题。但同时也可以通过 `title` 插槽的方式自定义面板标题,比如在标题前增加图标。
+
+
+
+
+
+### 折叠面板事件
+
+激活面板的值改变时将触发 `change` 事件。
+
+
+
+
+
+### 阻止折叠面板关闭事件
+
+:before-close 折叠面板关闭前事件,方法里面 return true/false,表示是否可以关闭
+
+
+
+
+
+### 嵌套表格
+
+通过 `collapse-item` 元素的默认插槽嵌入表格。
+
+
+
+
+
+### 嵌套表单
+
+通过 `collapse-item` 元素的默认插槽嵌入表单。
+
+
+
+
+
+### 自定义 Title 展示
+
+通过配置 Collapse 内置的 title 插槽实现自定义标题展示
+
+
+
+
+
+### 自定义 Title 右侧内容展示
+
+通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/collapse/collapse-slot.md b/examples/docs/resources/mobile-first/md/collapse/collapse-slot.md
new file mode 100644
index 000000000..5bdebf1b7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/collapse-slot.md
@@ -0,0 +1,36 @@
+
+
+### 自定义 Title 展示
+
+通过配置 Collapse 内置的 title 插槽实现自定义标题展示
+
+
+
+
+
+### 自定义 Title 右侧内容展示
+
+通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示
+
+
+
+
+
+### 自定义 icon 图标
+
+通过配置 Collapse 内置的 icon 插槽实现图标
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/custom-collapse-title.md b/examples/docs/resources/mobile-first/md/collapse/custom-collapse-title.md
new file mode 100644
index 000000000..1cd3edcc2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/custom-collapse-title.md
@@ -0,0 +1,28 @@
+
+
+### 自定义面板标题
+
+在 `collapse-item` 元素上配置 `title` 属性可以指定每个折叠面板项的标题。但同时也可以通过 `title` 插槽的方式自定义面板标题,比如在标题前增加图标。
+
+
+
+
+
+### 自定义面板标题右侧内容
+
+在 `collapse-item` 元素上配置 `title-right` 属性可以指定每个折叠面板项标题的右侧内容。但同时也可以通过 `title-right` 插槽的方式自定义面板标题右侧内容,比如在标题右侧增加图标。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/dynamic-disable.md b/examples/docs/resources/mobile-first/md/collapse/dynamic-disable.md
new file mode 100644
index 000000000..e8702cf49
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/dynamic-disable.md
@@ -0,0 +1,19 @@
+
+
+### 禁用状态
+
+在 `collapse-item` 元素上配置 `disabled` 属性为 true 后,将禁用指定的折叠面板项。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/nested-form.md b/examples/docs/resources/mobile-first/md/collapse/nested-form.md
new file mode 100644
index 000000000..f758d295a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/nested-form.md
@@ -0,0 +1,19 @@
+
+
+### 嵌套表单
+
+通过 `collapse-item` 元素的默认插槽嵌入表单。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/nested-grid.md b/examples/docs/resources/mobile-first/md/collapse/nested-grid.md
new file mode 100644
index 000000000..ff99ca92d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/nested-grid.md
@@ -0,0 +1,19 @@
+
+
+### 嵌套表格
+
+通过 `collapse-item` 元素的默认插槽嵌入表格。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/collapse/slot.md b/examples/docs/resources/mobile-first/md/collapse/slot.md
new file mode 100644
index 000000000..c35ed5806
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/collapse/slot.md
@@ -0,0 +1,28 @@
+
+
+### 自定义 Title 展示
+
+通过配置 Collapse 内置的 title 插槽实现自定义标题展示
+
+
+
+
+
+### 自定义 Title 右侧内容展示
+
+通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/basic-usage.md b/examples/docs/resources/mobile-first/md/column-list-item/basic-usage.md
new file mode 100644
index 000000000..c6bcb1bf0
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/basic-usage.md
@@ -0,0 +1,18 @@
+
+
+### 基本用法
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/column-list-item-mf.md b/examples/docs/resources/mobile-first/md/column-list-item/column-list-item-mf.md
new file mode 100644
index 000000000..6ee5621a2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/column-list-item-mf.md
@@ -0,0 +1,85 @@
+
+
+### 基本用法
+
+
+
+
+
+### 内容区插槽
+
+通过 `#column1、#column2、#column3、#column4` 可以设置内容区插槽,最多支持 4 个内容插槽。
+
+
+
+
+
+### 操作列按钮点击事件
+
+通过 `icon-click` 给按钮加点击事件。
+
+
+
+
+
+### 操作列按钮隐藏与禁用
+
+操作列配置项 options 中添加属性 hidden 可以隐藏按钮,可以通过 disabled 属性禁用操作按钮。
+
+
+
+
+
+### 图片和操作列插槽
+
+通过 `#image` 可以设置图片插槽,通过 `#operate` 可以设置操作列插槽。
+
+
+
+
+
+### 单选
+
+通过属性`show-radio`设置卡片单选,需同时设置 label,`disabled` 属性可以禁用单选按钮 。
+
+
+
+
+
+### 多选
+
+通过属性`show-checkbox`设置卡片多选,需同时设置 label,`disabled` 属性可以禁用复选按钮 。
+
+
+
+
+
+### 设置尺寸
+
+通过 `size` 属性可以设置分区列表项的大小,支持 small 和 medium 两种尺寸。
+
+
+
+
+
+### 自定义内容插槽宽度
+
+通过 `flex-basis` 属性可以设置内容插槽的宽度,flex-basis 类型为数组,最多能传入 4 个值,支持百分比,固定宽度及固有的尺寸关键词,默认为 auto,详情见 flex 的 flex-basis 属性。
+通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例,默认为 1。如果不想自动撑满主容器,可以设为 0,详情见 flex 的 flex-grow 属性。
+flex-grow 举例:`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"`
+flex-basis 举例:`:flex-basis="['200px', '100px','300px']" :flex-basis="['75%', '25%']" :flex-basis="['40%', '20%', '20%', '20%']"`
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/content-slot.md b/examples/docs/resources/mobile-first/md/column-list-item/content-slot.md
new file mode 100644
index 000000000..623a5a98c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/content-slot.md
@@ -0,0 +1,20 @@
+
+
+### 内容区插槽
+
+通过 `#column1、#column2、#column3、#column4` 可以设置内容区插槽,最多支持 4 个内容插槽。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/custom-width.md b/examples/docs/resources/mobile-first/md/column-list-item/custom-width.md
new file mode 100644
index 000000000..a6d2d5ca8
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/custom-width.md
@@ -0,0 +1,23 @@
+
+
+### 自定义内容插槽宽度
+
+通过 `flex-basis` 属性可以设置内容插槽的宽度,flex-basis 类型为数组,最多能传入 4 个值,支持百分比,固定宽度及固有的尺寸关键词,默认为 auto,详情见 flex 的 flex-basis 属性。
+通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例,默认为 1。如果不想自动撑满主容器,可以设为 0,详情见 flex 的 flex-grow 属性。
+flex-grow 举例:`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"`
+flex-basis 举例:`:flex-basis="['200px', '100px','300px']" :flex-basis="['75%', '25%']" :flex-basis="['40%', '20%', '20%', '20%']"`
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/icon-click-event.md b/examples/docs/resources/mobile-first/md/column-list-item/icon-click-event.md
new file mode 100644
index 000000000..c2f7f1385
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/icon-click-event.md
@@ -0,0 +1,20 @@
+
+
+### 操作列按钮点击事件
+
+通过 `icon-click` 给按钮加点击事件。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/icon-disabled.md b/examples/docs/resources/mobile-first/md/column-list-item/icon-disabled.md
new file mode 100644
index 000000000..8aa389b64
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/icon-disabled.md
@@ -0,0 +1,20 @@
+
+
+### 操作列按钮隐藏与禁用
+
+操作列配置项 options 中添加属性 hidden 可以隐藏按钮,可以通过 disabled 属性禁用操作按钮。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/image-operate-slot.md b/examples/docs/resources/mobile-first/md/column-list-item/image-operate-slot.md
new file mode 100644
index 000000000..dbbc009e7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/image-operate-slot.md
@@ -0,0 +1,20 @@
+
+
+### 图片和操作列插槽
+
+通过 `#image` 可以设置图片插槽,通过 `#operate` 可以设置操作列插槽。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/list-group.md b/examples/docs/resources/mobile-first/md/column-list-item/list-group.md
new file mode 100644
index 000000000..66fa5ef70
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/list-group.md
@@ -0,0 +1,20 @@
+
+
+### 列表组
+
+通过引入`column-list-group`组件来对列表进行分组,使用列表组结合复选功能时,需要给 item 设置 label,以此来记录选中的列表项。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/show-checkbox.md b/examples/docs/resources/mobile-first/md/column-list-item/show-checkbox.md
new file mode 100644
index 000000000..76cd04b6d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/show-checkbox.md
@@ -0,0 +1,25 @@
+
+
+### 单选
+
+通过属性`show-radio`设置卡片单选,需同时设置 label,`disabled` 属性可以禁用单选按钮 。
+
+
+
+
+### 多选
+
+通过属性`show-checkbox`设置卡片多选,需同时设置 label,`disabled` 属性可以禁用复选按钮 。
+
+
diff --git a/examples/docs/resources/mobile-first/md/column-list-item/size.md b/examples/docs/resources/mobile-first/md/column-list-item/size.md
new file mode 100644
index 000000000..68c109475
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/column-list-item/size.md
@@ -0,0 +1,20 @@
+
+
+### 设置尺寸
+
+通过 `size` 属性可以设置分区列表项的大小,支持 small 和 medium 两种尺寸。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/date-picker-mobile/basic-usage.md b/examples/docs/resources/mobile-first/md/date-picker-mobile/basic-usage.md
new file mode 100644
index 000000000..600cac535
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/date-picker-mobile/basic-usage.md
@@ -0,0 +1,36 @@
+
+
+### 基本用法
+
+设置 `type` 属性默认值为 `date`,以日期的形式进行选择。
+
+
+
+### 选择日期时间
+
+设置 `type` 属性为 `datetime`,以日期时间的形式进行选择。
+
+
+
+### 选择日期范围
+
+设置 `type` 属性为 `daterange`,以日期范围的形式进行选择。
+
+
+
+### 选择日期时间范围
+
+设置 `type` 属性为 `datetimerange`,以日期时间范围的形式进行选择。
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/drawer/basic-usage.md b/examples/docs/resources/mobile-first/md/drawer/basic-usage.md
new file mode 100644
index 000000000..e7cbd470a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/drawer/basic-usage.md
@@ -0,0 +1,71 @@
+
+
+### 基本用法
+
+
+
+### 抽屉方向
+
+添加 `placement` 属性设置抽屉的方向,可选值有 `left|right|top|bottom`,默认值为 `right`。
+
+
+
+### 抽屉宽度
+
+添加 `width` 属性设置抽屉的宽度,默认值为 `300px`。
+
+
+
+添加 `dragable` 属性开启抽屉宽度拖拽功能,默认值为 `false`。
+
+
+
+### 遮罩层
+
+添加 `mask` 属性可以关闭遮罩层,默认值为 `true` 。
+
+
+
+默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 `mask-closable` 为 `false` 后将禁用该功能,默认值为 `true` 。
+
+
+
+### 显示隐藏
+
+:::tip 显示隐藏说明
+
+- show-header: 显示头部,默认值为 true;
+- show-footer: 显示底部,默认值为 false;
+ :::
+
+
+
+### 插槽
+
+:::tip 插槽说明
+
+- header: 头部插槽,默认显示头部,设置 :show-header="true" 时有效;
+- header-right: 头部右侧插槽,默认显示关闭功能;
+- footer: 头部插槽,默认隐藏底部,设置 :show-footer="true" 时有效;
+ :::
+
+
+
+### 事件
+
+:::tip 事件说明
+
+- hide: 关闭抽屉事件;
+- confirm: 确认事件,设置 :show-footer="true" 时有效;
+ :::
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/arrow-button.md b/examples/docs/resources/mobile-first/md/dropdown/arrow-button.md
new file mode 100644
index 000000000..c1b921cd3
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/arrow-button.md
@@ -0,0 +1,28 @@
+
+
+### 箭头按钮
+
+通过添加`border`属性可实现箭头按钮
+
+
+
+
+
+通过 size 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/basic-usage.md b/examples/docs/resources/mobile-first/md/dropdown/basic-usage.md
new file mode 100644
index 000000000..f737a7810
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/basic-usage.md
@@ -0,0 +1,26 @@
+
+
+### 基本用法
+
+
+
+
+
+### 通过添加`checked-status`属性实现选中态,其中必须添加索引值`current-index`和选中态`selected`属性
+
+
+
+### 当文字超出规定范围展示全部信息
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/button-dropdown.md b/examples/docs/resources/mobile-first/md/dropdown/button-dropdown.md
new file mode 100644
index 000000000..7b2a98bb1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/button-dropdown.md
@@ -0,0 +1,34 @@
+
+
+### 下拉按钮菜单
+
+可以通过 `split-button` 属性设置按钮下拉菜单。
+
+
+
+
+
+可以通过 `type` 属性设置下拉菜单按钮类型,仅支持`primary`类型。
+
+
+
+
+
+通过 size 属性设置按钮不同的大小尺寸,包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/dropdown-mf.md b/examples/docs/resources/mobile-first/md/dropdown/dropdown-mf.md
new file mode 100644
index 000000000..b071e966a
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/dropdown-mf.md
@@ -0,0 +1,52 @@
+
+
+### 基本用法
+
+通过添加`checked-status`属性实现选中态
+
+
+
+
+
+### 下拉按钮菜单
+
+可以通过 `split-button` 属性设置按钮下拉菜单。
+
+
+
+
+
+### 触发对象
+
+可以通过 `multi-stage` 属性设置二级下拉菜单。
+
+
+
+
+
+### 更多图标下拉菜单
+
+通过添加`show-self-icon`属性或者添加`:show-icon='false'`,用户图标自定义。
+
+
+
+
+
+### 箭头按钮
+
+通过添加`border`属性可实现箭头按钮
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/dropdown/events.md b/examples/docs/resources/mobile-first/md/dropdown/events.md
new file mode 100644
index 000000000..99599d8cb
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/events.md
@@ -0,0 +1,39 @@
+
+
+### 内置事件
+
+内置事件包含:`button-click`、`item-click`、`visible-change` 事件。
+
+### visible-change 事件
+
+下拉框出现/隐藏时触发
+
+
+
+### item-click 事件
+
+点击菜单项时触发的事件回调
+可以通过`itemData`,获取菜单项中设置的`item-data`属性
+
+
+
+### button-click 事件
+
+当下拉触发元素呈现为按钮组,即`split-button`属性为`true`时,点击左侧按钮的事件回调
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/many-dropdown.md b/examples/docs/resources/mobile-first/md/dropdown/many-dropdown.md
new file mode 100644
index 000000000..041dfa15c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/many-dropdown.md
@@ -0,0 +1,22 @@
+
+
+### 更多图标下拉菜单
+
+通过添加`show-self-icon`属性自定义用户图标,无旋旋转动画;
+通过添加`:show-icon='false'`属性自定义用户图标,有旋旋转动画。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/max-height.md b/examples/docs/resources/mobile-first/md/dropdown/max-height.md
new file mode 100644
index 000000000..779ea72af
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/max-height.md
@@ -0,0 +1,22 @@
+
+
+### 最大高度
+
+通过添加`max-height`属性可设置下拉最大高度
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/multi-stage.md b/examples/docs/resources/mobile-first/md/dropdown/multi-stage.md
new file mode 100644
index 000000000..56a54b150
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/multi-stage.md
@@ -0,0 +1,21 @@
+
+
+### 触发对象
+
+可以通过 `multi-stage` 属性设置二级下拉菜单,通过添加`level="2"`以便区分二级层级。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/pop-direction.md b/examples/docs/resources/mobile-first/md/dropdown/pop-direction.md
new file mode 100644
index 000000000..5016298d9
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/pop-direction.md
@@ -0,0 +1,34 @@
+
+
+### 弹出方向
+
+通过属性`palcement`来设置菜单弹出位置。可选值(top/top-start/top-end/bottom/bottom-start/bottom-end),默认:bottom-start
+
+:::tip 提示
+top:上居中
+
+top-start:上偏左
+
+top-end:上偏右
+
+bottom 下居中
+
+bottom-start 下偏左
+
+bottom-end 下偏右
+:::
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/dropdown/trigger-event.md b/examples/docs/resources/mobile-first/md/dropdown/trigger-event.md
new file mode 100644
index 000000000..00c4b8bc4
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/dropdown/trigger-event.md
@@ -0,0 +1,22 @@
+
+
+### 触发方式
+
+可以配置 `click` 激活或者 `hover` 激活。
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/exception/button-text.md b/examples/docs/resources/mobile-first/md/exception/button-text.md
new file mode 100644
index 000000000..bb9df99d1
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/exception/button-text.md
@@ -0,0 +1,22 @@
+
+
+### 自定义插槽
+
+:::warning
+已去除`button-text`自定义按钮文本,直接可以通过插槽自定义
+:::
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/exception/component-empty.md b/examples/docs/resources/mobile-first/md/exception/component-empty.md
new file mode 100644
index 000000000..58d9f9ce7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/exception/component-empty.md
@@ -0,0 +1,29 @@
+
+
+### 组件级空态
+
+通过添加`component-empty`属性展示组件级空态,其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`,
+
+:::tip
+对应场景:
+`noperm` :无访问权限
+`nodata` :暂无数据
+`weaknet` :网络不给力
+`noresult`:无相关搜索结果
+`nonews`:暂无最新消息
+:::
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/exception/exception-mf.md b/examples/docs/resources/mobile-first/md/exception/exception-mf.md
new file mode 100644
index 000000000..5e91ca25d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/exception/exception-mf.md
@@ -0,0 +1,64 @@
+
+
+### 页面级空态
+
+通过添加`page-empty`属性展示页面级空态,其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`,
+
+:::tip
+对应场景:
+`pagenoperm` :无访问权限
+`pageweaknet` :网络异常
+`pagenothing` :你访问的页面不存在
+`pageservererror`:服务器异常
+:::
+
+
+
+
+
+### 组件级空态
+
+通过添加`component-empty`属性展示组件级空态,其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`,
+
+:::tip
+对应场景:
+`noperm` :无访问权限
+`nodata` :暂无数据
+`weaknet` :网络不给力
+`noresult`:无相关搜索结果
+`nonews`:暂无最新消息
+:::
+
+
+
+
+
+### 自定义二级标题内容
+
+通过`sub-message`自定义二级标题
+
+
+
+
+
+### 自定义按钮文本
+
+通过`button-text`自定义按钮文本
+
+:::warning
+页面级空态通过设置 type 值为`pagenoperm`展示按钮
+组件级空态通过设置 type 值为`nodata`展示按钮
+:::
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/exception/message.md b/examples/docs/resources/mobile-first/md/exception/message.md
new file mode 100644
index 000000000..d4d298066
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/exception/message.md
@@ -0,0 +1,18 @@
+
+
+### Exception 基本用法
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/exception/page-empty.md b/examples/docs/resources/mobile-first/md/exception/page-empty.md
new file mode 100644
index 000000000..397a8d8e2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/exception/page-empty.md
@@ -0,0 +1,28 @@
+
+
+### 页面级空态
+
+通过添加`page-empty`属性展示页面级空态,其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`,
+
+:::tip
+对应场景:
+`pagenoperm` :无访问权限
+`pageweaknet` :网络异常
+`pagenothing` :你访问的页面不存在
+`pageservererror`:服务器异常
+:::
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/exception/sub-message.md b/examples/docs/resources/mobile-first/md/exception/sub-message.md
new file mode 100644
index 000000000..c1be49ede
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/exception/sub-message.md
@@ -0,0 +1,20 @@
+
+
+### 自定义二级标题内容
+
+通过`sub-message`自定义二级标题
+
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/accept-file-type.md b/examples/docs/resources/mobile-first/md/file-upload/accept-file-type.md
new file mode 100644
index 000000000..5dd05250c
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/accept-file-type.md
@@ -0,0 +1,19 @@
+
+
+### 可上传的文件类型
+
+通过配置 `accept(.doc,.docx)` 来限制上传文件的格式为 `.doc .docx`
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/basic-usage.md b/examples/docs/resources/mobile-first/md/file-upload/basic-usage.md
new file mode 100644
index 000000000..968907a2e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/basic-usage.md
@@ -0,0 +1,21 @@
+
+
+### 基本用法
+
+属性 action(type:String) 上传服务器地址。
+
+
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/display-only.md b/examples/docs/resources/mobile-first/md/file-upload/display-only.md
new file mode 100644
index 000000000..1f46291ee
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/display-only.md
@@ -0,0 +1,29 @@
+
+
+### 只读模式
+
+文件上传模式,通过 `display-only` 设置组件是否只读。
+
+
+
+
+图片上传模式,通过 `display-only` 设置组件是否只读。
+
+
+
+
+音视频上传模式,通过 `display-only` 设置组件是否只读。
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/download.md b/examples/docs/resources/mobile-first/md/file-upload/download.md
new file mode 100644
index 000000000..78d8b0721
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/download.md
@@ -0,0 +1,29 @@
+
+
+### 下载全部
+
+文件上传模式,配置 `download-all` 事件,会显示下载全部按钮,点击下载全部按钮会触发 `download-all` 事件
+
+
+### 文件下载
+
+文件上传模式,配置 `download-file` 事件,已上传的文件会显示下载按钮,点击下载按钮会触发 `download-file` 事件
+
+
+
+
+图片上传模式,配置 `download-file` 事件,已上传的文件会显示下载图标,点击下载按钮会触发 `download-file` 事件
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/drag.md b/examples/docs/resources/mobile-first/md/file-upload/drag.md
new file mode 100644
index 000000000..839917c05
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/drag.md
@@ -0,0 +1,24 @@
+
+
+### 拖拽上传
+
+设置 `list-type` 为 `drag-single`,开启单文件拖拽上传。
+
+
+
+
+可配置 `file-list` 属性展示对应的文件
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/file-upload-mobile-mf.md b/examples/docs/resources/mobile-first/md/file-upload/file-upload-mobile-mf.md
new file mode 100644
index 000000000..1e0c7207e
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/file-upload-mobile-mf.md
@@ -0,0 +1,15 @@
+
+
+### 基本用法
+
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/file-upload/multi-media.md b/examples/docs/resources/mobile-first/md/file-upload/multi-media.md
new file mode 100644
index 000000000..c198ca37b
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/multi-media.md
@@ -0,0 +1,22 @@
+
+
+### 多媒体上传
+
+在 `list-type` 为 `picture-card` 时,设置 `source-type` 为 `video/audio/picture` 时进行视频、音频、图片上传,`source-type` 支持 `video、audio、picture` 的互相组合
+
+
+同时在多媒体上传模式下,可配置hwh5属性,进行原生上传。可在 `trigger-click` 事件中进行文件选取操作并上传,可在 `play` 事件中进行音视频播放操作
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/picture.md b/examples/docs/resources/mobile-first/md/file-upload/picture.md
new file mode 100644
index 000000000..80ac530fd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/picture.md
@@ -0,0 +1,29 @@
+
+
+### 图片上传
+
+设置 `list-type` 为 `picture-single`,展示单图片模式。可配置 `file-list` 属性展示对应的图片
+
+
+
+
+设置 `list-type` 为 `picture-card`,展示图片墙模式。可配置 `file-list` 属性展示对应的图片
+
+
+
+
+设置 `show-name` 控制是否展示图片名字
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/preview.md b/examples/docs/resources/mobile-first/md/file-upload/preview.md
new file mode 100644
index 000000000..04103a883
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/preview.md
@@ -0,0 +1,24 @@
+
+
+### 文件预览
+
+文件上传模式,配置 `preview` 事件,已上传的文件会显示预览按钮,点击预览图标会触发 `preview` 事件。
+
+
+
+
+图片上传模式,配置 `preview` 事件,已上传的文件会显示预览图标,点击预览图标会触发 `preview` 事件。
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/re-upload.md b/examples/docs/resources/mobile-first/md/file-upload/re-upload.md
new file mode 100644
index 000000000..8851286d7
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/re-upload.md
@@ -0,0 +1,24 @@
+
+
+### 文件重新上传
+
+文件上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传按钮,点击重新上传按钮会触发 `re-upload` 事件
+
+
+
+
+图片上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传图标,点击重新上传按钮会触发 `re-upload` 事件
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/show-title.md b/examples/docs/resources/mobile-first/md/file-upload/show-title.md
new file mode 100644
index 000000000..6289ebd3d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/show-title.md
@@ -0,0 +1,24 @@
+
+
+### 隐藏标题
+
+配置 `show-title` 为 `false` 隐藏标题,默认为 `true`。
+
+
+
+
+通过 `title` 可自定义标题。
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/slots.md b/examples/docs/resources/mobile-first/md/file-upload/slots.md
new file mode 100644
index 000000000..7648e389d
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/slots.md
@@ -0,0 +1,19 @@
+
+
+### 插槽
+
+`assist-content` 辅助内容插槽
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/upload-event.md b/examples/docs/resources/mobile-first/md/file-upload/upload-event.md
new file mode 100644
index 000000000..0fb242d45
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/upload-event.md
@@ -0,0 +1,24 @@
+
+
+### 事件
+
+`trigger-click` 点击文件上传时触发的事件
+`preview` 点击预览时触发的事件
+`download-file` 点击下载时触发的事件
+`download-all` 点击全部下载时触发的事件
+`re-upload` 点击重新上传时触发的事件
+`click-file-list` 点击上传的文件列表时触发的事件
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/upload-file-list.md b/examples/docs/resources/mobile-first/md/file-upload/upload-file-list.md
new file mode 100644
index 000000000..d705298ff
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/upload-file-list.md
@@ -0,0 +1,19 @@
+
+
+### 上传的文件列表
+
+通过 `fileList` 配置需要显示的文件列表。
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/file-upload/video-audio.md b/examples/docs/resources/mobile-first/md/file-upload/video-audio.md
new file mode 100644
index 000000000..0d23329e2
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/file-upload/video-audio.md
@@ -0,0 +1,24 @@
+
+
+### 音视频上传
+
+在 `list-type` 为 `picture-single` 时,设置 `source-type` 为 `video` 时展示视频
+
+
+
+
+在 `list-type` 为 `picture-single` 时,设置 `source-type` 为 `audio` 时展示视频
+
+
+
diff --git a/examples/docs/resources/mobile-first/md/filter-bar/basic-usage.md b/examples/docs/resources/mobile-first/md/filter-bar/basic-usage.md
new file mode 100644
index 000000000..97b565e97
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/filter-bar/basic-usage.md
@@ -0,0 +1,28 @@
+
+
+### 基本用法
+
+
+
+### 选中项只读
+
+点击事件不改变选中项。
+
+
+
+### 插槽
+
+可使用右侧 `icon` 自定义插槽。
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/filter-bar/filter-bar-mf.md b/examples/docs/resources/mobile-first/md/filter-bar/filter-bar-mf.md
new file mode 100644
index 000000000..97b565e97
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/filter-bar/filter-bar-mf.md
@@ -0,0 +1,28 @@
+
+
+### 基本用法
+
+
+
+### 选中项只读
+
+点击事件不改变选中项。
+
+
+
+### 插槽
+
+可使用右侧 `icon` 自定义插槽。
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/filter/basic-usage.md b/examples/docs/resources/mobile-first/md/filter/basic-usage.md
new file mode 100644
index 000000000..bf01614ee
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/filter/basic-usage.md
@@ -0,0 +1,38 @@
+
+
+### 基本用法
+
+过滤类型 `type` 包括 `单选、多选、枚举单选 (radio | checkbox | enum-radio)`。
+
+
+
+### 面板每行标签数
+
+通过 `column-num` 属性设置面板每行标签数,默认值为 3。
+
+
+
+### 过滤组
+
+通过 `filter-group` 属性开启过滤组功能,`filter-value` 绑定过滤组的值。过滤组类型 `type` 包括 `单选、多选 (radio | checkbox)`。
+
+
+
+
+
+### 枚举单选
+
+设置过滤类型 `type: 'enum-radio'` 时,当前数据为枚举单选,通过 `showAll: true` 显示 `全部` 选择项。
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/filter/filter-mf.md b/examples/docs/resources/mobile-first/md/filter/filter-mf.md
new file mode 100644
index 000000000..bf01614ee
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/filter/filter-mf.md
@@ -0,0 +1,38 @@
+
+
+### 基本用法
+
+过滤类型 `type` 包括 `单选、多选、枚举单选 (radio | checkbox | enum-radio)`。
+
+
+
+### 面板每行标签数
+
+通过 `column-num` 属性设置面板每行标签数,默认值为 3。
+
+
+
+### 过滤组
+
+通过 `filter-group` 属性开启过滤组功能,`filter-value` 绑定过滤组的值。过滤组类型 `type` 包括 `单选、多选 (radio | checkbox)`。
+
+
+
+
+
+### 枚举单选
+
+设置过滤类型 `type: 'enum-radio'` 时,当前数据为枚举单选,通过 `showAll: true` 显示 `全部` 选择项。
+
+
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/flowchart/basic-usage.md b/examples/docs/resources/mobile-first/md/flowchart/basic-usage.md
new file mode 100644
index 000000000..ce1eec842
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/flowchart/basic-usage.md
@@ -0,0 +1,72 @@
+
+
+### 基本用法
+
+该组件可以用来定制流程图,不依赖其它库或组件。默认的实现支持有状态的节点和连线,支持节点和连线以及空白区域的点击事件。
+
+### 垂直图形
+
+
+
+### 水平图形
+
+
+
+节点属性:
+|名称|类型|描述|值|
+|--|--|--|--|
+|node.name|string|节点唯一标识|必选|
+|node.info|Object|节点属性|必选|
+|node.info.row|number|节点所在的行|必选|
+|node.info.col|number|节点所在的列|必选|
+|node.info.width|number|节点宽度或节点直径|shape 为 circle 时为 40,为 rectangle 时为 160|
+|node.info.height|number|节点高度|shape 为 rectangle 时有效为 56|
+|node.info.shape|string|节点形状| rectangle 或 circle|
+|node.info.status|number|节点状态|无默认值,可以为 config.status 所有 key 值|
+|node.info.other|Object|节点扩展|必选|
+|node.info.other.main|string|节点主描述|必选|
+|node.info.other.auxi|string|节点辅描述|必选|
+|node.info.other.error|string|失败节点 Tip 提示|必选|
+|node.hidden|boolean|节点是否隐藏|false|
+|node.renderOuter|function|节点的定制渲染,覆盖状态边框|undefined|
+|node.renderInner|function|节点的定制渲染,不覆盖状态边框|undefined|
+
+连线属性:
+|名称|类型|描述|值|
+|--|--|--|--|
+|link.from|string|连线起始节点|起始节点的 name|
+|link.to|string|连线结束节点|结束节点的 name|
+|link.fromJoint|string|连线在起始节点的出发位置|默认为 bottom,表示起始节点底部中间|
+|link.to|string|连线在结束节点的终止位置|默认为 top,表示结束节点顶部中间|
+|link.info|Object|连线属性|必选|
+|link.info.status|number|连线状态|必选|
+|link.info.style|string|连线样式|必选,为 solid 或 dashed|
+
+fromJoint、toJoint 连接点配置:
+值可以为 bottom、top、left、right,表示从底部中间、顶部中间、左侧中间、右侧中间;
+值也可以为变体 bottom-1/2、bottom-2/2,表示从底部左半部分中间、底部右半部分中间;
+值也可以为变体 bottom-1/3、bottom-2/3、bottom-3/3 等
+
+图形属性:
+|名称|类型|描述|值|
+|--|--|--|--|
+|config.width|number|图形宽度|如果配置宽度够用,就使用此配置宽度,否则使用图形实际需要宽度|
+|config.height|number|图形高度|如果配置高度够用,就使用此配置高度,否则使用图形实际需要高度|
+|config.gap|number|节点间距|大于 0 数字|
+|config.padding|number|图形内边距|大于 0 数字|
+|config.prior|string|折线优先方向|vertical 或 horizontal,对于水平图形,应使用 horizontal|
+|config.align|string|同行节点水平居中|不配置或 center|
+|config.status|Object|状态值和名称映射|必选|
+|config.colors|Object|状态值和颜色映射|必选,作为连线和节点边框颜色|
+|config.ongoingBackgroundColor|string|进行中节点背景色|必选|
+|config.popoverPlacement|string|Tip 提示位置|必选|
+
diff --git a/examples/docs/resources/mobile-first/md/flowchart/dot-mode.md b/examples/docs/resources/mobile-first/md/flowchart/dot-mode.md
new file mode 100644
index 000000000..7650f51be
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/flowchart/dot-mode.md
@@ -0,0 +1,22 @@
+
+
+### 点模式
+
+提供了节点组件 Node 用于定制多端流程图的节点样式
+
+### 点模式-垂直图形
+
+
+
+### 点模式-水平图形
+
+
diff --git a/examples/docs/resources/mobile-first/md/flowchart/flowchart-mf.md b/examples/docs/resources/mobile-first/md/flowchart/flowchart-mf.md
new file mode 100644
index 000000000..19287b058
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/flowchart/flowchart-mf.md
@@ -0,0 +1,72 @@
+
+
+### 基本用法
+
+该组件可以用来定制流程图,不依赖其它库或组件。默认的实现支持有状态的节点和连线,支持节点和连线以及空白区域的点击事件。
+
+### 垂直图形
+
+
+
+### 水平图形
+
+
+
+节点属性:
+|名称|类型|描述|值|
+|--|--|--|--|
+|node.name|string|节点唯一标识|必选|
+|node.info|Object|节点属性|必选|
+|node.info.row|number|节点所在的行|必选|
+|node.info.col|number|节点所在的列|必选|
+|node.info.width|number|节点宽度或节点直径|shape 为 circle 时为 40,为 rectangle 时为 160|
+|node.info.height|number|节点高度|shape 为 rectangle 时有效为 56|
+|node.info.shape|string|节点形状| rectangle 或 circle|
+|node.info.status|number|节点状态|无默认值,可以为 config.status 所有 key 值|
+|node.info.other|Object|节点扩展|必选|
+|node.info.other.main|string|节点主描述|必选|
+|node.info.other.auxi|string|节点辅描述|必选|
+|node.info.other.error|string|失败节点 Tip 提示|必选|
+|node.hidden|boolean|节点是否隐藏|false|
+|node.renderOuter|function|节点的定制渲染,覆盖状态边框|undefined|
+|node.renderInner|function|节点的定制渲染,不覆盖状态边框|undefined|
+
+连线属性:
+|名称|类型|描述|值|
+|--|--|--|--|
+|link.from|string|连线起始节点|起始节点的 name|
+|link.to|string|连线结束节点|结束节点的 name|
+|link.fromJoint|string|连线在起始节点的出发位置|默认为 bottom,表示起始节点底部中间|
+|link.to|string|连线在结束节点的终止位置|默认为 top,表示结束节点顶部中间|
+|link.info|Object|连线属性|必选|
+|link.info.status|number|连线状态|必选|
+|link.info.style|string|连线样式|必选,为 solid 或 dashed|
+
+fromJoint、toJoint 连接点配置:
+值可以为 bottom、top、left、right,表示从底部中间、顶部中间、左侧中间、右侧中间;
+值也可以为变体 bottom-1/2、bottom-2/2,表示从底部左半部分中间、底部右半部分中间;
+值也可以为变体 bottom-1/3、bottom-2/3、bottom-3/3 等
+
+图形属性:
+|名称|类型|描述|值|
+|--|--|--|--|
+|config.width|number|图形宽度|如果配置宽度够用,就使用此配置宽度,否则使用图形实际需要宽度|
+|config.height|number|图形高度|如果配置高度够用,就使用此配置高度,否则使用图形实际需要高度|
+|config.gap|number|节点间距|大于 0 数字|
+|config.padding|number|图形内边距|大于 0 数字|
+|config.prior|string|折线优先方向|vertical 或 horizontal,对于水平图形,应使用 horizontal|
+|config.align|string|同行节点水平居中|不配置或 center|
+|config.status|Object|状态值和名称映射|必选|
+|config.colors|Object|状态值和颜色映射|必选,作为连线和节点边框颜色|
+|config.ongoingBackgroundColor|string|进行中节点背景色|必选|
+|config.popoverPlacement|string|Tip 提示位置|必选|
+
\ No newline at end of file
diff --git a/examples/docs/resources/mobile-first/md/form/form-auto-width.md b/examples/docs/resources/mobile-first/md/form/form-auto-width.md
new file mode 100644
index 000000000..e08c934dd
--- /dev/null
+++ b/examples/docs/resources/mobile-first/md/form/form-auto-width.md
@@ -0,0 +1,14 @@
+
+
+### 行内表单
+
+当垂直方向空间受限且表单较简单时,可以在一行内放置表单,设置 `inline` 属性可以让表单域变为行内的表单域。
+
+
+
+
+
+
+## 移除表单项的校验结果
+
+
+
+Form 组件下的移除表单项的校验结果的方法。
+
+
+
+### 移除表单项的校验结果
+
+调用 `clearValidate` 方法移除表单项的校验结果。传入待移除的表单项的 `prop` 属性或者 `prop` 组成的数组,如不传则移除整个表单的校验结果。
+
+