fix: 优化tabbar组件

hellof2e · Apr 28, 2023 · 1e36c82 · 1e36c82
1 parent 56e4d88
commit 1e36c82
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 75 deletions.
diff --git a/packages/quarkd/src/tabbar/demo.vue b/packages/quarkd/src/tabbar/demo.vue
@@ -24,7 +24,7 @@
     </quark-tabbar>
 
     <h2>{{ translate("title.name") }}</h2>
-    <quark-tabbar value="tel">
+    <quark-tabbar active="2">
       <quark-tabbar-item name="home">
         <quark-icon-home size="20" />
         <div>{{ translate("tabbar.home") }}</div>

diff --git a/packages/quarkd/src/tabbar/doc-react.en-US.md b/packages/quarkd/src/tabbar/doc-react.en-US.md
@@ -49,7 +49,7 @@ import "@quarkd/icons/lib/tel";
 ### Active menu
 
 ```html
-<QuarkTabbar val="联系">
+<QuarkTabbar active="2">
   <QuarkTabbarItem>
     <quark-icon-home size="20" />
     <div>Home</div>
@@ -88,14 +88,19 @@ import "@quarkd/icons/lib/tel";
 
 ### QuarkTabbar Props
 
-| Attribute   | Description                      | Type      | Default Value |
-| ----------- | -------------------------------- | --------- | ------------- |
-| fixed       | Whether to fixed bottom          | `boolean` | `true `       |
-| activecolor | Color of active tab item         | `string ` | `#0088FF`     |
-| value       | name or index of active tab item | `string`  | `0`           |
+| Attribute | Description                      | Type      | Default Value |
+| --------- | -------------------------------- | --------- | ------------- |
+| fixed     | Whether to fixed bottom          | `boolean` | `true `       |
+| active    | name or index of active tab item | `string`  | `0`           |
 
 ### QuarkTabbar Event
 
 | Event  | Description                      | Callback Arguments                                                |
 | ------ | -------------------------------- | ----------------------------------------------------------------- |
 | change | Emitted when changing active tab | `{e:{detail: {value: The selected name or index value}}} => void` |
+
+## CSS Variables
+
+| Name                    | Description                     | Default Value |
+| ----------------------- | ------------------------------- | ------------- |
+| `--tabbar-active-color` | The color of the activated menu | `#0088FF`     |
diff --git a/packages/quarkd/src/tabbar/doc-react.zh-CN.md b/packages/quarkd/src/tabbar/doc-react.zh-CN.md
@@ -51,7 +51,7 @@ import "@quarkd/icons/lib/tel";
 ### 设置默认激活菜单
 
 ```html
-<QuarkTabbar val="联系">
+<QuarkTabbar active="2">
   <QuarkTabbarItem>
     <quark-icon-home size="20" />
     <div>首页</div>
@@ -90,16 +90,21 @@ import "@quarkd/icons/lib/tel";
 
 ## API
 
-### QuarkTabbar Props
+### QuarkTabbar 属性
 
-| 参数        | 说明               | 类型      | 默认值    |
-| ----------- | ------------------ | --------- | --------- |
-| fixed       | 是否固定在底部     | `boolean` | `true`    |
-| activecolor | 激活菜单的颜色     | `string`  | `#0088FF` |
-| value       | 选中的名称或索引值 | `string`  | `0`       |
+| 参数   | 说明               | 类型      | 默认值 |
+| ------ | ------------------ | --------- | ------ |
+| fixed  | 是否固定在底部     | `boolean` | `true` |
+| active | 选中的名称或索引值 | `string`  | `0`    |
 
-### QuarkTabbar Event
+### QuarkTabbar 事件
 
 | 名称   | 说明           | 类型                                                |
 | ------ | -------------- | --------------------------------------------------- |
 | change | 切换标签时触发 | `{e:{detail: {value: 选中的名称或索引值}}} => void` |
+
+## 样式变量
+
+| 名称                    | 说明             | 默认值    |
+| ----------------------- | ---------------- | --------- |
+| `--tabbar-active-color` | 被激活菜单的颜色 | `#0088FF` |
diff --git a/packages/quarkd/src/tabbar/doc.en-US.md b/packages/quarkd/src/tabbar/doc.en-US.md
@@ -49,7 +49,7 @@ import "@quarkd/icons/lib/tel";
 ### Active menu
 
 ```html
-<quark-tabbar val="联系">
+<quark-tabbar active="2">
   <quark-tabbar-item>
     <quark-icon-home size="20" />
     <div>Home</div>
@@ -92,10 +92,16 @@ import "@quarkd/icons/lib/tel";
 | ----------- | -------------------------------- | --------- | ------------- |
 | fixed       | Whether to fixed bottom          | `boolean` | `true `       |
 | activecolor | Color of active tab item         | `string ` | `#0088FF`     |
-| value       | name or index of active tab item | `string`  | `0`           |
+| active      | name or index of active tab item | `string`  | `0`           |
 
 ### Quark-tabbar Event
 
 | Event  | Description                      | Callback Arguments                                                |
 | ------ | -------------------------------- | ----------------------------------------------------------------- |
 | change | Emitted when changing active tab | `{e:{detail: {value: The selected name or index value}}} => void` |
+
+## CSS Variables
+
+| Name                    | Description                     | Default Value |
+| ----------------------- | ------------------------------- | ------------- |
+| `--tabbar-active-color` | The color of the activated menu | `#0088FF`     |
diff --git a/packages/quarkd/src/tabbar/doc.zh-CN.md b/packages/quarkd/src/tabbar/doc.zh-CN.md
@@ -50,8 +50,10 @@ import "@quarkd/icons/lib/tel";
 
 ### 设置默认激活菜单
 
+通过 `active` 来设置当前被激活的菜单，`active` 为菜单索引值。
+
 ```html
-<quark-tabbar val="联系">
+<quark-tabbar active="2">
   <quark-tabbar-item>
     <quark-icon-home size="20" />
     <div>首页</div>
@@ -92,14 +94,19 @@ import "@quarkd/icons/lib/tel";
 
 ### Quark-tabbar Props
 
-| 参数        | 说明               | 类型      | 默认值    |
-| ----------- | ------------------ | --------- | --------- |
-| fixed       | 是否固定在底部     | `boolean` | `true`    |
-| activecolor | 激活菜单的颜色     | `string`  | `#0088FF` |
-| value       | 选中的名称或索引值 | `string`  | `0`       |
+| 参数   | 说明           | 类型      | 默认值 |
+| ------ | -------------- | --------- | ------ |
+| fixed  | 是否固定在底部 | `boolean` | `true` |
+| active | 激活的索引值   | `string`  | `0`    |
 
 ### Quark-tabbar Event
 
 | 名称   | 说明           | 类型                                                |
 | ------ | -------------- | --------------------------------------------------- |
 | change | 切换标签时触发 | `{e:{detail: {value: 选中的名称或索引值}}} => void` |
+
+## 样式变量
+
+| 名称                    | 说明             | 默认值    |
+| ----------------------- | ---------------- | --------- |
+| `--tabbar-active-color` | 被激活菜单的颜色 | `#0088FF` |
diff --git a/packages/quarkd/src/tabbar/index.test.js b/packages/quarkd/src/tabbar/index.test.js
@@ -3,7 +3,6 @@ import "quarkd/lib/tabbar";
 
 const data = {
   fixed: false,
-  inactivecolor: "#879099",
   activecolor: "#0088FF",
   value: "0",
 };

diff --git a/packages/quarkd/src/tabbar/index.tsx b/packages/quarkd/src/tabbar/index.tsx
@@ -4,8 +4,7 @@ import "../tabbaritem";
 import style from "./style.css";
 export interface Props {
   fixed?: boolean;
-  activecolor?: string;
-  value?: string;
+  active?: string;
 }
 export interface CustomEvent {
   change: (e: { detail: { value: string } }) => void;
@@ -17,16 +16,8 @@ class QuarkTabbar extends QuarkElement {
   })
   fixed = false;
 
-  @property({
-    type: Boolean,
-  })
-  placeholder = false;
-
   @property()
-  activecolor = "#0088FF";
-
-  @property()
-  value = "0";
+  active = "0";
 
   slotRef: any = createRef();
 
@@ -35,14 +26,15 @@ class QuarkTabbar extends QuarkElement {
     oldValue: string,
     newValue: string
   ): boolean {
-    if (propName === "value" && oldValue !== newValue) {
+    if (propName === "active" && oldValue !== newValue) {
       const assignedNodes = this.slotRef.current?.assignedNodes();
       const elements = slotAssignedElements(assignedNodes);
-      elements.forEach((item, index) => {
-        if (item.getAttribute("name") === newValue) {
-          item.setAttribute("active", "true");
+
+      elements.forEach((item) => {
+        if (item.getAttribute("index") === newValue) {
+          item.setAttribute("active", "");
         } else {
-          item.setAttribute("active", "false");
+          item.removeAttribute("active");
         }
       });
     }
@@ -52,24 +44,24 @@ class QuarkTabbar extends QuarkElement {
   slotchange = () => {
     const assignedNodes = this.slotRef.current?.assignedNodes();
     const elements = slotAssignedElements(assignedNodes);
+
     elements.forEach((item, index) => {
-      item.setAttribute("activecolor", this.activecolor);
-      if (item.getAttribute("name") === null) {
-        item.setAttribute("name", String(index));
+      if (item.getAttribute("index") === null) {
+        item.setAttribute("index", String(index));
       }
 
       item.addEventListener("click", this.eventListener);
-      if (item.getAttribute("name") === this.value) {
-        item.setAttribute("active", "true");
+      if (item.getAttribute("index") === this.active) {
+        item.setAttribute("active", "");
       }
     });
   };
 
   eventListener = (e: any) => {
-    this.value = e.currentTarget.getAttribute("name");
+    this.active = e.currentTarget.getAttribute("index");
 
     this.$emit("change", {
-      detail: { value: e.currentTarget.getAttribute("name") },
+      detail: { value: e.currentTarget.getAttribute("index") },
     });
   };
 

diff --git a/packages/quarkd/src/tabbar/style.css b/packages/quarkd/src/tabbar/style.css
@@ -6,7 +6,7 @@
   padding: 10px 0;
   background: #fff;
   font-size: 12px;
-  box-shadow: var(--tabbar-box-shadow, 0px -2px 8px 0px rgba(36, 39, 41, 0.08));
+  box-shadow: 0px -2px 8px 0px rgba(36, 39, 41, 0.08);
 }
 
 :host([fixed]) {

diff --git a/packages/quarkd/src/tabbaritem/index.tsx b/packages/quarkd/src/tabbaritem/index.tsx
@@ -1,28 +1,10 @@
-import QuarkElement, { property, customElement } from "quarkc";
+import QuarkElement, { customElement } from "quarkc";
 import style from "./style.css";
 
 @customElement({ tag: "quark-tabbar-item", style })
 class QuarkTabbarItem extends QuarkElement {
-  @property({
-    type: Boolean,
-  })
-  active = false;
-
-  @property()
-  inactivecolor: string;
-
-  @property()
-  activecolor: string;
-
   render() {
-    return (
-      <div
-        class="quark-tabbar-item"
-        style={{ color: this.active && this.activecolor }}
-      >
-        <slot></slot>
-      </div>
-    );
+    return <slot></slot>;
   }
 }
 

diff --git a/packages/quarkd/src/tabbaritem/style.css b/packages/quarkd/src/tabbaritem/style.css
@@ -1,12 +1,9 @@
-
 :host {
   cursor: pointer;
   width: 100%;
   text-align: center;
 }
-.quark-tabbar-icon {
-  text-align: center;
-}
-/* .quark-tabbar-slot {
-  display: grid;
-} */
+
+:host([active]) {
+  color: var(--tabbar-active-color, #0088FF);
+}