feat: tabs新增收缩模式

hellof2e · Jan 25, 2024 · 6a8f629 · 6a8f629
1 parent d34e3a5
commit 6a8f629
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-      "source.fixAll": true
+      "source.fixAll": "explicit"
     },
     "files.associations": {
       "*.vue": "html"

diff --git a/packages/quarkd/src/tab/demo.scss b/packages/quarkd/src/tab/demo.scss
@@ -26,3 +26,7 @@
     height: 700px;
   }
 }
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
diff --git a/packages/quarkd/src/tab/demo.vue b/packages/quarkd/src/tab/demo.vue
@@ -111,6 +111,24 @@
       </quark-tabs>
     </div>
 
+    <h2>{{ translate("title.shrink") }}</h2>
+    <div class="demo-item">
+      <quark-tabs shrink>
+        <quark-tab-content :label="translate('tab')[0]">
+          {{ translate("tabs")[0] }}
+        </quark-tab-content>
+        <quark-tab-content :label="translate('tab')[1]">
+          {{ translate("tabs")[1] }}
+        </quark-tab-content>
+        <quark-tab-content :label="translate('tab')[2]">
+          {{ translate("tabs")[2] }}
+        </quark-tab-content>
+        <quark-tab-content :label="translate('tab')[3]">
+          {{ translate("tabs")[3] }}
+        </quark-tab-content>
+      </quark-tabs>
+    </div>
+
     <h2>{{ translate("title.sticky") }}</h2>
     <div class="demo-item">
       <quark-tabs sticky offsettop="17vw">
@@ -156,6 +174,7 @@ export default createDemo({
             scroll: "横向滚动",
             click: "切换事件",
             sticky: "吸顶效果",
+            shrink: "收缩布局",
           },
           selected: "当前选择：",
           tab: [
@@ -191,6 +210,7 @@ export default createDemo({
             scroll: "Horizontal Scrolling",
             click: "Click Event",
             sticky: "Sticky Effect",
+            shrink: "Shrink",
           },
           selected: "Currently Selected: ",
           tab: [

diff --git a/packages/quarkd/src/tab/doc-react.en-US.md b/packages/quarkd/src/tab/doc-react.en-US.md
@@ -95,6 +95,26 @@ export default () => {
 };
 ```
 
+### Shrink
+
+In shrink mode, the tabs will be shrinked to the left.
+
+```html
+<Tabs shrink>
+  <TabContent label="tab1"> tab1 content </TabContent>
+  <TabContent label="tab2"> tab2 content </TabContent>
+  <TabContent label="tab3"> tab3 content </TabContent>
+  <TabContent label="tab4"> tab4 content </TabContent>
+</Tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### Sticky
 
 In sticky mode, the nav-item will be fixed to top when scroll to top.
@@ -144,3 +164,5 @@ The component provides the following[CSS variables](https://developer.mozilla.or
 | `--tab-active-line-color`     | `tab-item` active state `underline` color                                     | `#0088ff`                        |
 | `--tabs-background-color`     | tabs Background color                                                         | `#ffffff`                        |
 | `--tab-item-background-color` | `tab-item` Background color                                                   | `#ffffff`                        |
+| `--tab-item-shrink-width`     | In shrink mode `tab-item` width                                               | `auto`                           |
+| `--tab-item-shrink-padding`   | In shrink mode `tab-item` horizontal `padding`                                | `0`                              |
diff --git a/packages/quarkd/src/tab/doc-react.zh-CN.md b/packages/quarkd/src/tab/doc-react.zh-CN.md
@@ -95,6 +95,26 @@ export default () => {
 };
 ```
 
+### 收缩布局
+
+通过 shrink 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
+
+```html
+<Tabs shrink>
+  <TabContent label="tab1"> tab1 content </TabContent>
+  <TabContent label="tab2"> tab2 content </TabContent>
+  <TabContent label="tab3"> tab3 content </TabContent>
+  <TabContent label="tab4"> tab4 content </TabContent>
+</Tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### 吸顶效果
 
 nav-item 在滚动时固定在屏幕上方
@@ -144,3 +164,5 @@ nav-item 在滚动时固定在屏幕上方
 | `--tab-active-line-color`     | `tab-item` 激活态`下划线`颜色             | `#0088ff `                |
 | `--tabs-background-color`     | tabs 背景色                               | `#ffffff`                 |
 | `--tab-item-background-color` | `tab-item` 背景色                         | `#ffffff `                |
+| `--tab-item-shrink-width`     | 收缩布局下`tab-item`宽度                  | `auto`                    |
+| `--tab-item-shrink-padding`   | 收缩布局下`tab-item`左右`padding`         | `0`                       |
diff --git a/packages/quarkd/src/tab/doc.en-US.md b/packages/quarkd/src/tab/doc.en-US.md
@@ -109,6 +109,26 @@ methods: {
 }
 ```
 
+### Shrink
+
+In shrink mode, the tabs will be shrinked to the left.
+
+```html
+<quark-tabs shrink>
+  <quark-tab-content label="tab1" name="a"> tab1 content </quark-tab-content>
+  <quark-tab-content label="tab2" name="b"> tab2 content </quark-tab-content>
+  <quark-tab-content label="tab3" name="c"> tab3 content </quark-tab-content>
+  <quark-tab-content label="tab4" name="d"> tab4 content </quark-tab-content>
+</quark-tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### Sticky
 
 In sticky mode, the nav-item will be fixed to top when scroll to top.
@@ -163,3 +183,5 @@ The component provides the following[CSS variables](https://developer.mozilla.or
 | `--tab-active-line-color`     | `tab-item` active state `underline` color                                     | `#0088ff`                        |
 | `--tabs-background-color`     | tabs Background color                                                         | `#ffffff`                        |
 | `--tab-item-background-color` | `tab-item` Background color                                                   | `#ffffff`                        |
+| `--tab-item-shrink-width`     | In shrink mode `tab-item` width                                               | `auto`                           |
+| `--tab-item-shrink-padding`   | In shrink mode `tab-item` horizontal `padding`                                | `0`                              |
diff --git a/packages/quarkd/src/tab/doc.zh-CN.md b/packages/quarkd/src/tab/doc.zh-CN.md
@@ -109,6 +109,26 @@ methods: {
 }
 ```
 
+### 收缩布局
+
+通过 shrink 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
+
+```html
+<quark-tabs shrink>
+  <quark-tab-content label="tab1" name="a"> tab1 content </quark-tab-content>
+  <quark-tab-content label="tab2" name="b"> tab2 content </quark-tab-content>
+  <quark-tab-content label="tab3" name="c"> tab3 content </quark-tab-content>
+  <quark-tab-content label="tab4" name="d"> tab4 content </quark-tab-content>
+</quark-tabs>
+```
+
+```css
+:root {
+  --tab-item-shrink-width: 60px;
+  --tab-item-shrink-padding: 4px;
+}
+```
+
 ### 吸顶效果
 
 nav-item 在滚动时固定在屏幕上方
@@ -163,3 +183,5 @@ nav-item 在滚动时固定在屏幕上方
 | `--tab-active-line-color`     | `tab-item` 激活态`下划线`颜色             | `#0088ff `                |
 | `--tabs-background-color`     | tabs 背景色                               | `#ffffff`                 |
 | `--tab-item-background-color` | `tab-item` 背景色                         | `#ffffff `                |
+| `--tab-item-shrink-width`     | 收缩布局下`tab-item`宽度                  | `auto`                    |
+| `--tab-item-shrink-padding`   | 收缩布局下`tab-item`左右`padding`         | `0`                       |
diff --git a/packages/quarkd/src/tab/index.tsx b/packages/quarkd/src/tab/index.tsx
@@ -9,6 +9,7 @@ import { slotAssignedElements } from "../../utils/public";
 import "../sticky";
 import tabs from "./tabs-style.css";
 import tab from "./tab-style.css";
+
 export interface ContentProps {
   label: string;
   disabled?: boolean;
@@ -19,6 +20,8 @@ export interface Props {
   sticky?: boolean;
   offsettop?: number;
   linewidth?: number;
+  shrink?: boolean;
+  dark?: boolean;
 }
 export interface CustomEvent {
   change: (e: { detail: { label: string; name: string } }) => void;
@@ -62,6 +65,11 @@ class QuarkTabs extends QuarkElement {
   })
   dark = false;
 
+  @property({
+    type: Boolean,
+  })
+  shrink = false;
+
   @state()
   init = false;
 
@@ -341,11 +349,17 @@ class QuarkTabs extends QuarkElement {
   renderTabNav = () => {
     return (
       <div class="quark-tab-nav-con">
-        <div class="quark-tab-nav" ref={this.navRef}>
+        <div
+          class={`quark-tab-nav ${
+            this.shrink ? "quark-tab-nav__shrink" : "quark-tab-nav__flex"
+          }`}
+          ref={this.navRef}
+        >
           {this.tabNavs.map((item) => (
             <quark-tab-nav
               active={item.name === this.activekey}
               disabled={item.disabled}
+              shrink={this.shrink}
               dark={item.dark}
               name={item.name}
               onClick={(e: any) => this.handleClick(e, item)}
@@ -405,6 +419,11 @@ class QuarkTabNav extends QuarkElement {
   })
   dark = false;
 
+  @property({
+    type: Boolean,
+  })
+  shrink = false;
+
   @property()
   name: string | number = 0;
 

diff --git a/packages/quarkd/src/tab/tab-style.css b/packages/quarkd/src/tab/tab-style.css
@@ -11,6 +11,12 @@
   background-color: var(--tab-item-background-color, #fff);
 }
 
+:host([shrink]) {
+  min-width: auto;
+  width: var(--tab-item-shrink-width, auto);
+  padding: 0 var(--tab-item-shrink-padding, 0);
+}
+
 :host([active]) {
   font-weight: 500;
   color: var(--tab-item-active-color, #333333);
@@ -21,6 +27,7 @@
   color: var(--tab-item-disabled-color, quark-formDisabledColor);
   pointer-events: none;
 }
+
 :host([disabled]) .quark-tab-nav {
   cursor: not-allowed;
 }
@@ -38,4 +45,5 @@
   width: 100%;
   text-align: center;
   cursor: pointer;
+  background-color: transparent;
 }
diff --git a/packages/quarkd/src/tab/tabs-style.css b/packages/quarkd/src/tab/tabs-style.css
@@ -18,7 +18,7 @@
   scroll-behavior: smooth;
 }
 
-.quark-tab-nav {
+.quark-tab-nav__flex {
   display: flex;
 }