feat: optimize demo css & docs for dialog

hellof2e · Aug 2, 2024 · 65d2462 · 65d2462
1 parent 606f483
commit 65d2462
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 31 deletions.
diff --git a/example/src/sites/doc/components/DemoPreview.vue b/example/src/sites/doc/components/DemoPreview.vue
@@ -25,10 +25,10 @@ export default defineComponent({
 	position: fixed;
 	right: 30px;
 	top: 88px;
-	min-height: 620px;
+	/* min-height: 620px; */
 	width: 360px;
 	iframe {
-		height: 590px;
+		height: 640px;
 		width: 100%;
 		border-radius: 12px;
 	}

diff --git a/example/src/sites/mobile-vue/App.vue b/example/src/sites/mobile-vue/App.vue
@@ -128,12 +128,12 @@ export default defineComponent({
 	}
 
 	.demo {
-		height: 100vh;
+		/* height: 100vh; */
 		background: #f5f5f9;
 		overflow-x: hidden;
 		overflow-y: auto;
-		padding: 70px 18px;
-		min-height: 668px;
+		padding: 70px 18px 20px;
+		/* min-height: 668px; */
 
 		&.no-padding {
 			padding: 57px 0 70px 0;

diff --git a/packages/quarkd/src/dialog/demo.vue b/packages/quarkd/src/dialog/demo.vue
@@ -74,9 +74,7 @@
     </quark-dialog>
     <!-- 标签用法 end -->
 
-    <!-- 自定义title start -->
-    <!-- <h2>{{ translate("customTitle") }}</h2> -->
-    <h2>Title</h2>
+    <h2>{{ translate("customTitle") }}</h2>
     <quark-cell-group>
       <quark-cell
         islink
@@ -117,7 +115,7 @@
 
     <!-- 自定义 footer start -->
     <!-- <h2>{{ translate("customFooter") }}</h2> -->
-    <h2>Footer</h2>
+    <h2>{{ translate("customFooterTitle") }}</h2>
     <quark-cell-group>
       <quark-cell
         islink
@@ -192,15 +190,16 @@ export default createDemo({
           basicDialog: "基础弹窗",
           showCloseButton: "隐藏关闭按钮",
           alignLeft: "内容居左对齐",
-          customFooter: "Footer 自定义",
-          noFooter: "Footer 隐藏",
+          customFooter: "自定义底部",
+          noFooter: "隐藏底部",
           title: "这是一句话就能说清楚的确认弹窗，所以只有标题",
           content:
             "生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。",
           text: "代码是写出来给人看的，附带能在机器上运行",
           okText: "知道了",
-          customTitle: "Title 自定义",
-          noTitle: "Title 隐藏",
+          customTitle: "自定义标题",
+          noTitle: "隐藏标题",
+          customFooterTitle: "自定义底部",
         },
         "en-US": {
           basic: "Basic use",
@@ -221,6 +220,7 @@ export default createDemo({
           okText: "Got it",
           noTitle: "Title hide",
           customTitle: "Custom title",
+          customFooterTitle: "Custom Footer",
         },
       });
     });

diff --git a/packages/quarkd/src/dialog/doc.en-US.md b/packages/quarkd/src/dialog/doc.en-US.md
@@ -82,31 +82,53 @@ Buttons can be arranged vertically by setting the property `btnvertical`.
 </quark-dialog>
 ```
 
-### custom title/footer
+### Custom Title
 
-Set custom title/footer via `slot='title'` , `slot='footer'`.
+#### Custom title
 
-```html
-<div @click="open = true">Open Dialog</div>
+Set custom title via `slot='title'` , `slot='footer'`.
 
+```html
 <quark-dialog
   :content="translate('content')"
   :open="open"
   @close="open = false"
 >
   <div slot="title">custom title</div>
-  <div slot="footer">custom footer</div>
 </quark-dialog>
 ```
 
-### Hide title/footer
+#### Hide title
 
 Hide the title/footer by passing in the `notitle`, `nofooter` properties.
 
 ```html
-<div @click="open = true">Open Dialog</div>
+<quark-dialog notitle :open="open">
+  The code is written for people to see, with the addition of running on the
+  machine
+</quark-dialog>
+```
+
+### Custom Footer
+
+Set custom title via `slot='footer'`.
+
+```html
+<quark-dialog
+  :content="translate('content')"
+  :open="open"
+  @close="open = false"
+>
+  <div slot="footer">custom footer</div>
+</quark-dialog>
+```
 
-<quark-dialog notitle nofooter :open="open">
+#### Hide footer
+
+Hide the footer by passing in the `nofooter` properties.
+
+```html
+<quark-dialog nofooter nofooter :open="open">
   The code is written for people to see, with the addition of running on the
   machine
 </quark-dialog>

diff --git a/packages/quarkd/src/dialog/doc.zh-CN.md b/packages/quarkd/src/dialog/doc.zh-CN.md
@@ -89,9 +89,11 @@ import "quarkd/lib/dialog";
 </quark-dialog>
 ```
 
-### 自定义标题/footer
+### 自定义标题
 
-通过 `slot='title'` 、`slot='footer'` 设置自定义 title/footer。
+通过 `slot='title'` 设置自定义 title。
+
+#### 自定义标题
 
 ```html
 <div @click="open = true">Open Dialog</div>
@@ -102,18 +104,41 @@ import "quarkd/lib/dialog";
   @close="open = false"
 >
   <div slot="title">自定义标题</div>
-  <div slot="footer">自定义footer</div>
 </quark-dialog>
 ```
 
-### 隐藏 title/footer
+#### 隐藏标题
 
-通过传入 `notitle`、 `nofooter` 属性隐藏 title/footer。
+通过传入 `notitle` 属性隐藏 title。
 
 ```html
-<div @click="open = true">Open Dialog</div>
+<quark-dialog notitle :open="open">
+  代码是写出来给人看的，附带能在机器上运行
+</quark-dialog>
+```
+
+### 自定义底部
+
+#### 自定义底部
+
+通过 `slot='footer'` 设置自定义 footer。
+
+```html
+<quark-dialog
+  :content="translate('content')"
+  :open="open"
+  @close="open = false"
+>
+  <div slot="footer">自定义footer</div>
+</quark-dialog>
+```
+
+#### 隐藏 footer
 
-<quark-dialog notitle nofooter :open="open">
+通过传入 `nofooter` 属性隐藏 footer。
+
+```html
+<quark-dialog nofooter :open="open">
   代码是写出来给人看的，附带能在机器上运行
 </quark-dialog>
 ```

diff --git a/packages/quarkd/src/list/doc.en-US.md b/packages/quarkd/src/list/doc.en-US.md
@@ -126,10 +126,10 @@ methods: {
 
 ### PullRefresh
 
-Can be used with `pull-refresh` component.
+Can be used with `pullrefresh` component.
 
 ```tsx
-import "quarkd/lib/pull-refresh";
+import "quarkd/lib/pullrefresh";
 ```
 
 ```html

diff --git a/packages/quarkd/src/list/doc.zh-CN.md b/packages/quarkd/src/list/doc.zh-CN.md
@@ -129,7 +129,7 @@ methods: {
 可以和下拉刷新组件联合使用
 
 ```tsx
-import "quarkd/lib/pull-refresh";
+import "quarkd/lib/pullrefresh";
 ```
 
 ```html