feat: empty border style

hellof2e · May 12, 2023 · d8d189e · d8d189e
1 parent 5aa80e9
commit d8d189e
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 79 deletions.
diff --git a/packages/quarkd/src/empty/demo.vue b/packages/quarkd/src/empty/demo.vue
@@ -10,6 +10,14 @@
       :desc="translate('order')"
     />
 
+    <h2>{{ translate("button") }}</h2>
+    <quark-empty
+      image="https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png"
+      :title="translate('title')"
+      :desc="translate('order')"
+      :buttontext="translate('buttontext')"
+    />
+
     <h2>{{ translate("image") }}</h2>
     <quark-empty
       image="https://m.hellobike.com/resource/helloyun/13459/UxNf7LpJ2G.png"
@@ -35,22 +43,24 @@ export default createDemo({
         "zh-CN": {
           basic: "基础用法",
           desc: "描述文字",
+          button: "底部按钮",
           image: "自定义图片",
           bottom: "自定义底部",
           title: "没有历史订单",
           order: "快去下一单吧!",
           return: "自定义底部",
-          button: "去下单",
+          buttontext: "去下单",
         },
         "en-US": {
           basic: "Basic Usage",
           desc: "Description",
+          button: "Button",
           image: "Custom Image",
           bottom: "Csutom Bottom",
           title: "No Order History",
           order: "Go and Order!",
           return: "Csutom Bottom",
-          button: "Go to Order",
+          buttontext: "Go to Order",
         },
       });
     });

diff --git a/packages/quarkd/src/empty/doc-react.en-US.md b/packages/quarkd/src/empty/doc-react.en-US.md
@@ -22,6 +22,12 @@ import { Empty } from "@quarkd/quark-react";
 <Empty title="no data" desc="add data now~" />
 ```
 
+### Button
+
+```html
+<Empty title="no data" desc="add data now~" buttontext="go to Order" />
+```
+
 ### Custom Image Size
 
 ```html
@@ -54,27 +60,36 @@ import { Empty } from "@quarkd/quark-react";
 
 ### Props
 
-| Attribute | Description | Type     | Default |
-| --------- | ----------- | -------- | ------- |
-| title     | Title       | `string` |         |
-| desc      | Description | `string` |         |
-| image     | image url   | `string` |         |
-| imagesize | image size  | `string` |         |
+| Attribute  | Description | Type     | Default |
+| ---------- | ----------- | -------- | ------- |
+| title      | Title       | `string` |         |
+| desc       | Description | `string` |         |
+| image      | image url   | `string` |         |
+| imagesize  | image size  | `string` |         |
+| buttontext | button text | `string` |         |
 
 ## CSS Variables
 
 The component provides the following [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), which can be used to customize styles. Please refer to [ConfigProvider component](#/zh-CN/guide/theme).
 
-| Name                        | Description               | Default    |
-| --------------------------- | ------------------------- | ---------- |
-| `--empty-padding`           | Container padding         | `32px 0`   |
-| `--empty-title-font-size`   | Title font size           | `16px`     |
-| `--empty-image-width`       | Image width               | `191px`    |
-| `--empty-title-color`       | Title font color          | `#242729`  |
-| `--empty-title-line-height` | Title line-height         | `22px`     |
-| `--empty-title-white-space` | Whether title change line | `pre-wrap` |
-| `--empty-desc-font-size`    | Desc font size            |
-| `--empty-desc-color`        | Desc font color           | `#969799`  |
-| `--empty-desc-line-height`  | Desc line-height          | `20px`     |
-| `--empty-desc-width`        | Desc font width           |
-| `--empty-desc-white-space`  | Whether desc change line  | `pre-wrap` |
+| Name                              | Description               | Default    |
+| --------------------------------- | ------------------------- | ---------- |
+| `--empty-padding`                 | Container padding         | `32px 0`   |
+| `--empty-title-font-size`         | Title font size           | `16px`     |
+| `--empty-image-width`             | Image width               | `191px`    |
+| `--empty-title-color`             | Title font color          | `#242729`  |
+| `--empty-title-line-height`       | Title line-height         | `22px`     |
+| `--empty-title-white-space`       | Whether title change line | `pre-wrap` |
+| `--empty-desc-font-size`          | Desc font size            |
+| `--empty-desc-color`              | Desc font color           | `#969799`  |
+| `--empty-desc-line-height`        | Desc line-height          | `20px`     |
+| `--empty-desc-width`              | Desc font width           |
+| `--empty-desc-white-space`        | Whether desc change line  | `pre-wrap` |
+| `--empty-button-font-size`        | Button font size          | `16px`     |
+| `--empty-button-text-color`       | Button text color         | `#fff`     |
+| `--empty-button-margin-top`       | Button margin top         | `20px`     |
+| `--empty-button-background-color` | Button background color   | `#0088ff`  |
+| `--empty-button-line-height`      | Button line height        | `22px`     |
+| `--empty-button-padding-column`   | Button padding column     | `9px`      |
+| `--empty-button-padding-row`      | Button padding row        | `34px`     |
+| `--empty-button-border-radius`    | Button border radius      | `20px`     |
diff --git a/packages/quarkd/src/empty/doc-react.zh-CN.md b/packages/quarkd/src/empty/doc-react.zh-CN.md
@@ -22,6 +22,12 @@ import { Empty } from "@quarkd/quark-react";
 <Empty title="描述文字" desc="快去添加数据吧~" />
 ```
 
+### 底部按钮
+
+```html
+<Empty title="暂无数据" desc="快去添加数据吧~" buttontext="快去下单吧" />
+```
+
 ### 自定义图片大小
 
 通过 `imagesize` 属性图片的大小。
@@ -60,27 +66,36 @@ import { Empty } from "@quarkd/quark-react";
 
 ### Props
 
-| 参数      | 说明     | 类型     | 默认值 |
-| --------- | -------- | -------- | ------ |
-| title     | 标题文字 | `string` |        |
-| desc      | 描述文字 | `string` |        |
-| image     | 图片 url | `string` |        |
-| imagesize | 图片大小 | `string` |        |
+| 参数       | 说明         | 类型     | 默认值 |
+| ---------- | ------------ | -------- | ------ |
+| title      | 标题文字     | `string` |        |
+| desc       | 描述文字     | `string` |        |
+| image      | 图片 url     | `string` |        |
+| imagesize  | 图片大小     | `string` |        |
+| buttontext | 底部按钮文字 | `string` |        |
 
 ## 样式变量
 
 组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。
 
-| 名称                        | 说明             | 默认值     |
-| --------------------------- | ---------------- | ---------- |
-| `--empty-padding`           | 空白页容器内边距 | `32px 0`   |
-| `--empty-title-font-size`   | 标题字体大小     | `16px`     |
-| `--empty-image-width`       | 图片宽度         | `191px`    |
-| `--empty-title-color`       | 标题字体颜色     | `#242729`  |
-| `--empty-title-line-height` | 标题字体行高     | `22px`     |
-| `--empty-title-white-space` | 标题是否换行     | `pre-wrap` |
-| `--empty-desc-font-size`    | 描述字体大小     |
-| `--empty-desc-color`        | 描述字体颜色     | `#969799`  |
-| `--empty-desc-line-height`  | 描述字体行高     | `20px`     |
-| `--empty-desc-width`        | 描述字体最大宽度 |
-| `--empty-desc-white-space`  | 描述是否换行     | `pre-wrap` |
+| 名称                              | 说明             | 默认值     |
+| --------------------------------- | ---------------- | ---------- |
+| `--empty-padding`                 | 空白页容器内边距 | `32px 0`   |
+| `--empty-title-font-size`         | 标题字体大小     | `16px`     |
+| `--empty-image-width`             | 图片宽度         | `191px`    |
+| `--empty-title-color`             | 标题字体颜色     | `#242729`  |
+| `--empty-title-line-height`       | 标题字体行高     | `22px`     |
+| `--empty-title-white-space`       | 标题是否换行     | `pre-wrap` |
+| `--empty-desc-font-size`          | 描述字体大小     |
+| `--empty-desc-color`              | 描述字体颜色     | `#969799`  |
+| `--empty-desc-line-height`        | 描述字体行高     | `20px`     |
+| `--empty-desc-width`              | 描述字体最大宽度 |
+| `--empty-desc-white-space`        | 描述是否换行     | `pre-wrap` |
+| `--empty-button-font-size`        | 按钮文字大小     | `16px`     |
+| `--empty-button-text-color`       | 按钮文字颜色     | `#fff`     |
+| `--empty-button-margin-top`       | 按钮文字间距     | `20px`     |
+| `--empty-button-background-color` | 按钮背景色       | `#0088ff`  |
+| `--empty-button-line-height`      | 按钮文字行高     | `22px`     |
+| `--empty-button-padding-column`   | 按钮上下内边距   | `9px`      |
+| `--empty-button-padding-row`      | 按钮左右内边距   | `34px`     |
+| `--empty-button-border-radius`    | 按钮圆角         | `20px`     |
diff --git a/packages/quarkd/src/empty/doc.en-US.md b/packages/quarkd/src/empty/doc.en-US.md
@@ -22,6 +22,12 @@ import "quarkd/lib/empty";
 <quark-empty title="no data" desc="add data now~" />
 ```
 
+### Button
+
+```html
+<quark-empty title="no data" desc="add data now~" buttontext="go to Order" />
+```
+
 ### Custom Image Size
 
 ```html
@@ -61,27 +67,36 @@ import "quarkd/lib/empty";
 
 ### Props
 
-| Attribute | Description | Type     | Default |
-| --------- | ----------- | -------- | ------- |
-| title     | Title       | `string` |         |
-| desc      | Description | `string` |         |
-| image     | image url   | `string` |         |
-| imagesize | image size  | `string` |         |
+| Attribute  | Description | Type     | Default |
+| ---------- | ----------- | -------- | ------- |
+| title      | Title       | `string` |         |
+| desc       | Description | `string` |         |
+| image      | image url   | `string` |         |
+| imagesize  | image size  | `string` |         |
+| buttontext | button text | `string` |         |
 
 ## CSS Variables
 
 The component provides the following [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), which can be used to customize styles. Please refer to [ConfigProvider component](#/zh-CN/guide/theme).
 
-| Name                        | Description               | Default    |
-| --------------------------- | ------------------------- | ---------- |
-| `--empty-padding`           | Container padding         | `32px 0`   |
-| `--empty-title-font-size`   | Title font size           | `16px`     |
-| `--empty-image-width`       | Image width               | `191px`    |
-| `--empty-title-color`       | Title font color          | `#242729`  |
-| `--empty-title-line-height` | Title line-height         | `22px`     |
-| `--empty-title-white-space` | Whether title change line | `pre-wrap` |
-| `--empty-desc-font-size`    | Desc font size            |
-| `--empty-desc-color`        | Desc font color           | `#969799`  |
-| `--empty-desc-line-height`  | Desc line-height          | `20px`     |
-| `--empty-desc-width`        | Desc font width           |
-| `--empty-desc-white-space`  | Whether desc change line  | `pre-wrap` |
+| Name                              | Description               | Default    |
+| --------------------------------- | ------------------------- | ---------- |
+| `--empty-padding`                 | Container padding         | `32px 0`   |
+| `--empty-title-font-size`         | Title font size           | `16px`     |
+| `--empty-image-width`             | Image width               | `191px`    |
+| `--empty-title-color`             | Title font color          | `#242729`  |
+| `--empty-title-line-height`       | Title line-height         | `22px`     |
+| `--empty-title-white-space`       | Whether title change line | `pre-wrap` |
+| `--empty-desc-font-size`          | Desc font size            |
+| `--empty-desc-color`              | Desc font color           | `#969799`  |
+| `--empty-desc-line-height`        | Desc line-height          | `20px`     |
+| `--empty-desc-width`              | Desc font width           |
+| `--empty-desc-white-space`        | Whether desc change line  | `pre-wrap` |
+| `--empty-button-font-size`        | Button font size          | `16px`     |
+| `--empty-button-text-color`       | Button text color         | `#fff`     |
+| `--empty-button-margin-top`       | Button margin top         | `20px`     |
+| `--empty-button-background-color` | Button background color   | `#0088ff`  |
+| `--empty-button-line-height`      | Button line height        | `22px`     |
+| `--empty-button-padding-column`   | Button padding column     | `9px`      |
+| `--empty-button-padding-row`      | Button padding row        | `34px`     |
+| `--empty-button-border-radius`    | Button border radius      | `20px`     |
diff --git a/packages/quarkd/src/empty/doc.zh-CN.md b/packages/quarkd/src/empty/doc.zh-CN.md
@@ -22,6 +22,12 @@ import "quarkd/lib/empty";
 <quark-empty title="暂无数据" desc="快去添加数据吧~" />
 ```
 
+### 底部按钮
+
+```html
+<quark-empty title="暂无数据" desc="快去添加数据吧~" buttontext="快去下单吧" />
+```
+
 ### 自定义图片大小
 
 通过 `imagesize` 属性图片的大小。
@@ -58,27 +64,36 @@ import "quarkd/lib/empty";
 
 ### Props
 
-| 参数      | 说明     | 类型     | 默认值 |
-| --------- | -------- | -------- | ------ |
-| title     | 标题文字 | `string` |        |
-| desc      | 描述文字 | `string` |        |
-| image     | 图片 url | `string` |        |
-| imagesize | 图片大小 | `string` |        |
+| 参数       | 说明         | 类型     | 默认值 |
+| ---------- | ------------ | -------- | ------ |
+| title      | 标题文字     | `string` |        |
+| desc       | 描述文字     | `string` |        |
+| image      | 图片 url     | `string` |        |
+| imagesize  | 图片大小     | `string` |        |
+| buttontext | 底部按钮文字 | `string` |        |
 
 ## 样式变量
 
 组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。
 
-| 名称                        | 说明             | 默认值     |
-| --------------------------- | ---------------- | ---------- |
-| `--empty-padding`           | 空白页容器内边距 | `32px 0`   |
-| `--empty-title-font-size`   | 标题字体大小     | `16px`     |
-| `--empty-image-width`       | 图片宽度         | `191px`    |
-| `--empty-title-color`       | 标题字体颜色     | `#242729`  |
-| `--empty-title-line-height` | 标题字体行高     | `22px`     |
-| `--empty-title-white-space` | 标题是否换行     | `pre-wrap` |
-| `--empty-desc-font-size`    | 描述字体大小     |
-| `--empty-desc-color`        | 描述字体颜色     | `#969799`  |
-| `--empty-desc-line-height`  | 描述字体行高     | `20px`     |
-| `--empty-desc-width`        | 描述字体最大宽度 |
-| `--empty-desc-white-space`  | 描述是否换行     | `pre-wrap` |
+| 名称                              | 说明             | 默认值     |
+| --------------------------------- | ---------------- | ---------- |
+| `--empty-padding`                 | 空白页容器内边距 | `32px 0`   |
+| `--empty-title-font-size`         | 标题字体大小     | `16px`     |
+| `--empty-image-width`             | 图片宽度         | `191px`    |
+| `--empty-title-color`             | 标题字体颜色     | `#242729`  |
+| `--empty-title-line-height`       | 标题字体行高     | `22px`     |
+| `--empty-title-white-space`       | 标题是否换行     | `pre-wrap` |
+| `--empty-desc-font-size`          | 描述字体大小     |
+| `--empty-desc-color`              | 描述字体颜色     | `#969799`  |
+| `--empty-desc-line-height`        | 描述字体行高     | `20px`     |
+| `--empty-desc-width`              | 描述字体最大宽度 |
+| `--empty-desc-white-space`        | 描述是否换行     | `pre-wrap` |
+| `--empty-button-font-size`        | 按钮文字大小     | `16px`     |
+| `--empty-button-text-color`       | 按钮文字颜色     | `#fff`     |
+| `--empty-button-margin-top`       | 按钮文字间距     | `20px`     |
+| `--empty-button-background-color` | 按钮背景色       | `#0088ff`  |
+| `--empty-button-line-height`      | 按钮文字行高     | `22px`     |
+| `--empty-button-padding-column`   | 按钮上下内边距   | `9px`      |
+| `--empty-button-padding-row`      | 按钮左右内边距   | `34px`     |
+| `--empty-button-border-radius`    | 按钮圆角         | `20px`     |
diff --git a/packages/quarkd/src/empty/index.tsx b/packages/quarkd/src/empty/index.tsx
@@ -4,6 +4,7 @@ import style from "./style.css";
 export interface Props {
   title?: string;
   desc?: string;
+  buttontext?: string;
   image?: string;
   imagesize?: string;
 }
@@ -28,6 +29,9 @@ class QuarkEmpty extends QuarkElement {
   @property()
   imagesize: string;
 
+  @property()
+  buttontext = "";
+
   render() {
     return (
       <Fragment>
@@ -48,7 +52,11 @@ class QuarkEmpty extends QuarkElement {
           />
           {this.title && <div class="quark-empty-title">{this.title}</div>}
           {this.desc && <div class="quark-empty-desc">{this.desc}</div>}
-          <slot name="footer"></slot>
+          <slot name="footer">
+            {this.buttontext && (
+              <div class="quark-empty-button">{this.buttontext}</div>
+            )}
+          </slot>
         </div>
       </Fragment>
     );

diff --git a/packages/quarkd/src/empty/style.css b/packages/quarkd/src/empty/style.css
@@ -45,3 +45,18 @@
 :host .quark-empty-desc:empty {
   margin-top: 0;
 }
+:host .quark-empty-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: var(--empty-button-font-size, 16px);
+  color: var(--empty-button-text-color, #fff);
+  font-weight: 500;
+  font-family: PingFangSC-Medium, PingFang SC;
+  margin-top: var(--empty-button-margin-top, 20px);;
+  background-color: var(--empty-button-background-color, quark-primaryColor);
+  line-height: var(--empty-button-line-height, 22px);
+  padding: var(--empty-button-padding-column, 9px) var(--empty-button-padding-row, 34px);
+  border-radius: var(--empty-button-border-radius, 20px);
+}