diff --git a/packages/quarkd/src/tabbar/demo.vue b/packages/quarkd/src/tabbar/demo.vue index 7afd3634..c4e979e5 100644 --- a/packages/quarkd/src/tabbar/demo.vue +++ b/packages/quarkd/src/tabbar/demo.vue @@ -24,7 +24,7 @@

{{ translate("title.name") }}

- +
{{ translate("tabbar.home") }}
diff --git a/packages/quarkd/src/tabbar/doc-react.en-US.md b/packages/quarkd/src/tabbar/doc-react.en-US.md index 2a4d48a2..1292d127 100644 --- 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 - +
Home
@@ -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 index 05522e1e..f96ca1e8 100644 --- 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 - +
首页
@@ -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 index 2e7fbef4..be81b703 100644 --- 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 - +
Home
@@ -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 index 208e21bb..08200ea6 100644 --- 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 - +
首页
@@ -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 index 4e0df199..9a69c22c 100644 --- 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 index 968faa25..6bfa6775 100644 --- 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 index 9d1d9db4..fb02d6d4 100644 --- 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 index 53be9582..5c3af6ed 100644 --- 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 ( -
- -
- ); + return ; } } diff --git a/packages/quarkd/src/tabbaritem/style.css b/packages/quarkd/src/tabbaritem/style.css index d3ec6383..26218e79 100644 --- 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); +} \ No newline at end of file