feat(pullrefresh): support background customization (#294)

* feat(pullrefresh): support background customization * chore(pullrefresh): add react doc
hellof2e · Aug 2, 2023 · 5e7af1e · 5e7af1e
1 parent bae3e6d
commit 5e7af1e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,4 +18,6 @@ umd
 tsc
 dist
 site_docs
-types
+types
+
+*.tgz
diff --git a/packages/quarkd/src/pullrefresh/doc-react.en-US.md b/packages/quarkd/src/pullrefresh/doc-react.en-US.md
@@ -98,3 +98,13 @@ Use slots to custom tips.
 | pulling | Content of head when at pulling |
 | loosing | Content of head when at loosing |
 | loading | Content of head when at loading |
+
+## 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[Theme customization](#/zh-CN/guide/theme)。
+
+| Name                      | Description                                                                                                               | Default Value |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `--pull-refresh-bg-light` | background under light mode                                                                                               | transparent   |
+| `--pull-refresh-bg-dark`  | background under dark mode                                                                                                | #0088ff       |
+| `--pull-refresh-bg`       | background，will be overridden by `--pull-refresh-bg-light` under light mode and `--pull-refresh-bg-dark` under dark mode | 无            |
diff --git a/packages/quarkd/src/pullrefresh/doc-react.zh-CN.md b/packages/quarkd/src/pullrefresh/doc-react.zh-CN.md
@@ -102,3 +102,13 @@ export default () => {
 | pulling | 下拉过程中的顶部提示信息 |      |
 | loosing | 释放过程中的顶部提示信息 |      |
 | loading | 加载过程中的顶部提示信息 |      |
+
+## 样式变量
+
+组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。
+
+| 名称                      | 说明                                                                                             | 默认值      |
+| ------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
+| `--pull-refresh-bg-light` | light 模式下拉背景                                                                               | transparent |
+| `--pull-refresh-bg-dark`  | dark 模式下拉背景                                                                                | #0088ff     |
+| `--pull-refresh-bg`       | 下拉背景，在 light 和 dark 模式下会分别被`--pull-refresh-bg-light`和`--pull-refresh-bg-dark`覆盖 | 无          |
diff --git a/packages/quarkd/src/pullrefresh/doc.en-US.md b/packages/quarkd/src/pullrefresh/doc.en-US.md
@@ -91,3 +91,13 @@ Use slots to custom tips.
 | pulling | Content of head when at pulling |
 | loosing | Content of head when at loosing |
 | loading | Content of head when at loading |
+
+## 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[Theme customization](#/zh-CN/guide/theme)。
+
+| Name                      | Description                                                                                                               | Default Value |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `--pull-refresh-bg-light` | background under light mode                                                                                               | transparent   |
+| `--pull-refresh-bg-dark`  | background under dark mode                                                                                                | #0088ff       |
+| `--pull-refresh-bg`       | background，will be overridden by `--pull-refresh-bg-light` under light mode and `--pull-refresh-bg-dark` under dark mode | 无            |
diff --git a/packages/quarkd/src/pullrefresh/doc.zh-CN.md b/packages/quarkd/src/pullrefresh/doc.zh-CN.md
@@ -91,3 +91,13 @@ onFresh() {
 | pulling | 下拉过程中的顶部提示信息 |
 | loosing | 释放过程中的顶部提示信息 |
 | loading | 加载过程中的顶部提示信息 |
+
+## 样式变量
+
+组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。
+
+| 名称                      | 说明                                                                                             | 默认值      |
+| ------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
+| `--pull-refresh-bg-light` | light 模式下拉背景                                                                               | transparent |
+| `--pull-refresh-bg-dark`  | dark 模式下拉背景                                                                                | #0088ff     |
+| `--pull-refresh-bg`       | 下拉背景，在 light 和 dark 模式下会分别被`--pull-refresh-bg-light`和`--pull-refresh-bg-dark`覆盖 | 无          |
diff --git a/packages/quarkd/src/pullrefresh/style.css b/packages/quarkd/src/pullrefresh/style.css
@@ -8,6 +8,7 @@
 
 .quark-pull-refresh {
   width: 100%;
+  background: var(--pull-refresh-bg-light, var(--pull-refresh-bg, transparent));
 }
 
 .quark-pull-refresh-container {
@@ -40,7 +41,7 @@
 }
 
 :host([dark]) .quark-pull-refresh {
-  background-color: quark-primaryColor;
+  background: var(--pull-refresh-bg-dark, var(--pull-refresh-bg, quark-primaryColor));
 }
 
 :host([dark]) .quark-pull-refresh-text {
@@ -66,4 +67,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}