diff --git a/docs/zh/components/container.md b/docs/zh/components/container.md index 19aa4cbc..974583fe 100644 --- a/docs/zh/components/container.md +++ b/docs/zh/components/container.md @@ -17,6 +17,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 页面内容较少时，container 也会填满主区域： +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_normal_short@2x.png) 页面有较多内容时会在侧面产生滚动条 @@ -25,6 +33,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 支持 header 和 footer 插槽，两个区域分别会固定在主体区域的顶部和底部，内容压缩至中间 +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_slot_short@2x.png) 如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间 @@ -33,6 +51,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示 +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_short@2x.png) 超出一屏后在滚动时显示自定义滚动条 @@ -41,12 +67,30 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会出现在 header 和 footer 之间 +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_long-slot@2x.png) ## card 卡片模式适用于简单的小页面，可以方便地实现下面的布局效果： +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_normal_short@2x.png) 如果内容超出一屏长度，会在右侧显示滚动条 @@ -59,6 +103,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部 +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_slot_short@2x.png) 如果使用插槽后内容超出一屏，滚动条会在 header 和 footer 之间显示 @@ -71,6 +125,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 设置 scroll 属性可以启用自定义滚动条，滚动条在内容不满一屏时不会显示 +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_bs_short@2x.png) 超出一屏后在滚动时显示自定义滚动条 @@ -79,6 +141,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示 +``` vue + +``` + ![](http://fairyever.qiniudn.com/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png) 如果使用插槽后内容超出一屏，自定义滚动条滚动到底部后主体区域依然会距离底部 20px 距离 @@ -89,6 +161,26 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容 ghost 模式适合对页面有定制需求的用户，此模式生成一个没有背景颜色的页面区域 +``` vue + +``` + +该模式默认没有内边距，示例中的内边距样式需要自行添加，比如可以在组件内嵌添加一层带有 .d2-pt 和 .d2-pb class 的 div，像下面这样 + +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_normal_short@2x.png) 如果内容超出一屏长度，会在右侧显示滚动条 @@ -97,6 +189,30 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没 支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部 +``` vue + +``` + +如果你希望有内边距： + +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_slot_short@2x.png) 如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间 @@ -105,6 +221,26 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没 设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示 +``` vue + +``` + +同样，如果你希望有内边距： + +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_short@2x.png) 超出一屏后在滚动时显示自定义滚动条 @@ -113,6 +249,30 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没 如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示 +``` vue + +``` + +有内边距： + +``` vue + +``` + ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_long-slot@2x.png) ## 注 diff --git a/package.json b/package.json index 935a63de..0d95ce64 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "mockjs": "^1.0.1-beta3", "papaparse": "^4.3.6", "particles.js": "^2.0.0", - "path-posix": "^1.0.0", "quill": "^1.3.4", "screenfull": "^3.3.2", "simplemde": "^1.11.2", diff --git a/public/script/D2 Admin _ 页面容器.html.REMOVED.git-id b/public/script/D2 Admin _ 页面容器.html.REMOVED.git-id new file mode 100644 index 00000000..cba7209f --- /dev/null +++ b/public/script/D2 Admin _ 页面容器.html.REMOVED.git-id @@ -0,0 +1 @@ +ca3041fad6584ca08b9644dea53fc35fb22c1340 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/0.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/0.js.REMOVED.git-id new file mode 100644 index 00000000..fdb44aed --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/0.js.REMOVED.git-id @@ -0,0 +1 @@ +d9cbf81aa5b093333bb37b2d7646629c69e7af09 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/1.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/1.js.REMOVED.git-id new file mode 100644 index 00000000..dfafaeb9 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/1.js.REMOVED.git-id @@ -0,0 +1 @@ +a9aa143df056f6efd0b9a4b4389edf8a7e992a30 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png.REMOVED.git-id new file mode 100644 index 00000000..76b2d360 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png.REMOVED.git-id @@ -0,0 +1 @@ +7c142f7d1761e08cd0d149ef48035f992edc49c6 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-06-18-space-main@2x.png.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-06-18-space-main@2x.png.REMOVED.git-id new file mode 100644 index 00000000..421296c9 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-06-18-space-main@2x.png.REMOVED.git-id @@ -0,0 +1 @@ +084a49e870170734fd082f0ff5ea9f1a55a1bbe9 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/5.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/5.js.REMOVED.git-id new file mode 100644 index 00000000..c2a1d680 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/5.js.REMOVED.git-id @@ -0,0 +1 @@ +c371170de44b576d18863afbf90d5ed93f7e0b9b \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.16c05c072aa7d1e80f5f.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.16c05c072aa7d1e80f5f.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..f452d3d7 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.16c05c072aa7d1e80f5f.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +f9c743a42479bb60c4ea6814d9c6249d5f111920 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.1a86ff7b0854a3b20ddb.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.1a86ff7b0854a3b20ddb.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..ce8ff325 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.1a86ff7b0854a3b20ddb.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +113965b918b3129d4c47460939dff74734a6abd3 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.2bbfd08d387098c2cc24.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.2bbfd08d387098c2cc24.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..e54f6e25 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.2bbfd08d387098c2cc24.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +7e2cf6fcadebade1312a895397814bf3281c2ebb \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.31f66d13256dff2e041d.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.31f66d13256dff2e041d.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..d41b86be --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.31f66d13256dff2e041d.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +db920e673e1c1e6a4be6e0bbf7062f7e5533a8f6 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.33b0903ae2680b6cc5d1.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.33b0903ae2680b6cc5d1.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..625fcfdc --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.33b0903ae2680b6cc5d1.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +ed7a78e0062678b0ea8978c60105fbd640e7a775 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.405819c2931faa9728b2.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.405819c2931faa9728b2.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..3b274901 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.405819c2931faa9728b2.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +a3935847dc878246a8391122053974502e754a33 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.4337175c9890009f0cba.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.4337175c9890009f0cba.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..a48b9ff9 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.4337175c9890009f0cba.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +e5337c58e510c34b302d729ef9d51030a919c1e6 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.695c4faf6c467ef228b9.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.695c4faf6c467ef228b9.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..b9cd2a26 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.695c4faf6c467ef228b9.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +ce86f8bb8ce0a55c8768afbe3006fc33464840e0 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.73f7958accdaaf450882.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.73f7958accdaaf450882.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..e9b87c62 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.73f7958accdaaf450882.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +86367437b595a9f512586d2ceda8a6ce4431014a \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.90f95ed9c8637880bd76.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.90f95ed9c8637880bd76.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..f05be61d --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.90f95ed9c8637880bd76.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +10eb99c7fc336bb162cae103d20f6b351fe63876 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.9d0facf2c7be3274e32f.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.9d0facf2c7be3274e32f.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..5989ff55 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.9d0facf2c7be3274e32f.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +ccaaa86c08e8a3092ae0bf03034715b3b57a12a1 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.9fbf1ac904a38577f62d.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.9fbf1ac904a38577f62d.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..3a39e451 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.9fbf1ac904a38577f62d.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +69319a69f0c7f05c7340d1955d7c5ef8547fc1ac \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.bb059bb0e8823ffabaac.hot-update.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.bb059bb0e8823ffabaac.hot-update.js.REMOVED.git-id new file mode 100644 index 00000000..1389ecb0 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.bb059bb0e8823ffabaac.hot-update.js.REMOVED.git-id @@ -0,0 +1 @@ +e7dae1b2d8b5763f784ff516134304f490610711 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/8.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/8.js.REMOVED.git-id new file mode 100644 index 00000000..4f039c77 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/8.js.REMOVED.git-id @@ -0,0 +1 @@ +a0aae6a6cf78a737b01add2a71941c98c5583de0 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/9.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/9.js.REMOVED.git-id new file mode 100644 index 00000000..ce1315bf --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/9.js.REMOVED.git-id @@ -0,0 +1 @@ +86372efafa6eacbe78c86d279b060474dc4c106d \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/app.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/app.js.REMOVED.git-id new file mode 100644 index 00000000..4476dd23 --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/app.js.REMOVED.git-id @@ -0,0 +1 @@ +9ea54d9c4f8651004bb433336047e48a9179c923 \ No newline at end of file diff --git a/public/script/D2 Admin _ 页面容器_files/hm.js.REMOVED.git-id b/public/script/D2 Admin _ 页面容器_files/hm.js.REMOVED.git-id new file mode 100644 index 00000000..f9bde16e --- /dev/null +++ b/public/script/D2 Admin _ 页面容器_files/hm.js.REMOVED.git-id @@ -0,0 +1 @@ +c27d9abe287ab7ecc39ef5d9ca36fb712ac8605f \ No newline at end of file diff --git a/src/store/modules/d2admin.js.REMOVED.git-id b/src/store/modules/d2admin.js.REMOVED.git-id index 0c776a3c..374fe2b7 100644 --- a/src/store/modules/d2admin.js.REMOVED.git-id +++ b/src/store/modules/d2admin.js.REMOVED.git-id @@ -1 +1 @@ -1e89dc28cf748ef4d1f3174b7b791e527d4a4c1b \ No newline at end of file +37e7e9944cffb10558313e68774d41f91ba60d16 \ No newline at end of file